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");
文件关系展示:
![](https://img2022.cnblogs.com/blog/1178749/202208/1178749-20220810171249199-1793813313.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;保持图片完全不变形,充满整个容器。
文本属性
居中对齐:text-align: center;
加下划线:text-decoration: underline;
缩进设置(只有首行缩进): text-indent: 20px;
表格属性
表格边框:border
折叠边框:border collapse
如果是要设置表格的列边框,则在<style>编写,table与td之间使用英文逗号隔开。
<style> table,td{ border: 1px solid rgb(156, 51, 51); } table{ border-collapse: collapse; } </style>
表格高度:height,宽度:width
表格填充,将表格撑开:padding:20px:
表格颜色:背景颜色:background-color
本文来自博客园,作者:Jaoany,转载请注明原文链接:https://www.cnblogs.com/fanglijiao/p/16573135.html