学习了HTML之后就是CSS的学习啦！
有做的不好的地方请多指教 ^ ^ !
1.CSS简述
- Cascading Style Sheets 层叠样式表
- 通常存储在css文件中
2.层叠次序（优先级）
- 内联样式（1000）
- id选择器（0100）
- class选择器（0010）
- 标记选择器（0001）
- 继承的优先级最低
- ！important 优先级最高
3.语法
- 构成：选择器，一条或多条声明
- 属性与值用冒号隔开，用花括号包围，用分号结束
- 若属性为多个单词，需要用引号隔开
4.选择器
(1)派生选择器
通过上下文的关系来确定某个标签的关系
li a{
color:red;
}
(2)id选择器
- 使用前要加“#”
<p id = "a">段落</p>
# a{
color:red;
}
- id属性只能在每个HTML文档中出现一次
- id选择器作为派生选择器可以多次被使用，id也可以单独发挥作用
(3)元素选择器
也成为标记选择器
p{
margin-left:10px;
}
(4)类选择器
- 普通情况
<p class="one">段落</p>
*.one{
color:red;
}
或
.one{
color:red;
}
-
多类选择器
class中可能包含词列表
html:
<p class ="is me">是我</p>
css:
.is .me{
color:red
}
-
类选择器与Id选择器
与类不同，id仅会使用一次
id选择器不能使用词列表
id能包含更多含义
(5)属性选择器
- 根据元素的属性以及属性值来选择元素（在XML文档中十分有用）
*[title]{
color:black;
}
*[href][title]{
color:red;
}
(6)后代选择器
h1 a{
color:red;
}
- 左边的选择器包含两个或多个，用空格隔开
- 解释：“作为h1元素后代的任何a元素”或“包含a的所有h1会把样式应用到该a标签”
(7)子代选择器
选择作为某个元素子元素的元素
h1 > strong{ //h1和strong之间的空格任意，可以没有空格
color:red;
}
(8)相邻兄弟选择器
选择器紧接在前h1后的p，而且它们拥有同一个父级
h1 + p{
margin:10px;
}
(9)伪类选择器
用于添加特殊的效果
比如，链接：
a:link{ color:#cccddff;} //未访问时链接的样式
a:visited{ color:#ff00090;} //已访问时链接的样式
a:hover{ color:#ff00ff;} //鼠标停止在链接上的样式
a:active{ color:#cc1100;} //被激活的链接添加样式
//a:hover 必置于a:link 和 a:visited 之后；a:active必须置于a:hover之后
其它：
:focus 拥有键盘输入焦点的元素添加样式
:first-child 像元素的第一个子元素添加样式
:lang 像带有指定lang属性的元素添加样式
(10)伪元素选择器
:first-letter 文本的第一个字母
:first-line 文本首行添加样式
:before 元素之前添加内容
:after 元素之后添加内容
(11)选择器分组
- 被分组的选择器可以拥有相同的属性
- 既可以对选择器分组，也可以对声明进行分组
5.定位
(1)框的重要性
块级元素显示的是一块内容“块框”
行内元素显示的是“行内框”
使用display能改变生成框的类型
(2)相对定位
- 通过设置垂直或水平位置，让它相对于起点（原始位置）浮动
- 无论是否移动，元素仍然占据原来的空间，移动元素后会遮挡其它框
(3)绝对定位
元素框在文档流中完全删除，原来的元素在文档流中占用的空间被关闭，且定位后会产生块级框。
(4)它们的区别
- 绝对定位元素的位置相对于最近的已定位元素，如果没有就相对于最初的块级框
- 绝对定位于文档流无关，可以覆盖页面上的其他元素，通过z-index来控制元素上下的次序。而相对定位还处于原文档流当中。
(5)浮动
- 浮动框不在文档的普通流中
- 浮动框会受包含框的大小影响，浮动元素高度不同会受到影响（卡住）
- 浮动框可以使文本围绕图像，阻止行框围绕浮动框需要对该框使用clear属性，clear值可以是left，right，both或none（表示框的哪边不应该挨着浮动）
- 为了让浮动的元素被包围，需要用clear在包围元素中，所以添加一个新的空div并清理它
- 对容器进行浮动，这样下一个元素就会收到影响，解决对布局中所有进行浮动，最后使用适当有意义元素对浮动清理
文字有些多，还有许多不足的地方，希望后期能做出一个相对应实例练习！ ^ ^
![导航栏（javascript和jQuery）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)