CSS概念
css全称cascading style sheets,层叠式样式表,是一种用来表现HTML的文件样式的计算机语言。
作用:静态地修饰网页,并且可以配合各种脚本语言动态地对网页各元素进行格式化。
css组成 层叠式 css中贯穿始终的加载特性 层叠性 继承性
样式 定义如何显示HTML元素 文本文字 背景 盒模型 浮动 定位 其他
CSS书写位置
css根据书写位置不同分为四种书写方式:内联式、内嵌式、外联式、导入时
内联式:
嵌入式:
外联式:书写位置 在一个单独的扩展名为.css的文件中
引用方式 在HTML中的 标签内部使用标签进行引入
| 属性名 | 属性值 | 说明 |
| rel |“stylesheet” | 表示引入的外部文件与HTML之间的关系,样式表 |
| href |css文件路径| 超文本引用 |
| type | “texr/css” | 表示加载时代码按照纯文本形式的css代码加载。HTML5中可以省略不写|
导入式:
css注释语法
语法格式 : /* 中间部分为注释内容 */ vscode快捷键:ctrl+/
CSS常用属性文字三属性(颜色color、字体font-family、字号font-size)
颜色 color
rgb模式 是根据红绿蓝三原色进行混合而成的颜色模式,每一块原色取值范围时0-255,一共256个数值。
rgb(红,绿,蓝) 红色 rgb(255,0,0) 绿色 rgb(0,255,0) 蓝色 rgb(0,0,255)
黑色 rgb(0,0,0) 白色 rgb(255,255,255) 灰色 rgb(128,128,128)
十六进制模式:是rgb模式的一种简化写法,使用十六进制的数字字符去替换十进制的0-255的数字。
十六进制:逢十六进一,每位数字只能出现0-9 a-f之间的字符 例如 #008877
字体font-family
常用的中文字体:宋体 SimSun 微软雅黑Microsoft Yahei
常用的英文字体: Airal consolas
注意事项:1.font-family 可以设置多个字体名称,在实际加载时只会选择一种加载,选择的依据是按书写顺序进行,如果浏览器不支持第一个字体,则会尝试下一个,直到找到第一个支持的字体
2.浏览器中加载的字体是用户机器中自带的,如果用户的电脑中没有设置的字体则加载失败,需要查找下一个,因此。必须在最后设置一个所有机器都具备的通用字体作为后路。
3.中文字体中一般有英文可以加载的字体效果,为了避免对英文字的字体影响,建议将英文字体写在属性值最前面。
字号font-size
| 相对长度单位 | 说明 |
| px | 像素值,最常使用的单位 |
| em | 倍数,继承自祖先元素设置的字号的倍数 |
| % | 百分比,继承自祖先元素设置的字号的百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意事项1.如果HTML中不设置字号,不同的浏览器有自己默认的加载字号,比挺chrome、IE默认显示字号为16px
2.不同的浏览器也有自己最小加载显示字号,如果设置的字号低于最小字号,都以最小字号加载,0除外。chrome浏览器最小加载显示字号为8px。IE浏览器最小为以支持1px的字号。
CSS常用样式 实体化属性
| 属性名 | 属性值 | 说明 |
| width | px单位的数值 | 定义元素占有的宽度 |
| height | px单位的数值 | 定义元素占有的高度 |
| bagkground-color | 颜色名、颜色值 | 定义元素的背景颜色 |
CSS选择器
基础选择器 : 标签选择器、id选择器、类选择器、通配符选择器
高级选择器 :后代选择器、交集选择器 、并集选择器
- 标签选择器
通过标签名去选择标签元素
2.id选择器
书写方式:#id‘
选择范围:只能选中一个标签。
id命名规则:必须以字母开头,后面可以有字母、数字、下划线、横线、严格区分大小写。每个id属性值必须是唯一的,不能与其他的id同名。
注意:如果希望多个标签设置相同的样式,使用id选择器的话,必须给这多个标签 取不同的 id 名,分别选中设置。
3.类选择器
通过标签的 class 属性去选择标签。
书写方式:.class属性值
选择范围:是页面中所有 class 属性值相同的标签。
class 命名规则:必须以字母开头,后面可以有字母、数字、下划线、横线,严格 区分大小写。class 属性值可以与其他的class相同。
4.通配符选择器
通过一个特殊符号选择页面内所有的标签。
书写方式:*
选择范围:包含 标签在内的所有标签。
5.后代选择器(包含选择器)
通过标签之间存的嵌套关系(族谱关系)去选择元素,基本组成部分就是基础选择 器。
书写方式:空格表示后代,基础选择器中间使用空格分隔,空格前面的选择器选中 的标签必须是后面选择器选中标签的祖先级。
选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围,最终由最后 一个选择器确定选中的标签。
注意:后代选择器必须满足所有的后代关系才能够被选中,后代关系不一定只能是 父子关系
6.交集选择器
通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式:基础选择器进行连续书写,如果有标签选择器参与交集,必须书写在开 头。
选择范围:选择的是满足所有基础选择器需求的标签,如果一个条件不满足都不能 被选中。
比较常见的是标签与类的交集。
7.并集选择器
不同的选择器选中的元素都要设置相同的样式,多次书写相同的样式属性对代码造成浪费,可以将前面六种选择器可以进行并集书写,相当于一种简化写法。
书写方式。将多个选择器中间用逗号进行分隔,最后一个后面不能加逗号。
选择范围:是所有的单独选择器选中的标签的并集集合。
理解层叠性和继承性
继承性
如果一个标签没有设置果一些样式,他的某个祖先级曾经设置过,在浏览器中该标签也加载了这些样式,这些样式都是从祖先级继承而来,这种现象就是继承性。
注:能够被基层的样式是所有*的文字相关样式属性,*其他的属性都不能被继承。
层叠性
使用层叠性去解决冲突,多个选择器在进行对比的过程中,最终只有一个属性会成功加载,它会层叠、覆盖掉其它的属性。判断最终胜出的属性是谁,需要依赖判断优先级。
选中目标标签
• 第一步:比较多个选择器的权重,权重高的层叠权重低的。
• 基础选择器的权重:根据选择范围,范围越大权重越小,* < 标签选择器 < 类选择 器 < id 选择器。
• 高级选择器权重比较方法:依次比较组成高级选择器的 id 的个数,类的个数,标 签的个数,如果前面能够比较出大小就不再比较后面,如果前面相等就往后比较, 直到比较出大小。
• 比较顺序:( id 个数, 类的个数, 标签的个数 )
• 第二步:如果选择器权重都相同,需要比较 CSS 中代码的书写顺序,后写的层叠 先写的。
选中目标标签的祖先级
• 如果选择器选中的是祖先元素,文字的样式可以被继承。
• 第一步:比较就近原则,比较选择器选中的祖先级在 HTML 结构中距离目标标签的 远近,近的层叠远的。
• 第二步:如果选中的祖先级距离目标一样近(同一个祖先级),比较选择器权重, 权重大的层叠小的。
• 第三步:如果距离一样近,权重也相同,最后比较 CSS 中的书写顺序,后面的层 叠前面的。4
!important关键字
如果在比较选择器权重的过程中,遇到一个!important关键字,可以将某条css样式属性的权重提升到最大。
书写位置:在每个css属性的属性值后面空格加!important
• 注意: ① 就近原则中,不需要比较选择器权重,所有 important 会失效。
② important 不能提升选择器的权重,只能提升某条属性的权重到最大。