1、通配符选择器
用于选中body中所有的html元素
语法:*{css样式}
2、类选择器
通过html元素所携带的class属性来查找
页面上一组元素,不同的标签可以有相同的class,
一个标签也可以有不同的class,中间使用空格隔开
语法:.class名称{css样式}
分类选择器:通过元素标签名称和类名组合来选中页面上的元素
语法:标签名.类名{css样式}
3、标签选择器
通过元素标签的名称来找页面上一组元素
语法:标签名{css样式}
4、id选择器
通过元素标签的id属性值来精确查找页面上的唯一元素,不同的标签id不能相同
语法:#id值{css样式}
5、分组选择器
通过多个选择器的组合来找页面上一组元素
语法:祖安择期1,选择器2,...{css样式}
6、派生选择器
1)子代选择器
通过父元素查找直接子元素
语法:父元素选择器>子元素选择器{CSS样式}
2)后代选择器
通过父元素查找所有子孙元素
语法:父元素选择器 子孙元素选择器{css样式}
7伪类选择器
用于查找页面上正处于某一特定状态的状态
1>:link 超链接被访问前状态
2>:visited 超链接被访问后状态
3>:hover 鼠标悬停状态
4>:active 元素被激活状态
5>:focus 输入框获取焦点时状态
8、伪元素选择器
用于匹配html元素中文本内容
1>::selection
用于匹配元素中被选中的文本,只能添加颜色背景两个样式
2>内容生成
2.1>::before
在文本前生成内容
2.2>::after
在文本后生成内容
2.3>content
具体生成的内容,文本或图片
9、选择器优先级
标签选择器:1
类型选择器(伪类、伪元素):10
id选择器:100
行内样式:1000
优先级顺序
1 !important
2 行内样式
3 ID选择器
4 类选择器
5 标签选择器
6 通配符选择器
7继承的样式
8 浏览器默认的样式
六、css样式
1、光标属性
鼠标悬停在元素上时箭头的形状
语法:cursor
取值 none 隐藏
pointer 手
help 帮助 问号
move/all-scroll 拖拽
progress 加载
crosshair 十字箭头
wait 等待
文本字体属性
2>字体大小
属性 font-size
取值 带单位的整数值(px/cm/mm/in/em)
关键字
xx-small/xx
3>字体
1)font-family
2)取值 电脑已安装字体
3)特点
字体可以写多个,中间用逗号隔开,按顺序依次加在字体,前面的不存在使用后面的
字体名称中间如果有空格,需要带引号
4>字体粗细
font-weight
取值:1,关键字:
lighter 字体变细
lighter
bold 字体加粗
bolder 更粗
normal 正常
100~900不带单位的整百数字
5>字体倾斜
font-style
取值:
italic 倾斜
normal 正常
6>文本阴影
1)属性:text-shadow
2)取值:x轴距离 y轴距离 模糊半径 阴影颜色
7>文本摆放
1)属性text-align
2)取值:
left 左
center 中
right 右
8> 行高
1)属性:line-height
9>文本修饰
1)属性:text-decor
3、围绕在元素四周的线条,所有的html元素都可以有边框
1>四周边框设置
属性:border
取值 width 边框线宽度
STYLE 边框线宽度
SOLID 实线
dotted 点状虚线
dashed 线条虚线
color 边框线颜色
2>单向边框设置
1>属性 boder ----方向
方向 top/right/bottom
left
4)单边单属性
,单边单属性设置
属性; border-方向-属性
5 边框阴影
属性;box-shadow
取值:x轴距离y轴距离 模糊半径 阴影颜色
6 溢出
属性:overflow
取值:auto 超出显示滚动条 hidden 隐藏 scroll 无论有没有超出都显示滚动条 visible显示(默认)
7 边框倒角
属性:border-radius:
取值:一个值表示四周
俩个值 坐上/右下 右上左下
三个值 左上 右上/左下 右下
四个值 左上 右上 左下 右下
4、盒模型
外边距 围绕在元素边框四周的空白距离
通过外边距可以改变元素的位置
内边距元素中内容和元素边框之间的距离
通过内边距可以改变元素的大小
元素实际所占页面空间大小
水平:左右外边距+左右边框+左右内边距+元素宽
垂直:上下外边距+上下边框+上下内边距+元素高
四周内外边距设置
属性:margin/padding
取值 px或者%的整数值
单项内外边距设置
属性:margin-方向/paddi-方向
取值 px或者%的整数值
5、列表属性
1>列表项标识
属性 list-style-type
取值 disc
circle
square
none
decimal
lower-roman
upper-roman
low-alpha
upper-alpha
2>列表项图像
属性 list-style-image: url(img/2233娘.png)
3>列表项位置
属性 list-style-position: inside
取值 inside/outside
4>简写
属性list-style:
属性:image/possition/type
最常见用法
list-style: none 去掉列表项标识