学习CSS（1）选择器+定位

学习了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)类选择器

1. 普通情况

<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并清理它
• 对容器进行浮动，这样下一个元素就会收到影响，解决对布局中所有进行浮动，最后使用适当有意义元素对浮动清理

---

文字有些多，还有许多不足的地方，希望后期能做出一个相对应实例练习！ ^ ^