CSS入门笔记(一)
好记性不如烂笔头！
以下内容都是本人学习CSS的一些理解和笔记
如果读者发现其中有误请务必告知。大家互相学习互相进步！
直接进入正题吧！
1.一条CSS的基本写法:
H1 {color : red}
H1: 指选择符, 选择符有很多种, 稍后会列出! 这里是指该声明对所有H1标签有效
color: 指属性, 属性也有很多种。这里指对该选择符设置color属性
red: 指属性值, 不同的属性使用不同的属性值。这里red指的是红色
这条语句整体意思是把所有H1标签的文本颜色设置为红色
注：如果有多个属性，则每条属性之间用 ";" 隔开！
2. 选择符的分类
| 选择符类型 | 模式 | 说明 |
| 通配选择符 | * | 匹配所有元素 |
| 类型选择符 | E | 匹配所有E元素 |
| 类（Class） | .info | 匹配所有属性class值等于info的元素 |
| ID | #footer | 匹配所有属性id值等于footer的元素 |
| 后代选择符 | E F | 匹配所有为E后代的F元素 |
| 子选择符 | E > F | 匹配所有为E子元素F |
| 邻近选择符 | E + F | 匹配所有E的兄弟元素F |
| 属性选择符 | E[att] | 匹配所有拥有att属性的E元素，与属性值无关 |
| 属性选择符 | E[att=val] | 匹配所有拥有att属性且值为val的E元素 |
| 属性选择符 | E[att~=val] | 匹配所有拥有att属性且val为属性值中一个完整单词的E元素 |
| 属性选择符 | E[att|=val] | 匹配拥有拥有att属性且val是其值的开始 |
| :first-child伪类 | E:first-child | 匹配所有处于其父元素中的第一个节点E元素 |
| 链接伪类 | E:link | 匹配所有未访问过的链接 |
| 链接伪类 | E:visited | 匹配所有已经访问过的链接 |
| 动态伪类 | E:active | 匹配所有激活状态中的链接 |
| 动态伪类 | E:hover | 动态伪类匹配鼠标经过时的链接 |
| 动态伪类 | E:focus | 匹配处于焦点状态的链接 |
| :language伪类 | E:lang(c) | 匹配所以语言为c的E元素 |
| :first-line伪类 | E:first-line | 匹配元素E中内容的第一行 |
| :first-letter伪类 | E:first-letter | 匹配E元素中的首字母 |
| :before和:after | E:before | 匹配在E元素前（后）插入的内容 |
我们着重看一下标记为红色的选择符, 因为各浏览器对这些选择符的支持都比较好。
其它的选择符做个了结即可。
为了更好的理解各种选择符的操作，我们先来了解一些重要的概念
HTML文档结构树
后代: 在文档树结构中一个元素的子元素，子元素的子元素，直到这个元素的最底层为止的所有元素都
属于该元素的后代
例如: 上图中所有元素皆属于html标签的后代
祖先: 在文档树结构中一个元素的父元素，父元素的父元素，直到文档的根元素为止的所有元素都属于
该元素的祖先
例如: 上图中title标签的祖先是head和html标签
子元素: 一个元素的直接后代
例如: 上图中meta标签是head标签的子元素, em标签是h1的子元素
父元素: 一个元素的直接祖先
例如: html标签是head和body标签的父元素, li标签是strong标签的父元素
邻居元素: 指和当前元素拥有同一父元素的元素
元素(标签)选择符
也有的称为类选择符, 所指的意思是一样的, 只是叫法不同！该选择符作用于HTML特定
类型的标签。直接看例子吧！
这里的h1选择符会把页面上所有h1标签的样式设置成其定义的样式，P标签亦是如此
类(class)选择符
类选择符用点号（.）来表示，使用元素的class属性值来设置该选择符！
可以给一个元素设定多个类名，不过每个类名中间要用空格隔开
直接看例子
也可以直接定义拥有多个类名的选择符！例如:
类选择符也可以和元素元素选择符搭配使用！例如:
span.class1{color: red}
该条样式只对使用class1为样式的span标签起作用。其它标签即使把样式设置为class也不起作用！例如
ID选择符
ID选择符用点号（#）来表示，使用元素的id属性值来设置该选择符！
ID选择符有很多特性跟class选择符一模一样, 就不多介绍了。这里我们列举
一些ID和class的区别。
*ID选择符使用标签的id属性来设置, 而class选择符则用class属性
来设置！如: <div id="id1"></div> <p class="class1"></p>
*类选择符可以分配给任意数量的元素标签，而ID选择符只能分配给一个元素标签
*ID对元素应用样式比类具有更高的优先级
后代选择符
后代选择符由两个或者多个简单选择符通过空格分隔而组成.他匹配第一个简单选择符对应元素的所有后代元素.
下面这条规则将会应用到是div后代的p元素上去：
div p { color:#f00; }
任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会
应用到id是myid的div中的、li元素下的、类名为info的p元素中：
div#myid li p.info { color:#f00; }
后代选择符可以使我们在不用指定id或者class的情况下选取目标元素，这有助于使文档中的标记更加简洁。
假设我们有一个如下结构的导航菜单：
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
要选取导航栏中的列表元素和超级链接，我们可以使用下面的CSS规则：
#nav li { display:inline; }#nav a { font-weight:bold; }
上面的规则不会应用到文档中的所有列表元素和链接中去。和给它们指定一个class相比，使用后代选择符
会使你的文档清洁不少。
伪类和伪元素选择符
伪类参考: http://www.w3school.com.cn/css/css_pseudo_classes.asp
为元素参考: http://www.w3school.com.cn/css/css_pseudo_elements.asp
这个就不写总结了！
组合选择符
利用几个不同的选择符对不同元素应用相同的样式时，就可以使用逗号“,”把它们分组而不用为每个选择符
重复同样的规则了！最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码:
<div id="news">
<h3>News</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则，那么下面这种写法就是错误的
div#news h3, ul {margin:0 2em;}
它会影响到div#news下的h3和ul元素，但是问题就在于它同样会影响到文档中所有ul元素，而
不仅仅是div#news下的ul元素。下面这种写法才是正确的分组选择符的写法：
div#news h3,
div#news ul {
margin:0, 2em;
}
因此，在使用分组选择符时，一定要记住选择符书写完整。
还有其它选择符都是不常用的, 即使想用各浏览器对它们的兼容性也不是很好。所以只列举这些
我们常常用到的选择器！其它的做个了结即可
小弟第一次写博文, 如果错漏还请各位看客海量, 如能指出其中之错那就更好了, 小弟我不甚感激！
浙公网安备 33010602011771号