2025教会你CSS3·简单易懂·美化篇

前言：

为什么要美化网页：

• 有效传递页面信息
• 美化网页，页面漂亮，吸引用户
• 凸显页面主题
• 提高用户体验

基础：

spen标签：

重点的文字用该标签括起来，无实际意义，约定俗成的

 美化：

常见文本样式

1.字体颜色：

颜色随意变换

/*颜色，任选其一*/
.one{
    color: red;
}
.two{
    color:#1e3fea;
}
.three{
    color: rgb(255, 0, 0);
}
/*最后一个是透明度，范围是0-1*/
.four{
    color: rgb(255, 0, 0,0.1);
}

 

2.字体样式：

更改字体样式

font-family: 隶书, serif;

 文本对齐方式：

/*文本对齐*/
#A1{
    /*居中*/
    /*text-align: center;*/
    /*尾对齐*/
    text-align: end;
    /*默认头对齐*/
}

缩进： 

/*行缩进*/
#A2{
    /*行缩进两位*/
    text-indent: 2em;
}

 行高：

/*设置行高，鼠标选中，那个选中框可以看出来特别高*/
#A3{
    line-height: max(100px, 100px);
}

 划线：

/*text-decoration装饰线  line（类型）、style（样式）、color（颜色）、thickness（粗细）*/
#A4{
    /*下划线*/
    /*text-decoration-line:underline;*/
    /*可以写在一块，下面表示的是，红色的删除双线*/
    text-decoration: line-through double red;
}

3.字体大小：

可以自己手动给数字

也可以xx-small，x-small，small，medium，large，x-large，xx-large，xxx-large中选择

font-size: 50px;

4.字体粗细：

可以自己手动给数字（范围是1-1000）

• 并非所有字体都支持 100-900 的权重级别
• font-weight 允许的数值范围是 100-900（以 100 递增）

font-weight: bold;

 关键字：

font-weight: normal; /* 等于 400（正常） */
font-weight: bold;   /* 等于 700 （加粗）*/
font-weight: bolder; /* 比父元素更粗 */
font-weight: lighter; /* 比父元素更细 */

 超链接伪类：

/*超链接伪类*/
/*鼠标放上去就变格式*/
#A5:hover{

    color: deeppink;
}
/*鼠标放上去点击变格式*/
#A5:active{
    color: #1e3fea;
}

背景添加图像：

background: #ff5000 url("../image/arrow.png") no-repeat;

 重复方式：

background-repeat: repeat;        /* 默认，水平 & 垂直重复 */
background-repeat: repeat-x;      /* 仅水平重复 */
background-repeat: repeat-y;      /* 仅垂直重复 */
background-repeat: no-repeat;     /* 不重复 */