其他分享
首页 > 其他分享> > 009-标签属性

009-标签属性

作者:互联网

字体属性

(1)颜色设置:

通过十六进制:color:#00000ff;

通过RGB:color:rgb(0,0,255);

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

其中a表示透明度,a取值0~1,1表示完全不透明;0表示完全透明。

(2)大小设置:font-size,chrome可接受最小的为12px。

(3)加粗设置,font-weightfont-weight:lighter;最常用的是设置100-400的值,大于400是加粗,400表示正常值,小于400表示细体。

背景设置

(4)背景颜色设置:

background-color:rgb(155, 80, 200);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:rgb(155, 80, 200);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

(5)背景图像设置

设置元素的背景图像,因为这里我选用的图片与该html文件是父级关系,所以,路径引用时,选用了../

 

background-image: url("../pic1.png");
文件关系展示:

 

 代码:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:rgb(155, 80, 200);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-image: url("../pic1.png");
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

 

运行结果:

(6)背景平铺方式:

background-size: auto; ackground-size: cover;保持图片完全不变形,充满整个容器。    

 

标签:设置,color,标签,rgb,background,400,009,属性,200px
来源: https://www.cnblogs.com/fanglijiao/p/16573135.html