前端 HTML美化网页

使用CSS3美化的原因

用css美化页面文本,使页面漂亮、美观、吸引用户 可以更好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 标签 作用 能让某几个文字或者某个词语凸显出来

有效的传递页面信息用css美化页面文本，使页面漂亮、美观、吸引用户可以更好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验

字体样式：

font声明属性 字体属性的顺序：字体风格-字体粗细-字体大小-字体类型font-family设置字体类型宋体   楷体font-size设置字体大小 px;em;mm;cm;pc;ptfont-style设置字体风格   italic：斜体       oblique：斜体     normal：正常 font-weight设置字体粗细 bold：粗体    bolder：更粗     lighter：更细    normal：默认

如何犁地、播种和收获？

运行结果如下

文本属性：

color设置文本颜色RGBtext-align水平线对齐 

 left：左边     right：右边     center：中间      justify：俩端对齐

text-indent：设置行的缩进

line-height设置文本的行高text-decoration设置文本的装饰none：默认值    underline：下划线     overline：上划线line-through设置文本删除线vertical-align垂直方式middle（中间） ,top(顶部) ,bottom(底部)text-indent设置行的缩进

color属性

RGB

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后的两位表示蓝色的分量rgb(r, g, b)：正整数的取值为0~255

color:#A983D8;

color:#EEFF66;

color:rgb(0, 255, 255);

color:rgba(0, 0, 255, 0.5);

运行结果如下

文本阴影：

text-shadow:color  Xpx  Ypx  半径px

text-shadow:color Xpx Ypx 半径px

#jcyykt{

font-family: 楷体;

font-weight: bold;

text-shadow: #999999 5px 5px 5px;

text-align: center;

font-size: 20px;

}

运行结果如下

文本装饰：

text-decoration属性

none：默认值

underline：设置文本下划线

overline：设置文本上划线

line-through：设置文本删除线

underline：设置文本下划线

.aa{color: #640000;

text-decoration: underline;

font-weight: bolder}

如何犁地、播种和收获？

运行结果如下：

overline：设置文本上划线

.aa{color: #640000;

text-decoration: overline;

font-weight: bolder}

如何犁地、播种和收获？

运行结果如下：

line-through：设置文本删除线

.aa{color: #640000;

text-decoration: line-through;

font-weight: bolder}

运行结果如下：

CSS设置超链接：

a:link——未单击访问超链接样式a:visited——单击访问后超链接样式a:hover——鼠标悬浮其上超链接样式a:active——鼠标单击未释放超链接样式设置伪类的顺序：a:link-a:visited-a:hover-a:active

a:hover——鼠标悬浮其上超链接样式

.aa:hover{

color: #e91a5b;

}

鼠标悬浮其上效果

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

.aa:visited{

color: #d45353;

}

如何犁地、播种和收获？

单机访问后的效果

一个变色的超链接

这是一个变色的超链接

运行如下

列表样式：

list-style-type:none无标记符号text-decoration:none（超链接）list-style-type:disc实心圆，默认list-style-type:circle空心圆list-style-type:square实心正方圆list-style-type:decimal数字

list-style-type:disc------实心圆，默认

li{

list-style-type:disc

}

• 你好
• 你好
• 你好
• 你好

如下图

list-style-type:circle--------空心圆

li{

list-style-type:circle

}

• 你好
• 你好
• 你好
• 你好

如下图

list-style-type:square---------实心正方圆

li{

list-style-type:square

}

• 你好
• 你好
• 你好
• 你好

如下图

list-style-type:decimal-------数字

li{

list-style-type:decimal

}

• 你好
• 你好
• 你好
• 你好

如下图

可以去除列表前面默认的实心圆点

li{

list-style:none;

}

#可以去除列表前面默认的实心圆点

背景颜色：

background-color：(颜色)

.bj{background-color: darkgreen;

畅销书排行

如下图

背景图像：

background-image：（图片路径：）

background: url(https://p0.itc.cn/q_70/images03/20201009/57c01ef4b6e24a958336bdd0d950fb22.gif);

代码示例：

.listLeft{

font-size:18px;

color:black;

text-indent:1em;

line-height:35px;

background:#red url("图片位置" 20px 20px no-reapeat)

}

#说明

#red:背景颜色

url():背景图片

20px 20px:背景定位

no-repeat:不重复显示

背景重复方式：

background-reqeat：属性

——reqeat：沿水平和垂直俩个方向平铺

——no-reqeat：不平铺，只显示一次

——reqeat-x：只沿水平方向平铺

——reqeat-y：只沿垂直方向平铺

背景定位：

Xpos：表示水平线位置   单位：px

Ypos：表示垂直位置       单位：px

X% - Y%：使用百分比表示背景位置

X - Y方向关键词：

X水平线： left：左边     right：右边     center：中间

Y垂直：middle(顶部) ,center(中部) ,bottom(底部)

背景颜色-背景图像-背景定位-背景不重复显示

背景尺寸：

background-size

属性值描述auto 默认值,使用背景图片保持原样 percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的， 而是相对于元素宽度来计算的 cover 整个背景图片放大填充了整个元素 contain 让背景图片保持本身的宽高比例,将背景图片缩放到 宽度或者高度正好适应所定义背景

css3渐变：

linear-gradient(podition-渐变方向，color1，color2.....)

线性渐变

颜色沿一条直线过渡：从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

font-weight: bolder;

background: linear-gradient(powderblue, cyan)}

如下图

文章链接