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-weight。font-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