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

2012-06-25

使用CSS—轻松学习网站界面制作(一)这些天为了做一个网站，所以顺便学习了一下CSS，不能算是很专业的学习CSS，

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

这些天为了做一个网站，所以顺便学习了一下CSS，不能算是很专业的学习CSS，主要是为了更好的完善这些个界面而学习，写这篇博客是为了让大家和我一起来学习做网站，体会做网站的乐趣，达到轻松学习的目的。

CSS特点：实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点，省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果：

</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">然而，当id选择器和类选择器的样式起冲突的时候，就这涉及到了一个优先级的问题了，在这里我就直接把优先级说一下，ID选择器>类选择器。</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里边写入一个颜色值：</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优先级>类选择器>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 class="aged2"><script type="text/javascript">a("article_content_down");</script></div>
 </div>
<div id="pagebox" >
<a href="/jiaocheng/css/" target="_blank">查看更多</a>
<A href="/jiaocheng/20120902/1265976.html" title="动态添加元素css丢失的终极解决方法">下一篇</A></div>
<div id="MainLeftll">
<div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.net/jiaocheng/20120625/1265977.html">https://www.reader8.net/jiaocheng/20120625/1265977.html</a></div>
<div class="related"><span class="relatedIco1">读书人精选</span>
<ul class="relatedList">
</ul>
</div>
<div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div>
<div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div>
</div>
</div>
<!-- 文章正文左边结束 -->
<!-- 文章正文右边开始 -->
<div class="leftbox_r">
<div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> 
<div class="Rtitle">
<span class="Rtitle_text">热点排行</span></div>
<div class="RContl">
<ul>
<li><a href="/jiaocheng/20140117/1296327.html" target="_blank">css3卡通系列之animation 属性</a></li>
<li><a href="/jiaocheng/20140122/1295265.html" target="_blank">纯css多级菜单的解决方法</a></li>
<li><a href="/jiaocheng/20131229/1276615.html" target="_blank">请问IE8兼容视图下CSS样式显示不正确有关</a></li>
<li><a href="/jiaocheng/20140113/1294814.html" target="_blank">一个简单的有关问题  不伤脑细胞</a></li>
<li><a href="/jiaocheng/20140119/1290652.html" target="_blank">帮初学者解决 分页效果</a></li>
<li><a href="/jiaocheng/20131223/1289870.html" target="_blank">SSH框架中   action中如何可以取到同一字</a></li>
<li><a href="/jiaocheng/20140119/1295688.html" target="_blank">html下载按钮,该如何解决</a></li>
<li><a href="/jiaocheng/20131228/1266369.html" target="_blank">纯CSS三实现超酷幻灯片图文切换效果</a></li>
<li><a href="/jiaocheng/20130911/1279203.html" target="_blank">css实现挟制不换行/自动换行/强制换行</a></li>
<li><a href="/jiaocheng/20140103/1292281.html" target="_blank">小弟我做了一个置顶，为什么火狐打开就能</a></li>
</ul>
</div>
<div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div>
<!-- 文章正文右边结束 -->
</div>
<!--主体结束-->
<script type="text/javascript">a("article_down_up");</script>
<script type="text/javascript">a("foot");</script>
<script type="text/javascript">a("article_down_up2");</script>
<!--主体结束-->
<div style="display:none"> 
<!--百度统计代码--> 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div> 
<script type="text/javascript">a("allbt");</script>
</body>
</html>