1.简介
<1>.CSS介绍
CSS - Cascading Style Sheet 层叠样式表，用以控制网页外观。
CSS的出现改变了网页以往样式非常单调的局面，让网页更具个性与色彩。
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
- CSS文件中注释使用/**/.
<2>.CSS3
CSS1.0->CSS2.0->CSS2.1->CSS3.0
CSS3.0相对于CSS2.0而言，新增了很多的属性和方法，最典型的便是可以直接为文字设置阴影和为标签设置圆角。
<3>.引用方式
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，
这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
【1】.外部样式表
最理想的CSS引用方式，把CSS代码和HTML代码单独放在不同的文件中，然后在HTML文档中使用link标签来引用CSS样式表。
还可以将样式应用到多个页面中，实现更改一个CSS文件来改变整个网站的外观。
示例：
<head>
<link href="sample.css" rel ="stylesheet" type="text/css" />
</head>@import方式也可调用外部样式的CSS,但不推荐这种做法，因为import方式先加载HTML后加载CSS，而link先加载CSS后加载HTML.后加载CSS会导致网页很难看。
【2】.内部样式表
将HTML代码和CSS代码放在同一个文件中，使用style标签来定义CSS样式。
示例：
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>【3】.内联样式表
也是将HTML代码和CSS代码放在同一个文件中，但跟内部样式表不同，不是在标签对中定义，而是在标签的style属性中定义。
示例：
<body>
<p style="color:red;">
</body>2.选择器基础
<1>.基本的公共属性id和class
- id属性:标识页面元素的唯一性，如出现多个相同id则CSS和JS无法分辨要控制的元素。
- class属性:为使不同的元素具有相同的样式，即可为它们设置相同的class,可减少大量重复代码。
一个标签可以同时定义多个class.
<2>.CSS选择器
选择器就是用一种方式将你想要的那一个标签选中，后才能操作这个标签的CSS样式。
不同的将标签选中的方式就是不同的选择器。
格式：
选择器{
样式属性1:取值1;
样式属性2:取值2;
....
}【1】.元素选择器
语法：
选择符{属性:属性值; 属性:属性值;}示例:
div{width:100px;height:100px;}含义是将页面的div元素选中，然后将它的高度与宽度都设为100px.
【2】.id选择器
语法：
#id名称{属性:属性值;属性:属性值}说明：
id名称前面必须要加上前缀”#”,否则该选择器无法生效。id实现了精准定位页面中元素的功能。前面加”#”表明这是一个id.
示例:
#book{color:red;}表示id为book的元素标签属性为red.
【3】.class选择器
当元素设置了class属性时，使用选择器选中这些元素，对它们的属性进行操作。
语法：
.class名称{属性:属性值;}说明:
class名前面必须要加上前缀”.”(英文句号),否则该选择器无法生产，前面加上”.”表明这是一个class选择器。
【4】.子元素选择器
语法：
#父元素id #子元素id {属性:属性值;}父元素与子元素必须用空格隔开。
示例:
<style type="text/css">
#father1 div{color:blue;}
#father2 #p1{color:red;}
</style>第一句表示将父元素id为father1下面的所有div元素颜色设为blue.
第二名表示将父元素id为father2下面id为p1的子元素颜色设为red.
注意：只要子元素设置了样式，那么父元素的样式不会覆盖掉子元素的样式，无关在CSS的顺序。
【5】.相邻选择器
选中该元素的下一个兄弟元素，操作对象是该元素的同级元素。
语法：
#元素A+元素A的相邻兄弟元素{属性:属性值;}示例:
#lv+div{color:red;}表示选择”id为lv的元素”的相邻下一个兄弟元素div.即寻找同级中下一个div元素。如果下一个元素不是div元素则无法生效，这是为了减少id属性的设置。换行、水平线<br/>,<hr/>也是一个元素，注意这些也会影响元素的选择。
【6】.群组选择器
同时对几个选择器进行相同的操作。当需要在多个地方使用相同的设定时，群组选择器减少重复代码并便于管理。
语法：
选择器1,选择器2,选择器3,选择器4{属性:属性值;}两个选择器之间用”,”英文逗号隔开。
示例:
div,h3,p,ol{color:red;}表示将页面中div,h3,p,ol元素颜色设为red.
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
