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.