CSS美化网页元素【快速掌握知识点】

目录

一、为什么使用CSS

二、字体样式

三、文本样式

color属性

四、排版文本段落

五、文本修饰和垂直对齐

1、文本装饰

2、垂直对齐方式

六、文本阴影

七、超链接伪类

1、语法

2、示例

3、访问时&＃xff0c;蓝色&＃xff1b;访问后&＃xff0c;紫色&＃xff1b;

八、列表样式

九、网页背景

1、背景颜色&＃xff1a;background-color

2、背景图像&＃xff1a;background-image属性

3、背景重复方式

十、渐变

一、为什么使用CSS

有效的传递页面信息&＃xff0c;使用CSS美化过的页面文本&＃xff0c;使页面漂亮、美观&＃xff0c;吸引用户&＃xff0c;可以很好的突出页面的主题内容&＃xff0c;使用户第一眼可以看到页面主要内容&＃xff0c;具有良好的用户体验。

二、字体样式

font属性&＃xff1a;字体属性的顺序&＃xff1a;字体风格→字体粗细→字体大小→字体类型

三、文本样式

color属性

RGB

十六进制方法表示颜色&＃xff1a;前两位表示红色分量&＃xff0c;中间两位表示绿色分量&＃xff0c;最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0&＃xff5e;255

RGBA

在RGB基础上增加了控制alpha透明度的参数&＃xff0c;其中这个透明通道值为0&＃xff5e;1

四、排版文本段落

五、文本修饰和垂直对齐

1、文本装饰

text-decoration属性

2、垂直对齐方式

vertical-align属性&＃xff1a;middle、top、bottom

六、文本阴影

text-shadow : color x-offset y-offset blur-radius;

七、超链接伪类

1、语法

标签名:伪类名{声明;}

2、示例

a:hover {
color:#B46210;
text-decoration:underline;
}

3、访问时&＃xff0c;蓝色&＃xff1b;访问后&＃xff0c;紫色&＃xff1b;

设置伪类的顺序&＃xff1a;a:link->a:visited->a:hover->a:active

八、列表样式

去除列表前面的小黑点

li {
list-style:none;
}

九、网页背景

1、背景颜色&＃xff1a;background-color

2、背景图像&＃xff1a;background-image属性

background-image:url(图片路径);

3、背景重复方式

background-repeat属性

repeat&＃xff1a;沿水平和垂直两个方向平铺

no-repeat&＃xff1a;不平铺&＃xff0c;即只显示一次

repeat-x&＃xff1a;只沿水平方向平铺

repeat-y&＃xff1a;只沿垂直方向平铺

十、渐变

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