<1..认识CSS>
css(Cascading Style Sheet): 层叠样式表
样式表
1. 行内样式表(内联样式表)
- <标签名 style="css样式代码"></标签名>
2. 内部样式表
3. 外部样式表
css样式代码格式
css属性名:css属性值;css属性名:css属性值;
css样式
宽度 width:数值px; 单位必须要加,0可以不加单位
高度 height:数值px; 单位必须要加,0可以不加单位
字体颜色 color:颜色单词;
背景色 background-color:颜色单词;
内部样式表
1. 生成一个style的双标签,放到head标签里面
2. 利用选择器+声明的方式将样式都放到style标签内
css语法格式
选择器{
css样式代码---声明
css属性名:css属性值;---声明
}
<2..CSS选择器>
(1)标签选择器: 通过标签名去选择 标签名{}
(2)id选择器 #id名{}
id名: 类似于人的身份证号,唯一性,不允许重复的
(3)class(类)选择器 .class名{}
class名
类似于人的名字
- 可以重复,标签的样式一样的话,可以起相同的名字
- 一个人可以拥有多个名字的
id名和class名
1. 不要以数字打头
2. 使用英文
3. 尽量用小写字母
4. 见名知义
(4)通配选择器 *{} *:选择器到当前文件所有的标签及内容
主要的功能是去掉标签自带的样式(间距)
*{
margin:0
padding:0
}
(5)后代选择器
选择器 选择器{}
- 选择器可以混搭
- 选择器个数不限制
- 选择器可以跨代
(6)群组选择器---如果大家拥有共同的样式,可以放到一个组里面
选择器,选择器{}
- 选择器的个数不限制
- 选择器种类不限制
- 选择器可以混搭
(7)选择器的权重值
行内样式表 1000
id选择器 100
class选择器 10
标签选择器 1
通用选择器 0
- 后代选择器和交集选择器的权重值是由每个选择器权重值相加
- 权重值相同的时候根据就近原则
- 群组选择器的权重只看和自己本身相关的选择器
- 选择器权重越高,样式优先显示的
如果选择器格式错误,在控制台的样式面板中是不会显示的
如果样式被划掉,且不带感叹号,就说明是权重问题
层叠: 当用不同的选择器,选择同一个元素,设置了相同的属性,但是设置了不同的属性值,会产生冲突,根据权重优先显示样式,如果没有冲突的话,样式是可以正常显示的
<3..css语法声明的格式>
1. css属性名和css属性值之间用:隔开
2. 每条声明结束后要用;结尾
3. 最后一条声明可以不带;
<4..css代码>
1. 不能加代码之外的内容
2. 如果要加代码之外的内容需要注释 /**/
3. span 双标签 小文本 类似于b/i可以在同一行显示,span不带任何自带样式
4. div 板块标签 类似于p标签独占一行, div不带任何自带样式
<5..外部样式表>
1. 在html文件外面创建.css文件,在该文件中使用选择器+声明直接写样式,如果出现代码之外的内容需要注释 /**/
2. 在html文件的head标签内用link标签将css文件引入
<link rel="stylesheet" href="css/外部样式表.css">
rel: 当前关联的文件类型 stylesheet: 样式表
href: 路径(css路径)
<6..样式表套用>
权重(股份占比)--样式有冲突的时候才需要看权重
1. 权重越高 优先级越高 样式会优先显示
2. 同时存在多个内部样式或者同时存在多个外部样式表,根据就近原则
3. 同时存在行内和内部和外部的时候,行内样式表优先级最高,内部和外部根据就近原则