第五章 CSS网页美化的元素

第五章 CSS网页美化的元素

一、span标签的使用

将想要凸显的内容使用此标签，再借CSS设置样式

二、字体样式font的使用

font-family：字体类型、

font-size：字体大小（单位px和em）

font-style：字体风格（单位px）[normal默认样式、italic倾斜、oblique倾斜]

font-weight：字体风格(粗细)[范围100-900或者normal（400默认值）、bold（700）粗体字、bolder更粗的字体、lighter更细的字体]

font：依次为风格、粗细、大小、字体类型（如果以上属性都需要设置，可以简写，只有font,但是需要按照一定的顺序）

三、文本样式

1、color：颜色

2、text-align：设置元素对齐方式（center居中、left靠左、right靠右）

3、text-indent：设置首行文本的缩进

4、line-height：行高

5、text-decoration：设置文本的装饰（none默认值、underline下划线、overline上划线、line-through设置文本删除线）

四、文本阴影的设置

text-shadow：color（颜色） x-offset（x轴） y-offset（y轴） blur-radius（阴影半径）

五、超链接伪类

样式语法： 标签名:伪类名{声明}

a:link未单击访问时的超链接样式

a:visited单击访问后超链接样式

a:hover鼠标悬停时超链接样式

a:actives鼠标单击未释放的超链接样式

六、列表样式

list-style-type后面接none（无标记符号）、disc（实心圆默认类型）、circle（空心圆）、square（实心正方形）、decimal（数字）

七、背景

1、background-color背景颜色

2、background-image url（路径）

3、background-repeat平铺

​ repent：沿水平和垂直两个方向平铺、no-repeat：不平铺，及只显示一次、repeat-x：只沿水平方向平铺、repeat-y：只沿垂直方向平铺

八、线性渐变

background:linear-gradient ( position, color1, color2,…)