CSS美化网页元素（字体样式及排版、超链接伪类、列表样式、背景样式、渐变）

为什么要美化网页？

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

span标签：重点要突出的字，使用span套起来

<!--设置样式-->
……
<style>
     #title{
     
     
         font-size:30px;
     }
</style>
……

<!--使用span标签重点突出Java-->
……
欢迎学习<span id="title">Java</span>
……

字体样式

常用字体属性、含义、及用法：
font-family 设置字体类型例：font-family：“康书”;
font-size 设置字体大小例：font-size：12px;
font-style 设置字体风格例：font-style：italic;
font-weight 设置字体的粗细例：font-weight:bold;
font 在一个声明中设置所有字体属性例：font:italic bold 36px “宋体”;

1.字体类型`font-family`

同时设置英文字体和中文字体时，必须将英文字体设置在中午字体之前
如果没有特殊要求通常设置为宋体，宋体是计算机中默认的字体

2.字体大小`font-size`

font-size设置字体大小，常用的单位是px(像素)。

3.字体风格`font-style`

示例	解释
font-style：`normal`	标准字体
font-style：`italic`	斜体字体
font-style：`oblique`	倾斜的字体

默认值为normal，italic和oblique显示效果非常像。

4.字体粗细`font-weight`

normal 默认值，定义标准字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100~900定义由细到粗的字体，400等同于``normal`，700等同于bold

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        body{
     
     
            font-family: "Agency FB","Adobe 楷体 Std R";
            font-style: italic;
        }
        h1{
     
     
            font-size: 50px;
        }
        p1{
     
     
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Java介绍</h1>
    <p class="p1">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，</p>
    <p>因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，</p>
    <p>允许程序员以优雅的思维方式进行复杂的编程</p>
    </body>
</html>

使用font属性一次性设置所有属性，各个属性用英文空格分开

顺序：风格——>粗细——>大小——>类型

font:italic bold 36px "宋体";

排版网页文本

常用的文本属性：
color 设置文本颜色例：color#00C
text-align 设置元素水平对齐方式例：text-align：right;
text-indent 设置首行文本的缩进例：text-indent：20px
line-height 设置文本的行高例：line-height：25px
text-decoration 设置文本的装饰例：text-decoration：underline

1.`color`文本颜色

RGB

HTML中颜色统一采用RGB，也就是通常所说的“红绿蓝”三色模式，每种颜色都由三种颜色不同比例组成。
16进制方法表示，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
当6位颜色值相邻数字两两相同时，可两两缩写成一位。

color:#FFFFFF

/*
RGB还有一种表示方法：
	R，G，B三个参数，正整数的取值为0 ~ 255，百分比的取值为0%~100%,超出范围截取最近的取值极限，三个参数都不	能取负数。 
*/
rgb(r，g，b)

RGBA

RGBA增加了控制透明度的参数，取值为0~1，0表示完全透明，1表示不透明

如：color：rgba(0,0,255,0.5)

2.`text-align`水平对齐

left 把文本排列到左边，默认值，由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 两端对齐

3.首行缩进和行高

line-height 设置行高(单行文字上下居中)

/*行高和块的高度一样可以上下居中*/
line-height：12px；

text-indent 设置首行缩进

/*单位为em和px，中文网页比较适用em，2em表示缩进两个字符*/
p{
      
      
	text-indent:2em;
}

4.`text-decoration`文本装饰

none 默认值，定义标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线

可以通过text-decoration删除< a >标签的下划线，一般情况下none和underline是常用的两个取值

5.文本图片垂直对齐

vertical-align:middle 设置文本与图片的居中对齐。

/*
垂直对齐~ 参照物， a,b
*/
img,span{
      
      
    vertical-align: middle;
}

vertical-align属性值还有top，bottom等。

6.文本阴影

文本阴影.png

语法：text-shadow：color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);

color：阴影颜色
x-offset:X轴位移，用来指定阴影水平位移量。如果是正值阴影在对象右边，反之阴影在对象左边
y-offst:Y轴位移，用来指定阴影垂直平移量。如果是正值阴影在对象底部，反之阴影在对象顶部
blur-raius:阴影模糊半径，代表阴影向外模糊的范围，这个值只能是正值，如果为0表示不模糊

text-shadow:blue 10px 10px 2px;

可以给文本指定多个阴影，指定多个阴影要用逗号分隔，效果按顺序执行，前面肯会覆盖后面的阴影，但永远不会覆盖文本本身。

超链接伪类

伪类就是不根据名称、属性、内容、而根据标签处于某种行为或状态时的特征来修饰样式。

伪类名称	含义	示例
`a:link`	单机访问前的超链接样式（点击前的样式）	a:link{color:#9EF5F9;}
`a:visited`	单机访问后的超链接样式（点击后的样式)	a:visited{color:#333;}
`a:hover`	鼠标悬浮其上的超链接样式(鼠标停在上面的样式)	a:hover{color:#FF7300}
`a:active`	单机未释放的超链接样式(点击时的样式)	a:active{color:#999;}

注意：设置伪类的顺序为：a:link——>a:visited——>a:hover——>a:active

最常用的是鼠标悬停样式。

列表样式

1.`list-style-type`设置列表项标记的类型

值	说明	语法示例
none	无标记符号	list-style-type:none
disc	实心圆，默认类型	list-style-type:disc
circle	空心圆	list-style-type:circle
square	实心正方形	list-style-type:square
decimal	数字	list-style-type:decimal

2.`list-style` 一个声明中设置所有的列表属性

顺序：list-style-type——>list-style-position——>list-style-image的顺序设置属性

不常用：

list-style-position：表示在何处放置列表标记

list-style-image：使用图片替换列表标记

背景属性

<div>标签

使用div标签对网页元素进行布局，div标签中可以嵌套各种的网页元素。
<div标签独占一行（块元素）
在使用了CSS样式以后，对它进行控制，可以制造出复杂多样的网页布局来。

/*设置网页元素的宽和高*/
.div{
    
    

	width:200px;

	height:280px;

}

1.背景颜色 `background-color`

2.背景图片 `background-image`

（1）背景图像

background-image：url(图片路径)；

（2）设置背景平铺方式background-repeat（背景默认是全部平铺的）

repeat：沿水平和垂直两个方向平铺
on-repeat：不平铺,背景图片只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        /*设置div的宽高以及边框*/
        div{
    
    
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        /*设置背景颜色*/
        .div1{
    
    
            background: lightcoral;
        }

        .div2{
    
    
            /*设置背景图片*/
            background-image: url("images/二维码.jpg");
            /*设置图片重复方式*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

（3）背景定位background-position

使用px表示，第一值是水平位置，第二个值是垂直位置

/*正向偏移，图像向下和向右移动 */
background-position: 30px 40px;
/*反向偏移，图像向上和向左移动 */
background-position: -30px -40px;

使用%表示背景图片的位置

/*垂直方向居中，水平方向偏移30%*/
background-position: 30% 50%;

还可以使用关键字（可以自由组合）

水平方向：left、center、right

垂直方向：top、center、bottom

/*右上角*/
background-position: right top;
/*左下角*/
background-position: left bottom;
/*上方水平居中*/
background-position: top;

使用背景图片的注意事项：

使用背景图片的那个元素必须有宽度和高度，不然背景拖显示不出来
背景图片在元素中是按照自己本身的大小来平铺的，和外面包裹的元素大小无关

3.背景（综合声明）

颜色–图片地址–偏移量–平铺方式

background:#C00 url(../images/123.jpg) 205px 10px no-repeat;

背景尺寸 `background-size`

auto：默认值

background-size：auto;

使用像素值设置大小

background-size：120px 60px;

使用百分比：不是相对背景尺寸大小的百分比，而是相对于元素宽高来计算的

background-size:50% 100% ;

cover:将图片填满整个div

/*
background-size:cover配合background-position:center常用来制作满屏效果
但需要一张住够大的照片，否则图片会失真
*/
background-size:cover;

contain:将图片缩放到适应所定义背景的区域

background-size:contain;

CSS3 渐变

渐变工具https://www.grabient.com/（偷个懒）

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);