1.伪类选择器:
用来描述一个元素的特殊状态,比如第一个元素、某个元素的子元素要点击的元素
静态伪类:只能用于超链接的样式
:link 超链接点击之前
:visited 链接被访问之后
动态伪类:针对所有标签都适用的样式
:hover “悬停”鼠标放在标签上的时候
:active “激活”鼠标点击标签,但是不松手时
结构伪类选择器:
:frist-child:选择标签的第一个元素
:last-child:选择标签的最后一个元素
:nth-child():选择括号中所写的第几个元素
2.伪元素选择器:
::before 表示元素的开始插入内容
::after 表示元素的最后插入内容
before和after必须结合content使用
::input: :placeholder 表单提示词
::selection 选中时
3.文本相关样式
text-indent: 2em 文本缩进2个单位长度
text -aling:文本水平对齐方式 center(水平居中)
overflow:元素溢出时所需的行为,即当元素的内容大于块级格式化上下文时
visible:内容不能被裁减并且可能渲染到盒子的外面
hidden:内容将被裁剪以适应边距
auto:内容自适应边距,如果内容溢出,则提供滚动条
line-height:设置行高
text-decoration:设置文本上的装饰性线条的外观
none,line-through,overline
4.元素显示模式转换
行内元素无法设置宽、高
display:none 隐藏元素,脱离文本流
display:inline 转换为行内元素
display:block 转换为块元素
display:inline-block 转换为行内块元素
5.背景
background-color:背景颜色
background-image:url() 背景图片 ()中写图片地址
background-repeat:设置是否及如何重复背景图像 no-repeat 不重复
background-attachment:设置背景是否固定或者随着页面滚动
scroll:背景图片随着页面的滚动而滚动(默认)
fixed:背景图片不随着页面滚动
local:背景图片随着元素内容滚动
简写:background:fixed url() no-repeat;
6.边框
border-rdius:边框弧度
border-width:边框宽度
border-style:边框样式 solid(实线)
border-color:边框颜色
简写:border:1px solid black
7.合并相邻边框
border-collapse:collapse;
8.阴影
盒子阴影:box-shadow:20px(x偏移量)20px(y偏移量)10px(阴影模糊半径)10px(阴影扩散半径)black(阴影颜色)
文字阴影:text-shadow:5px 5px red
9.轮廓线
outline:none
outline-style:auto;
10.防拖拽
resize:none 防止文本拖拽
vvertical-aling 改变与文字的对齐方式
11.隐藏元素
display:none 脱离文本流,原来位置不再保留
visibility:hidden 元素隐藏,位置保留
opacity:不透明度
12.绝对定位
position:absolute:绝对定位,不保留原来位置
position:relative:相对定位
子绝父相 如果父亲都没有相对定位,则相对于浏览器进行定位
13.固定定位
相对于可视区域进行定位
position:fixed;
14.粘性定位
能够形成动态固定的效果
position:sticky;(必须添加top、left、right、bottom其中一个才有效)