目录
一、css基础
1.选择器
选择器的作用:选择页面对应的标签,方便后续设置样式
1.1标签选择器
标签选择器:通过标签名,找到页面中所有这类标签,设置样式
1.2类选择器
类选择器:标签上的class属性,class的属性值叫类名
语法:“.”+类名
注意点:
-
类名可以由数字、字母、下划线和中划线组成,但不能以数字或中划线开头
-
一个标签可以有多个类名,类名之间以空格隔开
-
类名可以重复,一个类选择器可以同时选择多个标签
1.3id选择器
id选择器:#id属性值
注意点:
- 所有标签上都有id属性
- id属性值类似于身份证号码,在一个页面中是唯一的,不可重复
- 一个标签上只能有一个id属性值
- 一个id选择器只能选择一个标签
1.4后代选择器
后代选择器:根据html标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法:父选择器 父选择器的后代标签 { css属性:属性值;}
后代包括:儿子、孙子、重孙子等等
1.5子代选择器
子代选择器:>
父元素子代中满足条件的元素
语法:选择器1>选择器2{ css}
在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置标签
子代只包括:儿子
选择器之间用>隔开
1.6并集选择器
并集选择器:选择器1,选择器2,… ,选择器n
每组选择器可以是基础选择器也可以是复合选择器
并集选择器一般一行写一个
1.7交集选择器
交集选择器:选择器1选择器2{css}
选中页面中 同时满足 多个选择器的同一个标签
选择器之间是紧挨着的
标签选择器必须写在最前面
例:
p.head.title{}
1.8hover伪类选择器
伪类选择器:设置鼠标悬停效果
选择器语法:选择器:hover {css}
伪类选择器选中的是元素的某种状态
伪元素的伪类选择器用法:
a:hover::after{}
1.9通配符选择器
通配符选择器:*{}
找到页面所有的标签
开发中使用极少,只会在特殊情况下才会用到
小页面用于去除标签默认的margin和padding
1.10结构伪类选择器
1.10.1查找单个
作用:根据元素在html中的结构关系查找元素
优势:减少对于HTML中类的依赖,有利于保持代码整洁
场景:常用于查找某父级选择器中的子元素
选择器 | 意义 |
---|---|
E:first-child{} | 匹配父元素中第一个子元素,并且是E元素 |
E:last-child{} | 匹配父元素中最后一个子元素,并且是E元素 |
E:nth-child{} | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child{} | 匹配父元素中倒数第n个子元素,并且是E元素 |
1.10.2查找多个
E:nth-child{}
n的注意点:
-
n为整数0,1,2,3…
-
通过n可以组成常见公式
功能 | 公式 |
---|---|
偶数 | 2n,even |
奇数 | 2n+1,2n-1,odd |
找到前5个 | -n+5 |
找到第5个之后的 | n+5 |
1.10.3 根据类型查找
E:nth-of-type(n){ }
只在父元素的同类型(E)子元素范围中,匹配第n个
:nth-child->直接在所有还在中数个数
:nth-of-type->先通过该类型找到符合条件的一堆子元素,然后在这一堆子元素中数个数
1.11 类与id的区别
- class类名相当于姓名,可以重复,一个标签可以同时有多个class类名
- id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值
实际开发中:
- 类选择器用的最多
- id一般配合js使用,除非特殊情况,否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取(即将一些公共的代码抽取到一个公共的类中)
1.11链接伪类选择器
场景:常用于选中超链接的不同状态
选择器语法:
语法 | 功能 |
---|---|
a:link{} | 选中a链接 未访问过 的状态 |
a:visited{} | 选中a链接 访问之后 的状态 |
a:hover{} | 选中 鼠标悬停 的状态 |
a:active{} | 选中 鼠标按下 的状态 |
注意点:
如果需要同时实现以上4种伪类状态效果,需要按照LVHA顺序书写
1.12焦点伪类选择器
场景:用于选中元素获取焦点时状态,常用于表单控件
选择器语法:
input:focus {
background-co`在这里插入代码片`lor: ;
}
效果:表单控件获取焦点时默认会显示外部轮廓线
1.13属性选择器
场景:通过元素上的HTML属性来选择元素,常用于选择input标签
选择器 | 功能 |
---|---|
E:[attr] | 选择具有attr属性的E元素 |
E[attr=“val”] | 选择具有attr属性并且属性值等于val的E元素 |
2.字体文本相关样式
2.1字体样式
2.1.1字体大小font-size
- 需要设置单位px,否则无效
- 谷歌默认文字大小是16px
2.1.2字体粗细font-weight
取值:
效果 | 元素 | 元素 |
---|---|---|
正常 | normal | 400px |
加粗 | bold | 700px |
- 不是所有字体都提供了9种粗细,因此部分取值页面中无变化
- 实际开发中以正常、加粗两种取值使用最多;
2.1.3字体样式font-style
取值:
效果 | 元素 |
---|---|
正常(默认) | normal |
倾斜 | italic |
2.1.4常见字体系列
2.1.4.1 无衬线字体(sans-serif)
- 文字笔画粗细均匀,并且首尾无装饰
- 网页中大多采用无衬线字体
- 常见系列字体:黑体、Arial
2.1.4.2 衬线字体(serif)
- 文字笔画粗细不匀,并且首尾有笔锋装饰
- 报刊书籍中应用广泛
- 宋体、Times New Roman
2.1.4.3 等宽字体(monospace)
高与宽相等的字体
2.1.5字体系列font-family
常见取值:具体字体1,具体字体2,具体字体3,,,,字体系列
渲染规则:从左往右按照顺序查找,如果电脑中未安装该字体,则会显示下一个字体
- 如果都不支持,则显示操作系统的默认字体
- 字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 开发时,尽量使用系体常见自带字体
2.1.6字体font相关属性的连写
连写font:style weight size family;
SWSF
- 只能省略前两个,如果省略了相当于设置了默认值
- 若同时设置了单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写里面
若写在前面,会被后面连写中的默认样式覆盖
2.1.7样式的层叠问题
如果给同一个标签设置了相同样式,此时样式会层叠(覆盖),写在最下面的会生效
2.2文本样式
2.2.1文本缩进
文本缩进text-indent
单位px,em
1em = 1个font-size
2.2.2文本水平对齐方式
水平方向对齐:
text-align:center
2.2.3文本修饰
text-decoration
元素 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线 |
overline | 上划线(几乎不用) |
none | 无线(常用) |
2.3水平居中方法总结
2.3.1text-align:center
能让哪些元素水平居中
- 文本
- span标签,a标签
- Input标签,img标签
- div 、p、h(大盒子)水平居中
2.3.2margin:0 auto
可以通过margin:0 auto;实现
注意点:
- 直接给当前元素本身设置就可以了
- margin:0 auto一般针对于有固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
2.4行高
控制行间距
line-height
取值:数字+px或倍数(当前标签font-size的倍数)
- 让单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时,会设置line-he