六、css层叠样式表
网站由网页组成 网页的结构由html组成 网页的样式由css组成
1.css概念 （ Cascading Style Sheets 层叠 样式 表 ）CSS是定义HTML表现形式的描述性语言
2.如何设置标题文字颜色、对齐方式、背景色
<h3>北京</h3> 文字颜色【 嵌套<font></font>】 对齐方式【h3的align属性】 背景颜色 【table】
注意：？？？h1-h6 标签没有color属性 改变标题的颜色 要嵌套font 在font的color属性里改 <h3 align="center"><font color="blue">景</font></h3>
但是标签选择器 h1{color:red} 可以
p标签有color属性 直接改 <p style="color:#008000">ddd</p>
1）<table bgcolor="#0000FF">
<tr>
<td>
<h3 align="center"><font color="blue">景</font></h3>
</td>
</tr>
</table>
2）<h3 style="color:blue;text-align: center;background: #ccc;">解决</h3>
3.如何使多页面共用相同样式
1.行内样式
是在HTML开始标签中添加stye属性来书写CSS代码的样式表
<标签名 style="属性:属性值">被修饰的内容</标签名>
注意点：1.属性和属性值之间是 ：
2.属性值以 ； 结束
2.内嵌样式
是在<head></head>标签内 嵌套<style type="text/css"></style>标签来书写CSS代码的样式表
基本语法格式：
<head>
<style type="text/css">
标签名{ //标签名是要设置样式的标签
属性:值; //属性和值写在{}中 属性和值之间 : 连接 以 ; 结尾
属性:值 //这里是CSS代码
}
</style>
</head>
3.外部样式
是一种链接一个外部的CSS文件来书写CSS代码的样式表
引入外部样式：<link rel="stylesheet" type="text/css" href="css/style.css"/>
【链接方法】：在head标签内 使用【link标签】链接
href:用于指定链接的外部CSS文件的路径
rel:用来指定当前页面与href所链接的文件之间的关系 【stylesheet是样式表 不可省略】
【HTML页面：】
<head>
<link rel="stylesheet" type="text/css" href="文件名.css"/>
</head>
外部CSS文件:
标签名{
属性：值；
属性：值；
}
4.导入样式
css实现了结构与样式的分离
css样式的三种使用方法（根据书写位置来划分）
分类 书写位置 样式控制 适用情况
行内样式 开始标签中添加style属性 当前页面 样式较少
内嵌样式 head中嵌套style标签 当前页面 控制当前页面样式
外部样式 外部CSS文件 link链接 多个页面 多个页面样式一致
5.三种样式优先级
【符合就近原则，距离标签越近，样式表优先级越高】
!important>行内样式>内嵌样式>外部样式
小结：CSS定义和使用方法（行内样式、内嵌样式、外部样式）
6.CSS选择器 是一种选择标签的方式 不同的选择方式对应不同的选择器 根据选择元素方式不同 分成不同的选择器
基本语法格式： 选择器{属性1：值;属性2：值;}
基本选择器：
通配符选择器
标签选择器
类选择器
ID选择器
【css选择器的优先级：id选择器>类选择器>标签选择器>全局选择器】
6.1通配符选择器
通配符选择器：用于选择页面中的所有标签
语法：
*{
属性：值；
}
场景：用通配符选择器快速设置整个页面中所有文字大小为12px 字体大小：font-size
6.2标签选择器
标签选择器 是通过标签名进行选择，以便于设置样式的选择器
基本语法格式：
标签名{
属性：值；
}
h1{color:red} p{color:red}
6.3 类选择器
类选择器 也称class选择器 是对HTML标签的class属性进行选择，设置样式的选择器
【注意：1.以. 开头 2.命名规范与ID名一致】
基本语法格式：HTML标签引用 <标签1 class='类名'></标签1>
CSS中定义：
.类名{属性：值;...}
6.4 id选择器
id选择器 是对HTML标签的id属性进行选择 设置样式的选择器具有唯一性
基本语法格式：
HTML标签中添加ID属性：<标签名 id='id名'></标签名>
CSS中选择设置样式：
#id名{属性：值；...}
【注意：以#开头
1.标签中添加id属性，唯一标识
2.‘id名’遵循语法规范：
a)只能是字母、数字、下划线_、连字符-
b)只能以字母开头
c)严格区分大小写
d)见名知义
3.id选择器以 # 为前缀
】
6.5 群组选择器
群组选择器 是同时对几个选择器进行相同的操作
【注意：
1.选择器之间用 , 隔开，且不可省略
2.选择器可以是任意选择器
基本语法格式：
选择器1，选择器2，选择器3{
属性：值；
属性：值；
}
eg: h3,p,em{color:red}
6.6 后代选择器
后代选择器 选择作为某标签后代的标签
【注意点：
1.选择器之间用空格隔开，且不可省略
2.选择器可以是任意选择器
】
基本语法格式：
选择器1 选择器2{
属性：值；
属性：值；
}
小结：
群组选择器：比如 选择器1，选择器2{属性：值；}
后代选择器：比如 选择器1 选择器2{属性：值；}
【复合选择器】就是两个或多个基本选择器，通过不同的方式连接成的选择器
6.7伪类选择器
伪类选择器 不是选择一种标签，而是选择标签的一种【状态】
比如a标签有四种状态：点击前 滑过 点击时 点击后
a:link 链接访问前的初始状态
a:visited 链接访问后的状态
a:hover 鼠标滑过的状态
a:active 鼠标点击时的状态
【注意：选择器与伪类名之间 ： 隔开，且不可省略】
基本语法格式：
选择器：伪类名{
属性：值；
}
CSS使用方法
【样式优先级】
1.行内样式》内嵌样式》外部样式
2.外部样式与内嵌样式的优先级取决于位置的先后
3.判断字体在页面中的颜色 ID选择器》类选择器》标签选择器》全局选择器
4.判断群组选择器、后代选择器等复合选择器的优先级 权重 权重越大，优先级越高
5.当优先级相同时，最后声明的样式将覆盖前面的
【权重】
通配符选择器 0
标签选择器 1
类选择器 10
ID选择器 100
行内样式 1000
群组选择器的权重需分组计算 .title 10 p 1 #box 100
【优先级总结】
先看样式表，行内样式优先级最高
同一样式表中，比较选择器权重，权重高，优先级高
同一样式表中，优先级相同时，符合就近原则，后写覆盖先写
选择器 定义
语法
分类:通配符选择器* 标签选择器（标签名） 类选择器（.class） id选择器（#id）
选择器 复合选择器 （群组选择器 后代选择器）
伪类选择器
css 使用方法 ： 行内样式 内嵌样式 外部样式
选择器： 基本选择器 伪类选择器 复合选择器
</pre>
浙公网安备 33010602011771号