css应用笔记整理之结构编写

• css应用笔记整理之结构编写
• 学习css应用笔记整理之结构编

很多时候大家对博客的优化并不是很在意，只是一味的追求模板的外观。尤其是对css的应用，更显得薄弱。
从几年前的TABLE+CSS网页编写结构到现在的DIV+CSS网页编写结构，至始至终css都占据着很重要的角色，因此css应用的得当在很大程度上能明显改善用户体验。
自从网络中提出SEO的概念之后，css的优化更加被得到重视，目前css框架也在不断被开放，通过css框架将提高我们的工作效率。

什么是css呢？他是Cascading Style Sheets的缩写，中文解释为层叠样式表，用于控制页面布局和外观。它有三种应用模式，应用的最广泛的就是外部调用样式表文件，我在这里不再探讨，有疑问的朋友可以在百度百科中查看相关解释。

对css编写结构和应用属性不了解的朋友可以论坛帖子博客大巴使用指南下载CSS样式表中文手册（chm电子书格式）和DIV+CSS布局大全（pdf文档格式）的压缩包（rar压缩包格式）

我将通过对HTML存在的下面代码进行css分析
<div id=”box”>
 <h2 class=”hsize”><a href=”#” title=”标题”><span class=”title”>标题</span></a></h2>
 <div id=”nav”>
  <h3>菜单</h3>
  <ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
  <ul>
 </div>
 <div id=”main” class=”wd hg”>内容</div>
</div>

结构编写方面

1-1.给需要重点加强的类选择符(Class Selectors)增值

我们要定义span的属性，我们可以在css里面这样写：
.title {…}
但是我认为span里面的内容很重要，我想让页面重向加载span，于是我们可以写成
span.title {…}

1-2.不要为ID选择符(ID Selectors)增加额外的标签

我们让页面重向加载span，是否可以这样写呢？
div#box h2.hsize span.title {…}
这样写是可以的，但是我们没必要为#box前面添加div，因为id是唯一的，如果这样做将影响页面匹配效率。于是我们可以写成
#box h2.hsize span.title {…}

1-3.尽量对子对象选择符(Child Selectors)使用“>”符号

在例子代码中，li是ul的子对象选择符，我们要定义li的样式，不建议这样写
#nav ul li {…}
这种写法将很耗空间资源，我们可以这样写
#nav ul>li {…}
但是这种写法也不是很好，如果我们能定义li的class值则尽量使用类选择符，例如更改为<li class=”list”></li>，于是我们可以写成
li.list {…}

1-4.通配选择符“*”(Universal Selector)有选择性的使用

很多时候为了方面我们会直接甩出一个
* {margin: 0; padding: 0;}
来清除IE浏览器部分标签带来的间距问题，但是这里存在一个问题就是通配符“*”把所有标签都初始化一遍，以至消耗一定的空间资源。
其实很多标签在不同浏览器上的差异很小，并且很多标签都不是常用到的，所以可以有针对性的使用，比如
html, ul, form, h2 {margin: 0; padding: 0;}
让所有含有title属性的标签字体以黑色显示，可以用通配符这样写
*[title] {color: #000000;}
不建议对下面的标签进行通配选择符控制
div span button b
很少用到的标签有
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, u, i, center, dl, dt, dd, ol, form, label, legend, caption, tbody, tfoot, thead

1-5.“a”标签的伪对象选择符(Pseudo Selectors)注意写法顺序

在例子代码中，如果我要定义a标签的鼠标过程：默认状态为黑色，当鼠标放在“标题”二字上面，字体变为红色，点击“标题”二字时字体呈绿色，点击“标题”二字后字体呈灰色，我们可以按下面的顺序写
/* 默认状态为黑色*/
a:link {color: #000000;}
/* 点击“标题”二字后字体呈灰色*/
a:visited {color: #999999;}
/* 当鼠标放在“标题”二字上面，字体变为红色*/
a:hover {color: #FF0000;}
/* 点击“标题”二字时字体呈绿色*/
a:active {color: #00FF00;}
浏览器解释CSS时遵循靠后优先原则，它会依次解释active-hover-visited-link，如果顺序错了，则显示效果也将不同。

1-6.ID选择符是唯一的，Class选择符是多样的

一个代码标签可以拥有多个class选择符并且可以和别的标签共用class选择符，但是只能拥有一个id选择符，因此id和class的选用因实际需要判定。一般地，唯一出现的标签使用id选择符，方便以后调用。和别的标签有共用属性则使用class选择符，可以节省空间资源。在例子代码中“<div id=”main” class=”wd hg”>内容</div>”就是这样一个应用。class选择符的多个参数之间用空格隔开。

1-7.“注释”避免使用

在第5条介绍中我使用了注释，在css文件中注释内容使用“/*”开头，“*/”结尾的注释结构，注意css注释方法不同于js脚本文件的注释方法和html的注释方法。注释的好处是方便以后修改查看，团队合作时注释更显得重要。注释不会被浏览器解释，但是注释会占用一定的空间资源。

1-8.标签之间使用的符号含义要分清

#box>h2.hsize>a>span.title {…} 定义span.title的样式
#box h2.hsize a span.title {…} 和上面一样定义span.title的样式，但是浏览器匹配速度没有上面快
#box,h2.hsize,span.title {…} 同时定义#box、h2.hsize、span.title的样式
#nav ul>li+li {…} 定义菜单二和菜单三的样式
#nav ul>li+li+li {…} 定义菜单三的样式

1-9.图片尽量放到css样式表中

为了让搜索引擎更好的抓取页面的内容，不宜在HTML中使用<img src=”" />图片代码，可以考虑在css中采取以图换字的方式，参考2-3