0727CSS
认识css
css(cascading style sheet): 层叠样式表
样式表分类：
-
行内样式表
<标签名 style=“css样式代码”></标签名>
- 在标签后面生成一个style的属性
- 将样式代码整体放到引号里面
css样式代码
1、宽度 width:数值px; 0 可以不带单位
2、高度 height:数值px; 0 可以不带单位
3、文本颜色 color:颜色单词;
4、背景色:backgroud-color:颜色单词;
css样式代码的语法规则
1、css属性和css属性值之间用英文冒号(:)连接
2、每组样式代码结束之后用英文分好(;)结束最后一条样式代码可以不加
-
内部样式表
a.一般在head标签里面生成一个style的双标签(先加载样式 后加载结构，保证结构出来的时候样式直接就作用上了)
b.根据css的语法将样式写到该双标签内
css语法 = 选择器(选择元素的一种方法)+声明(css样式代码)
选择器{
css样式代码
}
注意：样式里面是不能出现除代码之外的部分，如果要出现是要注释的： /**/
选择器
标签选择器: 通过标签名去选择 标签名{}
-
外部样式表
引入外部样式步骤：
a、在该HTML文件外部新建一个后缀为.css的文件
b、在head标签里用link标签和样式文件关联起来
<link rel="stylesheet" href="需要引入的CSS文件"> rel:关联文件
stylesheet:样式表
rel=“stylesheet”:当前关联文件类型为样式表
href:css文件路径(在a标签中见到href)
多种样式表同时出现时
- 结构文件中可以出现多个行内样式表,加到谁身上谁就生效
- 结构文件中可以出现多个内部样式表,但是一般只写一个,如果有多个且使用了相同选择器去选择元素的话，后面的样式会覆盖前面的样式(就近原则)
- 结构文件中可以出现多个外部样式表,如果有多个且使用了相同选择器去选择元素的话，后面的样式会覆盖前面的样式(就近原则)
- 结构文件中可以既出现行内,又出现内部和外部样式表
权重：
a、行内样式表权重最高,样式会优先显示
b、内部和外部根据就近原则(谁靠代码下面谁优先)
基础选择器
- 标签选择器 标签名{ }
- id选择器 #id名{ }
- class(类)选择器 .class名{ }
- 通配符选择器: *{ }
起id/class名的规则：
-
不能以数字开头
-
名字尽量见名知意
-
id名尽量不要重复(虽然可以,但是规范上不可以),因为类似于人的身份证号(虽然可以,但是规范上不可以)
-
class名可以重复的,class名类似于人名
（如果结构对应的样式是一样的话，可以起一个相同的class名）
-
一个标签不能拥有多个id名,能拥有多个class名,多个名之间用空格隔开
复杂选择器
1、后代(包含)选择器： 选择器 选择器{}
a、每个选择器之间必须空格隔开
b、选择器个数不限制，但是每一个之间必须是后代关系
2、交集选择器
a、标签名.class名{} 该标签中带有该class名
b、标签名#id名{} 该标签中带有该id名
3、群组选择器：选择器,选择器{}
a、大家有共同的样式，就可以将自己对应的选择器放到这个组里面，且用,隔开
b、群组选择器里面的每一个选择器也可以是后代选择器
选择器的权重值
| 选择器 | 权重值 |
|---|---|
| 行内样式表 | 1000 |
| id选择器 | 100 |
| class选择器&&伪类选择器 | 10 |
| 标签选择器 | 1 |
| 通用选择器 | 0 |
特点：
- 后代选择器/交集选择器权重值是每一个选择器权重值相加
- 当权重值相同的时候根据就近原则
- 群组选择器权重只看和自己本身相关的选择器，其他的不管
层叠：用不同的选择器选择同一个元素，设置了相同的属性，但是设置了不一样属性值，产生冲突后根据权重规则优先显示，如果没有冲突，样式可以正常显示，将这种现象叫做层叠
补充(伪类选择器)
伪类(某种状态)选择器
超链接元素:link{} 超链接没有访问之前的状态 只针对超链接
超链接元素:visited{} 超链接访问之后的状态 只针对超链接
元素/.类名/#id名:hover{} 滑过元素的状态 针对所有元素
元素/.类名/#id名:active{} 鼠标按下(激活) 针对所有元素
注意：如果要给超链接同时添加这四种状态的话，必须按照 **爱恨法则(love hate)：:link :visited :hover :active **