CSS工作原理学习(1)
首先做个备注，css的注释是/* */，html的注释时<!-- -->。
另外sublime中添加了可以直接有模版的插件，sublime tmpl，可以直接选择html等选项就会新建成模版。可以直接在package control里面添加，也可以点这里。
1.为文档添加样式的三种方法：
- 行内样式：写在特定html标签的style属性里的。
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>只影响所在标签，总覆盖嵌入样式和链接样式。- 嵌入样式：嵌入的css样式放在html文档head元素中。应用范围式仅限于当前页面，页面样式会覆盖外部样式表中的样式，但是会被行内样式覆盖。
- 链接样式：用样式表，时一个扩展名为.css的文本文件。在用的时候要加一行类似代码：
<link href="styles.css" rel="stylesheet" type="text/css" />作用范围可以时整改网站。还有在样式表中链接其他样式表的方法，用@import指令。必须出现在样式表中其他样式之前，否则不会被加载。
在样式表里面的样式，不用<style>标签，否则不会被浏览器加载。
2.css规则命名惯例
选择符 声明 属性 值
- 多个声明包含在一条规则里。
p {color:red; font-size:12px; font-weight:bold;}最好把值后面的分号带上，这样在继续添加声明的时候就不会忘记了。- 多个选择符组合在一起。
h1, h2, h3 {color:blue; font-weight:bold;}特别注意选择符之间的逗号。- 多条规则应用给一个选择符。
h1, h2, h3 {color:blue; font-weight:bold;}h3 {font-style:italic;}
3.选择符
上下文选择符
descendant combinator selector，用空格分隔的标签名（分组选择符是逗号隔开的）。用于选择作为制定祖先元素后代的标签。要知道元素之间的关系，要知道文档对象模型和其对应页面中盒子嵌套关系。
article p {font-weight:bold;}
是只有article后代的p元素才会应用后面的样式。
article h1 em {color:green;}
em必须有个祖先是h1，进而还要有个祖先时article，才能应用后面的样式。
特殊的上下文选择符：
- 子选择符>：
section > h2 {font-style:italic;},标签1必须是标签2的父元素，父元素之外的其他祖先元素都不行的。- 紧邻同胞选择符＋：
h2 + p {font-variant:small-caps;}，标签2必须紧跟在其同胞标签1的后面。- 一般同胞选择符～：
h2 ~ a {color:red;}，标签2必须跟在其同胞标签1后面，也不一定是紧跟。- 通用选择符：这个按shift＋8打出来。它匹配任何元素，会导致所有元素的文本和边框都变成绿色。
p * {color:red;}，这是p所包含的所有变红色。section * a {font-size:1.3em;}，这个是section的孙子元素应用。
真是醉了，学到这里。这肯定用起来无比复杂，考虑文档层次结构什么的真是，心累。还是赶紧来看ID和类选择符吧。
类属性与ID属性
类属性：就是class属性，body 标签中包含的任何 HTML 元素都可以添 加这个属性。
- 类选择符：
.specialtext {font-style:italic;}，就是前面那个点，没有空格。- 标签带类选择符：
p.specialtext {color:red;}，指定了带有这个类的段落。p.specialtext span {font-weight:bold;}，更加精确地指定带有类的段落的span定义。- 多类选择符：
<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>，像这样添加多个类，要用空格分开的。.specialtext.featured {font-size:120%;}，没有空格，空格就是祖先/后代关系了。
ID属性：与class属性都用法一样，不过就是把点换成＃。<p id="specialtext">This is the special text.</p>，像这样。
ID也可以用在页内导航链接中。<a href="#bio">Biography</a>，href的属性值是以＃开头的，表示链接的目标在当前页面中。
- 什么时候用ID：其用途时在页面中唯一地标识一个元素。同一个页面中的每一个ID属性都必须有独一无二的值。
- 什么时候使用类：类的目的时为了标识一组具有相同特征的元素。
- 继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的css量。
属性名选择符
基于html标签的属性选择元素。img[title] {border:2px solid blue;}img[title="red flower"] {border:4px solid green;}<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
上面是属性名选择符，下面是属性值选择符。
抄书的时候，才觉得集中。就是这样。
这是今天的作业链接，就是用了各种选择符更改了一些颜色，嘿嘿。马上学了伪类之后就可以给链接做不同状态了，嘻嘻。http://7xipcz.com1.z0.glb.clouddn.com/20150501/css_2.3.html