css样式表

3种样式表

n 内部样式表

u 在<head></head>中，声明

…根据应用，定义不同的选择器

</style>

u 在对应的html标记中，使用id=”Id选择器名” class=“类选择器名”应用样式表中的类或id选择器

n 外部样式表

u 新建扩展名为css的样式表文件

u 在css样式表文件中，可编写不同的选择器

u 在网页中，使用<link/>标记链接外部的样式表文件

u 在对应的html标记中，使用id=”Id选择器名” class=“类选择器名”应用样式表中的类或id选择器

n 行内样式表【不建议使用】

会使用CSS设置超链接样式

a:link{属性:值;}——没有点击超链接

a:hover{属性:值;}——鼠标(悬浮)指向超链接时

a:visited{属性:值;}——鼠标点击过超链接

a:active{属性:值;}——鼠标左键点击超链接， 但是左键没有松开时

会使用CSS设置鼠标外观

选择器名{cursor:值;}

会使用CSS设置背景样式

背景颜色：

选择器名{background-color:值;}

背景图片：

选择器名{background-image: url(路径);}

背景重复方式：

选择器名{background-repeat:值;}

背景定位：

选择器名{background-position:值;}

层——div标签（和表格作用一样，页面布局，比较流行的一种布局方式 div+css布局）

<div>里面放置内容</div>

显示有边框的div

div{

500px;/*宽*/

height: 300px; /*高*/

border: solid black 5px;/*边框样式*/}

说明：

solid：细边框

black边框的颜色

5px为边框的粗细

background : background-color || background-image || background-repeat || background-attachment || background-position

会使用CSS设置列表样式

选择器名{ list-style-type：值;}

选择器名{ list-style-image：值;}

选择器名{ list-style-position：值;}

选择器名{ list-style：值;}

CSS设置字体样式

1、字体大小——font-size:值px;

2、粗体——font-weight:bold;

3、斜体——font-style:italic;

4、字体类型——font-family：” ”;

5、用1个属性，4个值，设置1-4:

font:字体风格字体粗细字体大小字体类型;

CSS设置文本样式

1、字体颜色——color：值;

2、水平方向——text-align:值;（适用于图片）

3、垂直方向——vertical-align:值; （适用于图片）

4、行高——line-height:值px;

u 在html标记中，添加style=”属性:值;”

3种选择器

n 标签选择器，自动应用到网页中对应的html标记上

n 类选择器，必须在html标记中，添加class=类选择器名

n Id选择器，必须在html标记中，添加id=id选择器名

CSS的高级应用——复合选择器

1、 后代选择器

语法：

外层的标记选择器名{属性：值;}

注意：

ü 外层标记名，只能是html的标签，不能以.或#开头

ü 选择器名可以为3种选择器中的任意一种

2、 交集选择器——实际应用中不多（了解就好）

ü 由2个选择器构成，第1个必须是标签选择器，第2个必须是类或id选择器；且2个选择器名间不能有空格

ü 语法：

方式1：

html标记名.类选择器名{属性名：值;}

方式2：

html标记名#Id选择器名{属性名：值;}

3、 并集选择器——应用非常广泛，代码重用

选择器1,选择器2…..，选择器n{属性:值;}

理解CSS中的继承

第四章重点内容

3种样式表，如何定义

样式表中的3种选择器语法

ID选择器、类选择器如何在对应的html标记中应用

外部样式表文件，如何在网页中链接

后代选择器、并集选择器如何定义