文章目录
文本
text-color
还是最常见的四种颜色取法
text-align
内容对齐方式
属性值
- left
- right
- center
块级元素会作用于整行
text-decoration
指文字有无修饰,默认值为none
属性值:
- underline 下划线
- overline 上划线
- line-through 贯穿线,类似于删除标签
text-transform
- 默认值none 无转换
- capitalize 每个单词首字母大写
- uppercase 全部转为大写
- lowercase 转换成小写
text-indent
文本第一行缩进
1em和当前字体大小相等
word-wrap
设置当前行超过指定容器边界时是否换行
默认值normal
break-word 换行
vertical-align
垂直对齐方式,容器中元素相对于内容的位置
line-height
行高
- normal 默认合理设置行间距
- number 设置数字,数字与字体尺寸相乘设置行间距
- length 设置固定行间距
列表
list-style-image
设置列表标记的图像(项目符号)
list-style-position
- outside 项目符号放在文本以外
- inside 项目符号在文本内
list-style-type
- none 不使用项目符号
- disc 实心圆
- circle 空心圆
- square 实心方块
list-style(复合属性)
list-style:list-style-image list-style-position list-style-type
可以更换顺序
选择器扩增
合并选择器
选择器一,选择器二,选择器三{}
选择器一二三都被选中
关系选择器(派生选择器)
后代选择器
E F{}
选择所有被E包围的F元素(空格隔开)
子代选择器
E>F
选择所有作为E元素的直接子元素F
相邻兄弟选择器
E+F
选择E相邻的下一个F元素
通用兄弟选择器
E~F
选择E后的所有兄弟F元素
属性选择器
E[att]
选择具有attr属性的E元素
E[att~=“val”]选择有att属性,且属性值列表中有一个符合val的元素
E[att~=“val”]选择属性值包含val的元素
E[att^=“val“]选择属性值以val开头的属性,val 为完整的单词或单词的一部分
E[att$=“val”]选择属性值以val结尾的属性,val 为完整的单词或单词的一部分
E[att|=“val”]值是用连字符”-"分隔的单词,并以 val 开头的E元素
E[att*=“val”]值包含 val 子字符串的E元素
伪类选择器
伪类通过冒号定义,定义了元素的状态,比如点击点击完。
可以为元素的状态改变样式,使元素看上去更动态
- E:link
在超链接未被访问的样式(特指a标签) - E:visited
在超链接已经被访问的样式(特指a标签) - E:hover
设置鼠标在元素悬停上的样式 - E:active
设置鼠标在按下去时的样式 - E:not()
- E:first-child
- E:last-child
- E:only-child
- E:empty
- E:checked
- E:nth-child()
伪对象选择器
伪对象也叫伪元素
伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性;
伪元素表示DOM外部的某种文档结构(html控制结构)
伪元素改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)
- E::before(after) 在备选元素的内容前(后)面插入内容,用来和content属性一起使用
选择器优先级
1.css选择规则的权值不同时,权值高的优先;
2.css选择规则的权值相同时,后定义的规则优先;
3.css属性后面加 !important 时,无条件绝对优先;
权重
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。