CSS的三种引入方式
一. 行间式
在标签头部的style属性内
属性值满足的是css语法
属性值用key:value形式赋值 value具有单位
属性值之间用;隔开
<div style="width: 100px; height: 100px; background-color: red"></div>
二. 内联式
在style标签内(style标签一般作为head的子标签)
属性值满足的是css语法
属性值用key:value形式赋值 value具有单位
属性值之间用;隔开(一般独行分开赋值)
格式:选择器{样式块}
<style> div{ width: 200px; height: 200px; background-color: brown } </style>
三. 外联式
在外部css文件中
属性值满足的是css语法
属性值用key:value形式赋值 value具有单位
属性值之间用;隔开(一般独行分开赋值)
格式:选择器{样式块}
6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)<link rel="stylesheet" type="text/css" href="css/01.css">
四. 三种引入方式的优先级
注意: 三种方式并没有优先级
- 三种方式协同布局:
- 不重复的属性一定为唯一位置的唯一值
- 重复的属性采用覆盖赋值,保留最后位置的属性值
- 行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
- !important会影响优先级
CSS 选择器的优先级 ***
一. 组合选择器
- 特性 : 每一个选择器位均可以为任意合法选择器或选择器组合
1. 群组选择器
- 一次性控制多个选择器
- 选择器之间以 , 隔开
div, span, .red, #div {
color: red;
}2. 子代与后代选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
<div class="d" id="dd"></div>
div.d#dd {
color: red;
}
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
color: red;
}5. 属性选择器
属性选择器权重 == class选择器权重
- [attr]：匹配拥有attr属性的标签
- [attr=val]：匹配拥有attr属性，属性值为val的标签
- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
- [attr*=val]：匹配拥有attr属性，属性值包含val的标签
属性以什么开头: ^=
属性以什么结尾: $=
属性模糊匹配: *= 二. 组合选择器优先级
- 同目录结构下
1.子代与后代优先级相同
body > div == body div
2.相邻与兄弟优先级相同
div + span == div ~ span
3.最终样式采用逻辑后的样式值 - 不同目录结构下
注:控制的是同一目标,才具有可比性
1.根据选择器权值进行比较
2.权值为标签权重之和
3.权重: *:1 div:10 class:100 id:1000 !important:10000
4.权值比较时,关心的是值大小,不关心位置与具体选择器名
5.id永远比class大,class永远比标签大
权重对应关系
| 选择器 | 权重 |
|---|---|
| 通配 | 1 |
| 标签 | 10 |
| 类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
常用样式（一点点...只是小部分）
1. 字体样式
font-family：字体族科，多值⽤于备用，以,隔开
font-family: "STSong", "Arial";font-size：字体大小
font-style： 字体风格 normal | italic | oblique
font-weight：字体重量 normal | bold | lighter | 100~900
line-height：行高
font：字重 风格 大小/行高 字族
2、文本样式
- color：文本颜色
- text-align：横向排列 left 居左 | center 居中 | right 居右
- vertical-align：纵向排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐 - text-indent：字体缩减
- text-decoration：字划线 underline,line-through,overline,none
- letter-spacing：字间距
- word-spacing：词间距
- word-break：自动换行 normal默认换行规则 | break-all 允许在单词内换行
3. 背景样式
background-color：颜色
background-image：图片
background-image: url(bg.png);background-repeat：重复
repeat 重复 | no-repeat 不重复 | repeat-x 水平重复| repeat-y 垂直重复background-position：定位 top | bottom | left | right | center
设置一个值,第二个值默认为center
第一个值控制水平位置,第二个值控制垂直位置background-attachment：滚动模式 scroll | fixed