施用CSS—轻松学习网站界面制作(一)

使用CSS—轻松学习网站界面制作(一)
这些天为了做一个网站，所以顺便学习了一下CSS，不能算是很专业的学习CSS，主要是为了更好的完善这些个界面而学习，写这篇博客是为了让大家和我一起来学习做网站，体会做网站的乐趣，达到轻松学习的目的。
CSS特点：实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点，省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果：
</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">然而，当id选择器和类选择器的样式起冲突的时候，就这涉及到了一个优先级的问题了，在这里我就直接把优先级说一下，ID选择器&gt;类选择器。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"><strong>HTML标签选择器</strong>：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">设置的是一个更大范围的，只要是这个标签里边的，就会应用这个样式，那么我们这段代码里边，有一个body，我们在样式中的body里边写入一个颜色&#20540;：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作(一)"></p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">我们也很容易的看的出来，栏目一 栏目二 栏目三 没有变色，这是为什么呢？很明显，这涉及到了一个优先级的问题了，ID优先级&gt;类选择器&gt;HTML标签选择器。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">再说一个内容，就是一个父子关系的，我们在HTMLPage里边这样写:</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作(一)"></p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">我们就能看的出来，这个“一”是明显的变了。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">还有一个内容，并列的写法：我们在样式中这样写：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作(一)"></p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">我们接下来讲最后一个内容，就是class这个类是可以设置为多个的，那么我们看一下是什么个情况，我们在HTMLPage里边写：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作(一)"><br></p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">已经与niu一样，加了下划线了，这就出现了一个问题，这个时候的颜色应该是menu的还是niu的呢？我们一看就知道是menu的，这与CSS的样式排列前后顺序有关。与后面的对应起来。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">今天关于CSS我们就先讲这些入门的，希望对初学者有所帮助，后面继续完善博客。</p> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 移动端全站正文 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6147101717324856"
data-ad-slot="1958144088"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/css/">CSS</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20140607/2366389.html">怎样实现在地址栏输入因特网址就弹出</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140605/2358829.html">html中的特殊字符变换</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140605/2358828.html">PHP中htmlentities跟htmlspecialchars</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140604/2355057.html">娴HTML5ㄧЩㄥㄥ腑</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140604/2355056.html">html做成的chm无法打开</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140603/2350252.html">CSS截取图片上一部分做背景,该怎么解决</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140603/2350251.html">jsp如何将list传给后台</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140602/2346539.html">怎样实现在地址栏输入因特网址就弹出</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140602/2346538.html">html做成的chm无法打开</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140601/2345174.html">惯用特殊符号HTML代码</a></p></li>
</ul></div><div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></div>
<div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120625/1265977.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div>
<script language="javascript">
function clickme(sad){
var divobjdiv = document.getElementById("divobjdiv" + sad);
if(divobjdiv.style.display =="none"){
divobjdiv.style.display ="block"; 
}else{
divobjdiv.style.display ="none";
}
var wenzi = document.getElementById('divobjimg' + sad);
if(wenzi.innerText == "收起"){
wenzi.innerText = "查看更多";
}else{
    wenzi.innerText = "收起";
  }
}
</script>
<div id="back-top"><a href="#top"><span></span></a></div>
</body>
</html>
施用CSS轻松学习网站界面制作(一)
