Web前端–CSS

2.文本修饰

颜色：{color:red;}

文字大小：{font-size：18px；}

字体：{font-family：楷体；}

斜体：{font-italic；}

文字粗细：{font-weight：900；}

文本对齐：{text-align：left；}、

定义穿过文本的一条线(删除线)：{text-decoration：line-through；}

定义文本下面的一条线(下划线)：{text-decoration：underline；}

去掉超链接的下划线；{text-decoration：none；}

首行缩进：{text-indenx：2em；(缩进两个字符的大小)} em表示当前文本的字体大小。

文本文字间距：{letter-spacing：10px；} 该样式表示字符之间的距离，适用于中文文本。

​ {word-spacing：10px；} 该样式表行间距示单词与单词之间的距离，适用于英文文本。

行间距：{line-height：10px；}

3.背景修饰

背景颜色：background-color：red；

背景图片：background-image：；

背景图片优先级高于背景颜色。背景图片不会占有标签空间。

控制背景图片重复：background-repeat：no repeat；(不重复)

​ repeat-x；(x轴重复)

​ repeat-y；(y轴重复)

控制背景图片大小：background-size：400px，600px；

设置背景位置：background-position：；

4.列表修饰

去掉列表符号：{list-style-type:none；}

替换列表符号：{list-style-image：url()；}

控制列表符号的位置：{list-style-position：inside(在里面)，outside(默认在外面)；}

简写：{list-style：none url() outside；} 用于无序列表

5.表格修饰

将紧挨的两条边框重合在一起：{border-collapse：collapse；}

6.CSS伪类

基本概念：就是css为处在不同状态下的标签设置样式。

①超链接专用伪类

：link 表示普通的链接(没访问过的链接)

a :link{ text-decoration:none;<!--去掉超链接的下划线--> color:blue; }

：visited 表示访问过的链接

a :visited{ color:red; }

②多种标签可用

：hover 表示鼠标移入时的状态

a :hover{ color:red; texe-decoration:underline;<!--当鼠标移入时，变为红色且显示下划线--> }

：action 表示被点击状态

③特殊

：focus 表示鼠标焦点聚焦在可输入内容的标签上的状态

透明度：{opacity：0.5；}范围在0-1之间

若有错误，欢迎私信指正。