样式表空格与不空格的关系你分清楚了吗？

我们看过一些样式表文件的样式名都写的很长，比如：body #header .topbar.logo{...}，这是因为利用了元素的继承关系，利用元素名，或者ID名和类名（也就是class名）来精确定位和描述某一个区域的css样式表格式。

初学样式表的人肯定会说，我要精确定位一个区域的样式表，用一个class名不就可以吗，还需要这么麻烦吗？这话说的没错，做只有几个页面的小网页，也确实不用这么麻烦，但是当你规划一个大型网站的时候，你就肯定要利用web元素的继承关系，按照从大区域到小区域的次序来写CSS文档。这就就象画画一样，学过绘画的朋友，都知道，画素描都是先打型然后在铺大色调，最后是深入刻画。CSS文档也是，确定大区域的结构，然后在深入继承和规划。相关CSS教程全集详解

好了，言归正传，今天要讲的是CSS样式表中继承关系的空格与不空格的问题。先看下面的一个例子：

这是我的CSS文件：

td .a{
color: #006600}
td.b{
color: #FF0000}

这是我的body元素里的代码：

  这里是标签"li"

在CSS文件里td后面跟着的class名是 a 和 b ,a里面我定义的字体颜色是绿色，b里面我定义的字体颜色是红色．现在我要说的是，这两个样式表写法都是正确的，类名b没有空格连着元素

，而类名a有空格接着元素，运行此代码，你发现页面显示字体为绿色，这说明页面读取了样式表td空格a的内容，由此我们可以推断，页面样式表文件是按照页面元素由里到外的次序来读取的，取近舍远的原则。

如果我们把样式表td空格a的空格去掉，你会发现，现在页面字体的颜色是读取的样式表b里的内容，字体变为红色的了。这说明了不空格的样式表写法是针对在当前所在元素内而定的，,而有空格的样式表写法是继承了当前元素内某个元素而定，通过反复的几次测试，继承的层级至少是一个层级以上就可以了，具体没有严格的规定。

相信看到这里，大家对样式表空格与不空格的关系已经有了一点认识，希望在以后的学习中与大家共勉。如有不正之处，还望包涵，指点！我也只是在工作学习中领悟点认识与大家分享。高手请勿见笑。想了解更多网页设计教程知识可登陆e良师益友网

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29967646/viewspace-1328699/，如需转载，请注明出处，否则将追究法律责任。

分享到：

上一篇：分享HTML5 3D动画应用实例

下一篇：不利于网站优化的HTML标签和属性

请登录后发表评论登录

全部评论

<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>

<%for(var j=0;j

<%=items[i].items.items[j].createtime%> 回复

<%=items[i].items.items[j].username%> 回复 <%=items[i].items.items[j].tousername%>： <%=items[i].items.items[j].content%>

<%}%> <%if(items[i].items.total > 5) { %>

还有<%=items[i].items.total-5%>条评论) data-count=1 data-flag=true>点击查看

<%}%>

<%}%> <%}%>

mandy_zhi

注册时间：2014-10-20

博文量

41
访问量

92292

样式表空格与不空格的关系你分清楚了吗？相关推荐

Qt学习笔记之样式表
一.概述 Qt的样式表是从Qt4.2开始引入的描述窗口部件外观的机制,类似于HTML的层叠样式表(Cascading Style Sheets,CSS).样式表在Qt的风格之上起作用(如果使用了样式表 ...
QT样式表(QStyleSheet)
QT样式表 (QStyleSheet) 作者:刘旭晖 Raymond 转载请注明出处 Email:colorant@163.com BLOG:http://blog.csdn.net/colorant ...
SQL去除数据库表中tab、空格、回车符等特殊字符的解决方法
SQL去除数据库表中tab.空格.回车符等特殊字符的解决方法参考文章: (1)SQL去除数据库表中tab.空格.回车符等特殊字符的解决方法 (2)https://www.cnblogs.com/ml ...
css样式表和选择器
CSS样式----图文详解:css样式表和选择器主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
外链式样式表_WEB前端 CSS样式表
CSS层叠样式表字体样式属性 font-size:字号大小页中普遍使用14px+. 尽量使用偶数的数字字号.ie6等老式浏览器支持奇数会有bug. font-family:字体中文字体需要加引号 ...
HTML5与CSS3学习笔记【第八章操作样式表】
第八章操作样式表前言 8.1.创建外部样式表 8.2.链接到外部样式表 8.3.创建嵌入样式表 8.4.应用内联样式 8.5.样式的层叠和顺序 8.6.使用与媒体相关的样式表 8.7.借鉴他人的灵 ...
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天
第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
CSS 样式表及选择器
目录三种样式表外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) css的样式特性多重样式优先级 ...

样式表空格与不空格的关系你分清楚了吗？

最新文章

样式表空格与不空格的关系你分清楚了吗？相关推荐

最新文章

热门文章