摘自CSS权威指南(第三版)
Import 和 ref的区别?
xhtml与html的区别?
CSS的好处:它允许创作人员将网站的所有表现都放在一个位置,将所有文档指向这个位置,这不仅使网络的更新和维护相对容易,还有助于节省带宽.
CSS全局性修改借助--选择器和结构
选择器分组:
h1, h2, h3, h4 {color: purple}
声明分组:
fond: 18px Helvetica;
通配选择器:
* {color: red;}
类选择器:
须将class属性指定为一个适当的值.
<p class=”warning”>This is content</p>
* .warning {font-weight: bold;}
p.warning {font-weight: bold;}
可以组合使用通用类选择器和元素特定类选择器.
ID选择器:
<p id=”lead-para”>This paragraph will be boldfaced.</p>
*#lead-para {font-weight: bold;}
属性选择器:
h1[class] {color: silver;},选择有class属性的所有h1元素
img[alt] {border: 3px solid red;}
*[title] {font-weight: bold;}
a[href][title] {font-weigh: bold;}
部分选择器:
<p class=”urgent warning”>When handling plutonium, …...</p>
p[class~=”warning”] {font-weight: bold; }
后代选择器:
h1 em {color: gray; }
这个规则会把作为h1元素后代的em元素的文本变成灰色.
选择子元素:
h1 > strong {color: red;}
这个规则会把第一个h1下面出现的strong元素变成红色,但是第二层出现的strong元素不会受到影响.
选择相邻兄弟元素:
h1 + p {margin-top: 0;}
选择器紧接在一个h1元素后出现的所有段落,h1与p有共同的父元素.
伪类和伪元素:
静态
a:link {color: blue;} /*unvisited links are blue*/
a:visited {color: red;} /*visited links are red*/
动态伪类:
: focus
: hover
: active
可以应用到任何元素.
要点:深入了解选择器与文档结构的关系,并了解继承和层叠机制在确定如何为元素设置样式时有怎样的作用.