css使用-------html的外衣
一、CSS样式介绍
css全称为层叠样式表，与html相辅相成，实现网页的排版布局与样式美化
css的优点：
排版多样化
提高运行效率
简化代码
可以实现样式复用（class选择器）
二、CSS的使用方式
1.行内样式/内联样式
<标签名 style="属性：值；......." css的样式声明：由CSS属性和值组成
常用样式：
1、color：字体颜色
2、font-size：字体大小
3、background-color:
。。。。。。。。
缺点：
写法过于复杂
不适用页面过多
设置相同属性的标签需要重复设置
2. 内嵌样式
借助与style标签，在html中嵌入css样式代码，可以实现css样式与html标签之间分离。同时借助与css选择器到html中匹配元素并应用样式
<style type="text/css">
选择器{
属性：值；
属性：值；
属性：值；
属性：值；
...........
}
选择器{
}
..........
</style>
选择器：
1、写在<head>内
2、通过id选择： #id值
3、
缺点：
不适用页面过多
3.外链样式(完全分离)
创建外部样式表，后缀名为.css
导入html
导入样式：在html中head标签内导入 <link rel="stylesheet" href="css文件路径" type="text/css"/>
css文件写法：
选择器{
属性：值；
属性：值；
属性：值；
属性：值；
...........
}
选择器{
}
..........
三、样式表的特征
层叠性
多组样式作用一个
继承性
后代元素可以继承祖先元素的某些样式
注意：大部分的文本属性皆可继承
样式表的优先级
三种写法的优先级：属性离得最近的最高，（防止产生矛盾）
注意：
1、内嵌和外链优先级一致，遵循后来者居上（代码书写顺序）
2、浏览器默认样式和继承样式最低
四、css选择器
1.作用
匹配标签应用样式
2.分类
1.标签选择器：根据标签名匹配(不常用)
标签名{ 属性：值; ...... }2.id选择器
id具有唯一性
id属性值：可以由数字、字母、下划线、连字符组成，不能以数字开头
命名法：单词组合——————驼峰法、连字符、下划线
#id值{ 属性：值； ...... }3.class选择器/类选择器
属性值可以重复（实现代码样式复用)----->复用样式
class属性值可以使用多个
结合其他选择器使用： a.c2{}
.class属性值{ 属性：值； ........... }4.群组选择器（使用逗号链接）
选择器1,选择器2,选择器3...{ 属性：值； ........... }5.后代选择器(中间使用空格连接)
父选择器 子选择器 孙选择器{ 属性：值； ........... }6.子代选择器
选择器1>选择器2....{ 属性：值； ........... }7.伪类选择器
为元素的不同状态设计样式
必须结合其他选择器使用
1.超链接访问前状态 选择器:link{ } 2.超链接访问后状态 选择器:visited{ } 3.鼠标滑过时状态 选择器:hover{ } 4.鼠标点按不抬起状态（激活) 选择器:active{ } 5.焦点状态（文本框被编辑时就称为获取焦点） 选择器:focus{ }
注意：
1、写超链接需要四种状态时必须按顺序书写
五、选择器的优先级
| 选择器 | 权重 |
|---|---|
| 标签选择器 | 1 |
| （伪）类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
补充：
1、后代、子类、伪类最终权重为各选择器之和
2、群组选择器权重以自己的选择器权重为准
知识点补充:
| 块元素 | 内联元素 |
|---|---|
| 占一行 | 占一列 |
| 可以包含块元素、内联元素 | 可以包含内联元素 |
| 高度、行高、内外边距皆可控制 | |
| 宽度缺省时为容器100% |
六、标签分类及嵌套
1、块元素
2、行内元素（内联元素)
3、行内块元素
4、嵌套
块元素可以包含其他元素，除p元素
行内元素可以嵌套行内和行内块元素
七、样式属性的认识
1.元素尺寸
px像素单位
百分比（相对于父元素的百分比)
相对单位 em（手机移动端页面开发） 1em=16px 常用1.5em
微信小程序 rpx=小程序页面单位
目录