伪类选择器
- s1:hover 当鼠标悬停在s1上时触发css
使用技巧:
s1:hover s2{…}
s1:hover > s2{…}
s1:hover + s2{…}
s1:hover ~ s2{…}
-
s1:focus{…} 当s1获取到光标时触发
-
s1:first-child{…} 匹配s1父级里面的第一个元素s1
- 先找到s1的父级
- 找到父级里面的第一个儿子元素
- 第一个儿子元素是不是s1
-
s1:first-of-type{…} 匹配s1父级里面所有s1中的第一个
- 先找到s1的父级
- 找到父级里面的所有s1
- 找到s1中第一个
-
s1:last-child{} 匹配s1父级里面的最后一个元素s1
s1:last-of-type{} 匹配s1父级里面所有s1中的最后一个s1:nth-child(N){} 匹配s1父级里面的第N个元素s1
s1:nth-of-type(N){} 匹配s1父级里面所有s1中的第N个
伪对象选择器
- s1::before 匹配s1里面的最前面
- s1::after 匹配s1里面的最后面
字体
font-size: 字体大小
font-family: 字体家族
font-weight: 字体加粗 bold normal
font-style: 字体风格 italic normal
line-height: 行高
简写:font: weight style size/line-height family
背景
background-image: 背景图片 url(图片地址)
background-color: 背景颜色
background-repeat: 背景重复 no-repeat
background-position: 背景定位
background-size: 背景大小 设定背景的宽
background-attachment: 背景固定 fixed
简写:
background: image color position/size repeat attachment
注意:以上顺序随便颠倒,只有size必须写在position的后面
边框
基本属性:color width style
基本方向: left right top bottom
单边简写
border-方向: color width style
四边简写
border: color width style
注意:
color 和 width 都有默认值, 所以可以省略
style 不能省略
style常用值:
solid 实线
none 取消边框
double 双线
dotted 点线
dashed 虚线
圆角:
border-上下-左右-radius: % 或 px
圆角简写:
border-radius: % 或 px
注意: 如果需要最圆, 建议用100%
边框合并:
border-collapse: collapse
轮廓:
outline 常用于 none
常用于 表单
文本
- text-align: 水平对齐方式 left center right
- vertical-align: 垂直对齐方式 top middle bottom
- text-indent: 首行缩进
- text-decoration: 划线
underline 下划线
overline 上划线
line-through 删除线
none 不要线 - text-shadow: 文字阴影
- text-overflow: 文字溢出