选择器
标签选择器
结构:标签名{ css属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
1.标签选择器选择的是一类标签,而不是单独某一个
2.标签选择器无论嵌套关系有多深,都能找到对应的标签
类选择器
结构: .类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
- 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
- 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
- 一个标签可以同时有多个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
id选择器
结构:#id属性值{ css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
- 所有标签上都有id属性
- id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
结构: *{ css属性名:属性值;}
作用:找到页面中所有的标签,设置样式注意点:
- 开发中使用极少,只会在极特殊情况下才会用到
- 可用于去除标签默认的margin和padding
字体样式
字体大小
属性名: font-size
取值:数字+px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置,否则无效
字体加粗
属性名:font-weight
取值:
关键字 | 数字 | |
---|---|---|
正常 | normal | 400 |
加粗 | bold | 700 |
不是所有字体都提供了九种粗细,因此部分取值页面中无变化,实际开发中以正常、加粗两种取值使用最多。
字体样式(是否倾斜)
属性名: font-style
取值:
- 正常(默认):normal
- 倾斜:italic
连写形式
font : style weight size family;
family:代表字体
文本样式
文本缩进
属性名:text-indent
取值:
- 数字+px
- 数字+em(1em =当前标签的font-size的大小) 如谷歌1em=16px
一般使用2em,首行缩进2个字符
文本水平对齐方式
属性名:text-align
取值:
属性值 | 效果 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
文本修饰
属性名:text-decoration
取值:
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
开发中会使用text-decoration : none;清除a标签默认的下划线
行高
属性名:line-height
取值:
- 数字+px
- 倍数(当前标签font-size的倍数)如2 就是两个字那么高
让单行文本垂直居中可以设置 line-height :文字父元素高度(文字默认居中)
网页精准布局时,会设置line-height : 1可以取消上下间距
height:40px;
line-height:40px;
/*可实现文字垂直居中*/
选择器进阶
后代选择器:空格
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法: 选择器1 选择器2 {css }
结果:
在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
注意点:
- 后代包括:儿子、孙子、重孙子
- 后代选择器中,选择器与选择器之间通过空格隔开
- 有多个空格时选中的选择器时最后一个
子代选择器
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法: 选择器1>选择器2 {css }
结果:
在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
注意点:
- 子代只包括:儿子
- 后代选择器中,选择器与选择器之间通过**>**隔开
并集选择器
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1 ,选择器2{ css }
结果:
找到选择器1和选择器2选中的标签,设置样式
注意点:
- 并集选择器中的每组选择器之间通过 **,**分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
交集选择器
作用:选中页面中同时满足多个选择器的标签
选择器语法:选择器1选择器2{ css }
结果:
(既又原则)找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
注意点:
- 交集选择器中的选择器之间是紧挨着的,没有东西分隔
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面
p.box{
color:#pink
}
在p标签中,且类为box
hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover { css }
注意点:
- 伪类选择器选中的元素的某种状态
背景相关
背景颜色
属性名:background-color
属性值:
颜色取值:关键字、rgb、十六进制
注意点:
- 背景颜色默认值是透明: rgba(0,0,0,0). transparent
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
背景图片
属性名: background-image
属性值:
background-image: url("../../lenna.jpg");
默认带url
注意点:
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
背景平铺
属性名: background-repeat
属性值:
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
背景位置
属性名:background-position
属性值:background-position:水平方向位置 垂直方向位置;
注意点:
方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直
属性连写
属性名:background
属性值:
- 单个属性值的合写,取值之间以空格隔开
书写推荐顺序(可打乱):
- background: color image repeat position
元素显示模式
块级元素
显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
代表标签:
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
行内元素
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
a、span 、b、u、i、 s、strong、ins、em、del
行内块元素
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
input、textarea、button、select
特殊情况: img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转化为块级元素 | 较多 |
display:inline-block | 转化为行内块元素 | 较多 |
display:inline | 转化为行内元素 | 极少 |
HTML嵌套规范
块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等
但是:p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
CSS特性
继承性
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
注意点:
可以通过调试工具判断样式是否可以继承
子标签已有的颜色、字体大小属性会覆盖父级继承属性:
-
a标签的color会继承失效
-
h系列标签的font-size会继承失效
层叠性
特性:
- 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
- 给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点:
- 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点:
- !important写在属性值的后面,分号的前面!
- !important不能提升继承的优先级,只要是继承优先级最低!
- 实际开发中不建议使用!important 。
权重叠加计算
场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)
第一级 | 第二级 | 第三级 | 第四级 |
---|---|---|---|
数字 | 数字 | 数字 | 数字 |
行内样式的个数 | id选择器的个数 | 类选择器的个数 | 标签选择器的个数 |
比较规则:
- 先比较第一级数字,如果比较出来了,之后的统统不看
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点: !important如果不是继承,则权重最高,天下第一!
<style>
/* (0,1,0,1) */
div #one{
color: orange;
}
/* (0,0,2,0) */
.father .son{
color: skyblue;
}
/* (0,0,1,1) */
.father p{
color: purple;
}
/* (0,0,0,2) */
div p{
color: pink;
}
</style>
只有继承就看就近原则
(谁写在下面,谁说了算!)
注意点: !important如果不是继承,则权重最高,天下第一!
<style>
/* (0,1,0,1) */
div #one{
color: orange;
}
/* (0,0,2,0) */
.father .son{
color: skyblue;
}
/* (0,0,1,1) */
.father p{
color: purple;
}
/* (0,0,0,2) */
div p{
color: pink;
}
</style>
只有继承就看就近原则