CSS样式表也要玩结构化

很多人可能会觉得奇怪,这标题是什么意思,不过就一个样式表而已,还谈什么结构化?且听如下理由:

玩Web重构的朋友对CSS应该都不会陌生了,都知道CSS里面有几种常用的选择符的样式定义方法,才子将常用的几种大致讲解一下:
第一种是通配选择符,就是将所有的元素先预定义一个样式,如:

* { margin:0px; padding:0px; }

这样设置之后,所有的元素都已经将内边距和外边距都设置成0px了。
PS:才子从来不这样设置,因为它会直接影响ul和ol之类的列表元素的样式。

第二种是类型选择符,才子喜欢称它为标签选择符,就是通过标签元素的名称直接定义其样式,如:

body { font-size:14px; }

这样设置之后,所有body元素里的字体大小都是14px,但表格元素是个例外,要令表格元素字体大小也一样,要这样:

body,td { font-size:14px; }

第三种是ID选择符,通过一个唯一的ID标识符来定义某个元素的样式,如:

#nav { color:red; }

这样设置之后,nav元素下的字体都应该是红色的了。
应用如:<div id="nav">这里是内容</div>

第四种是类选择符,才子一般叫它class选择符,通过一个类来定义一种样式,让所有指定这个类的元素都生效,如:

.left { text-align:left; }
.right { text-align:right; }

上面定义了两个类,这样设置之后,指定哪个类的元素下的内容就将依据类里的样式定义来居左或居右排列了。
应用如:
<div class="left">这里是left内容</div>
<div class="right">这里是right内容</div>

常用的大概就这四种,还有一些什么属性选择符,包含选择符,我们平时应用得相对比较少,在此不多说了,有兴趣的朋友请在本站下载苏小雨的CSS 2.0中文手册(http://www.54caizi.org/post/handbook-download.html)。

下面来讲主题了,怎么样来结构化呢?
做一个网站首先要有一个构思,整站采用什么样的色系,什么字体,字体大小如何等等,那么我们就可以把这些最基本的标签选择符的样式先写入一个CSS文件,如base.css,这个CSS里把这个站需要用到的一些标签元素都做一个基本的样式设定,如body下的字体颜色和大小,超链接的样式等等,甚至是用不到的标签也设置一下都无妨,为什么呢?哈哈,因为可以重用嘛。下次再做其它的站的时候,base.css基本不需要写了,直接拿来用,最多也只是稍微改动一下下就行了,省不少事。

OK,再来看网站结构了。玩Web重构的朋友都知道,现在都用div+css来布局了,那么我们也将整个布局做一个单独的CSS文件,如layout.css,把布局全部定义好。大多数网站布局也都差不太多,都大致有以下几个模块吧,如header,nav,content,sidebar,footer等等,那就都定义一下样式吧,考虑到元素都有样式的继承性,其实有一些具体的属性我们已经不需要再次定义在ID选择符里了。因为它们可以继承base.css里的一些样式了。

这个是重点了,我们再来做一个类选择符的辅助CSS文件,如common.css,里面是些什么内容呢?才子把自己用的文件copy一段共享一下。^0^

时间: 2024-10-27 07:31:43

CSS样式表也要玩结构化的相关文章

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内

CSS样式表技巧总结

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

网页添加CSS样式表的四种方式

核心提示:网页添加CSS样式表的四种方式 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二

&amp;#106avascript极速狂飙:CSS样式表的渲染效率

css|样式表     我的MzTreeView1.0树控件发布至今,得到了不少意见反馈,很多网友给了我很多的中肯的建议,也指出了这个控件里的诸多BUG和不足之处,所以我准备写一个新版本的树,将大家的建议都整合进来实现.这几天我就一直在写新版的树,树控件最重要的是效率,特别是大节点量的时候,效率稍微差点的模式就会拖垮浏览器,所以新版的树我首要的还是提高效率,比如增加异步数据加载的支持等,另外我还有一个设想,就是树的树型结构竖线用样式表(背景图)来实现,样式表背景图片只需要加载一次,而现在这个模式

&amp;#106avascript极速狂飙:CSS样式表的背景渲染效率

css|样式表     我的MzTreeView1.0树控件发布至今,得到了不少意见反馈,很多网友给了我很多的中肯的建议,也指出了这个控件里的诸多BUG和不足之处,所以我准备写一个新版本的树,将大家的建议都整合进来实现.这几天我就一直在写新版的树,树控件最重要的是效率,特别是大节点量的时候,效率稍微差点的模式就会拖垮浏览器,所以新版的树我首要的还是提高效率,比如增加异步数据加载的支持等,另外我还有一个设想,就是树的树型结构竖线用样式表(背景图)来实现,样式表背景图片只需要加载一次,而现在这个模式

CSS入门:关于css样式表

css|样式表 这些教程是我整理的,参考小雨css 2.0手册,hve && Star Ocean得css手册,还有网上的一些资源, 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html).2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Drea

基础——关于CSS样式表

css|样式表 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html).2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用C

CSS样式表:详细介绍IE7新支持的选择器

css|样式表 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS.两个最有用的项目将是 Child子和Adjacent Sibling相邻兄弟选择符.现在已是时候使用它们制作网页,并且更深入研究它们. 注意,选择器包括现行的符号,">","+"和空格(后代选择符),涉及到子选择器,相邻兄弟选择器,后代选择器,统称为选择符. 一个较好的方法 在我们研究选择符之前,弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意

推荐:常用CSS样式表缩写语法总结

css|样式表|语法 常用CSS缩写语法总结 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2