HTML到CSS的演变；
CSS（Cascading Style Sheet）层叠样式表
层叠表优先次序：
1. 浏览器默认配置；
2.外部样式表；（外部样式表中不能包含任何的文档标记）
3.内部样式表；（位于<head>标签内部）
4.内联样式表；（位于元素内部）
规则：
selector（property：value）
Ex. p{color:red;}
CSS分类：
嵌入式CSS：卸载<style tyle="text/css">标签内；
链接式CSS：<link href="main.css" rel="StyleSheet">
引入式CSS：@import url("main.css");
CSS不区分大小写，但是如果和HTML一起工作的话，涉及Class和Id 的时候是大小敏感写的；
候选样式表 Alternate Style Sheet <link rel="altarnate Styleshet" href="main.css" title="default">
目前个人理解这用来做多种显示风格的；没有理解太懂，暂时放下，回头再看！
继承问题参考w3school css高级语法章节，子元素会继承父元素的css定义，但是可以通过自己定义来打破继承；和C/C++等编程语言的局部优先理论是一致的；
分组选择器 ：
h1,h2,h3,h4,h5,h6 {
color: green;
}有没有逗号表示的意义完全不一样；
CSS2 中开始出现了通配选择器 *
声明之间用分号间隔，虽然最后一个不是必须的，但，那是个良好的习惯；
除了指示文档元素的选择器之外，还可以用 ”类选择器“ 和 ”ID选择器”
类选择器：
*.warning{font-weight:blod;} 所有使用class="warning"都可以使用这个css样式
p.wawrning{font-weight:blod;} 只有<p class="warning" />方式使用,css才起作用
span.wawrning{font-weight:blod;} 只有<span class="warning" />使用，css才起作用
.前面的通配选择符*是可以忽略的；
多类选择器：
<p class=" urgent warning"> 和<p class="warning urgent"> 是等价的；
以下三个css都会起作用
.warning{font-weight:blod;}
.urgent{font-style:italic;}
.waring.urgent{background:sliver;}
ID选择器：
前面一个#号
*#first-para{fond-weight:blod;}
<p id="lead-para">...text...</p>
ID选择器不允许组合使用，只能出现一次，这点和类选择器区分开来；
类选择器和ID选择器很可能是大小写敏感的；建议尽量都使用小写；
属性选择器：
简单属性选择器：
h1[class]{color：sliver；} 期望有包含某个属性的元素展示效果；
所以h1的不管使用什么class 文本都是银色；
多个属性进行选择：
a[href][title]{font-weight:blod;}
使用方法：<a href="http:..www.w3.org" title="W3C Home">W3C</a>
根据具体属性值选择：
a[href="www.baidu.com"]{font-weight:blod;}只有链接是百度的才会粗体；
同样的，也可以把多个属性值链接在一起来做选择；
ID选择器和指定ID的属性选择器
h1#page-title
h1[id="page-title"]
存在微妙但是很重要的差别；
根据部分属性值选择：
p[class~="warning"]{} 和 p.warning{}是一致的；不用完整匹配；
为什么还需要“~=”这样的属性选择器呢，因为它除了类，还可以用于其他属性；
例如img[title~="Figure"]{border:1px solid gray;} 可以用来匹配图像；
还有子串匹配属性选择器
foo^="bar" 匹配以bar开头
foo$="bar" 匹配以bar结尾
foo*="bar" 匹配包含bar
特定属性选择器：
*[lang|="en"]{color:white;}
会选择lang属性等于en或者以en开头的所有元素；<h lang=“cry-en”>hello</>就不会被选中；
理解DOM结构和HTML的树形关系之后，还可以使用更为强大的选择器；
后代选择器：descendant selector
h1 em{color:gray;}只与h1中的em元素匹配；
容易被忽略的点： h1和em之间的嵌套层次多深都可以。
如果不允许多层嵌套；则
选择子元素
h1 >strong{color:red;} 只匹配直接连接附属的子元素
相邻兄弟元素
具有相同的父元素 h1+p{margin-top:0;}
与h1同父元素的，紧接在h1后面的元素；
静态伪类：
:link
:visited
类似如上的伪类，指定超链接的访问未访问效果，这两个类就是系统定义的伪类；
动态伪类：
:focus
:hover
:active
静态伪类:first-child 可以用来选择第一个子元素；
first-letter
first-line
根据语言选择：*.lan(fr){front-style:italic;} 使用 lang()伪类；
可以用:befor和:after来设置样式；
body:after{content:" The Edn.";}
扫一扫
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
