CSS随手记
html5模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是html5模板</title> </head> <body> <!-- 这里是主体代码 --> </body> </html>
1、在xhtml中基本的文档结构是非常复杂的，可以说是记不住的，以至于只能事先存好一个包含基本文档结构代码的文件，每次开发时都使用它，这带来了诸多不便。
但html5中的基本文档结构已经非常简单了，完全可以自己去手写，这不会花费你多少时间，但却大大的提高了编程的灵活性。
2、其中title标签很重要，千万不要省略，因为搜索引擎会给它很高的权重，这意味着你应该将那些你的目标用户搜索你网站时可能使用的关键词写到title标签中。
div、article和section
1、将整个html文档想象成一份报刊。
2、该报刊有房产、证券 、国际等多个板块。这每一个板块就是section。
3、在每一个板块下可以有很多文章，每一个独立的文章就是article。
4、当然，每一个独立的文章本身，也可能会分成若干板块，这些若干的板块就是section。
5、即section和article从语义上来说是可以互相嵌套的。
6、div就是一个不包含任何语义的块元素。
7、建议根据不同语义使用不同的标签，而不是一概使用div。这么做可以优化文档结构，使文档更便于控制和理解。
8、当整个文档嵌套太深以至于一团混乱的时候，你就应该思考重新设计文档结构了。
import指令
@import url(style.css);
可以在一个css文件中引用其它css文件。
但该指令必须出现在其它所有样式代码之前，否则无效。
选择器查漏补缺
获得section元素下的 所有 非子 后代 a标签 元素。
section * a {......}
如果我们想获得section元素的所有 子元素 a标签，可以使用
section > a {......}
如果我们想获得section元素的所有 后代元素 a标签，可以使用
section a {......}
如果我们想获得section元素的所有 紧邻兄弟元素 a标签，可以使用
section + a {......}
如果我们想获得section元素的所有 后面的兄弟元素 a标签，可以使用
section ~ a {......}
<p class="testOne testTwo"></p>
可以看到对于html代码来说，class属性是允许使用两个属性值，并以空格分隔。
而在css代码中可以使用
.testOne.testTwo {......}
来操作它。
可以看到.testOne和.testTwo之间是没有空格的，因为有了空格表示的就是后代元素关系；同样它们之间也没有逗号，因为有了逗号表示的就是或的关系；而现在既没有空格也没有逗号表示的才是与的关系。
<a href="#">返回顶部</a>
如果在开发中你不知道需要将a标签中的href属性设置成什么值，可以直接将它设置成#号，在写后台程序的时候，可以统一将#号替换成数据库中的url，以达到动态变换超链接导向的目的。
其它：
直接使用#号表示返回顶部。
<a href="#test">返回顶部</a> <div id="test">come here~~~</div>
点击这个超链接会跳转到页面中id为test的地方，它实现的效果是页内导航。
1、伪元素和伪类不是一个东西。伪元素使用::两个冒号，伪类使用:一个冒号。
2、伪元素表示得是页面中那些并不实际存在的元素。
3、伪元素不利于seo，它不会被搜索引擎找到。所以对于那些可能被用户搜索的重要信息，就不要放到伪元素中去了。
我们来看看::before和::after这两个伪元素吧
<p class="age">25</p>
p.age::before { content: "年龄： "; } p.age::after { content: " 岁。"; }
最后显示出来的就是:
年龄： 25 岁。
这不是我想要的样式！
在使用css的过程中总会遇到这么一种情况：我们对某个元素应用了某种样式，但是显示结果却不是我们所预想的，这是为什么呢？
我们可以将css世界的规则简化成三个基本规则：
以下三大规则按优先级先后排列。即继承>权重>位置。
1、继承
2、权重
3、位置
1、所有后代元素都会继承其祖先元素的部分规则，之所以是部分规则，举例说明下：
一个祖先div元素的规则中包括字体和边框的颜色。它的后代元素a标签会继承它的字体颜色却不会继承边框颜色，这是显而易见的。
2、一个后代元素的祖先元素有很多，当祖先元素们都对某一元素设定了规则而产生冲突的时候，会继承最靠近自己的祖先元素（可能是父元素）的规则。
这一规则延伸理解，即最靠近自己的祖先元素就是自己本身，所以自己本身的规则优先级绝对大于所继承来的规则，这个规则是三大规则中的至高规则。
换句话说，即如果一个css样式的权重值非常高，但却是继承所得，而另一css样式的权重值相对较小，但却是直接作用于该元素的。那么结果将是后者获胜。
当某一元素自己本身的规则有多个（即这些规则都不是继承所得）而产生冲突的时候，我们就需要去计算这些多个规则分别的权重值，权重值高者获胜，而计算权重值有一个简单的方法：
ICE原则
I表示id
C表示class
E表示元素element
我们根据定位到该元素的选择器中的id、class、元素的个数计算得到一个3位数。id表示百位数、class表示十位数、元素表示个位数。
举例说明：
div#test .tt {.....}
在这个css选择器中，它的权重值为：
一个id#test，一个.tt类，一个div元素。所以最后权重值为：111
div#test span.tt #link {.....}
同理，这个css的权重值为：212
以上介绍的是计算权重值的基本方法，但是有一个例外，那就是 !important。 当一个css规则中加入了 !important的时候，它的权重值就直接变成最高了。
比如：
p { color: green !important; font-size: 12px; }
在这个css规则中，由于p标签的color规则应用了!important，所以它的权重值最高，以后所有p标签的颜色都将变成绿色，即使有另外一条css规则如下:
p#test { color: red; }
虽然后者计算所得权重值大于前者，但是由于前者的color规则添加了!important，所以最后显示的颜色还是绿色，而不是红色。
行内样式 > 内嵌样式 > 链接样式
注意，只有当权重值相同的情况下，才会去判断位置。换句话说就是如果一条css规则的权重值比较大，不管它是行内样式还是内嵌样式它都能获胜。
