前言：
当前各位老铁们对“css样式美化”都比较珍视，小伙伴们都想要知道一些“css样式美化”的相关文章。那么小编同时在网摘上网罗了一些关于“css样式美化””的相关资讯，希望看官们能喜欢，兄弟们快快来了解一下吧！一、字体样式font-family：设置字体类型，可以同时声明多种字体，字体之间用英文逗号分隔开；font-size：设置字体大小，常用单位为px，还有其他如in、cm、mm、pt、pc等单位；font-style：设置字体风格，有三个属性值，分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式)；font-weight：设置字体粗细，属性值有normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)，还可以用100到900定义由细到粗的字体，400等同于normal，700等同于bold；font：设置字体多种属性，可以同时设置；
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> p{ font-family:"宋体"; font-size:14px; } .p2{ font-style:italic; } .p3{ font-weight:bold; } .p4{ font-family:"微软雅黑"; } .p5{ font-size:36px; } </style></head><body> <p class="p1">这是第一行(样式为：标签选择器p中的样式)</p> <p class="p2">这是第二行(样式为：斜体)</p> <p class="p3">这是第三行(样式为：加粗)</p> <p class="p4">这是第四行(样式为：字体变成微软雅黑)</p> <p class="p5">这是第五行(样式为：字体大小为36px)</p></body></html>效果演示图如下所示：
1.png
二、使用CSS排版网页文本color：设置文本颜色，统一采用RGB格式，也就是“红绿蓝”三原色模式；text-align：设置元素水平对齐方式，属性值有left(左对齐，默认)、right(右对齐)、center(中间对齐)、justify(两端对齐)；line-height：设置文本行高，单位也是px，也可以不加单位，按倍数表示；text-indent：设置文本的首行缩进，单位是em或者px，em是相对单位，表示长度相当于文本中字符的倍数，可以根据字体大小自适应改变；text-decoration：设置文本的装饰，属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)；vertical-align：垂直对齐，属性值有top、middle、bottom；
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">.div1{ width:500px; border:1px solid #000; padding:20px; }.p1{ color:red; } .p2{ text-align:center; } .p3{ line-height:50px; }.p4{ text-indent:2em; }.p5{ text-decoration:line-through; }.div2{ border:1px solid red; padding:20px; }![18.png]().img1{ width:70px; height:70px; vertical-align:middle; } </style></head><body> <div class="div1"> <p class="p1">这是第一行(样式为: 字体红色)</p> <p class="p2">这是第二行(样式为：居中)</p> <p class="p3">这是第三行(样式为：行高50px)</p> <p class="p4">这是第四行(样式为：缩进2em)</p> <p class="p5">这是第五行(样式为：删除线)</p> <div class="div2"> <img src="tu24.png" alt="" class="img1">这是第六行(样式为：垂直居中) </div> </div></body></html>演示效果如图所示：
2.png
三、cursor设置鼠标形状cursor属性可以用来设置鼠标指针样式；default：默认光标，箭头；pointer：超链接的指针，手型；wait：指示程序正在忙；help：指示可用的帮助；text：指示文本；crosshair：鼠标呈现十字状；四、背景样式background-color：背景颜色；background-image：背景图像；background-repeat：背景平铺，属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺)；background-position：设置图像在背景中的位置；
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">.div1{ width:500px; height:500px; background-color:#F1CCE8; //背景颜色 }.div2{ width:100%; height:100%; background-image:url(tu24.png); // 插入背景图片 background-repeat:no-repeat; //图片不平铺 background-position:center center; //背景图片垂直水平居中 }</style></head><body> <div class="div1"> <div class="div2"> </div> </div></body></html>演示效果图：
3.png
五、列表样式list-style-type：设置列表项标记的类型，属性值有none(无标记符号)、disc(实心圆，默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字)；list-style-image：使用图片替换列表的标记项；list-style-position：设置在何处防止列表标记项，属性值有inside(放在文本以内)、outside(放在文本左侧)；list-style：简写属性，可以设置所有列表属性；
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">.div1{ width:300px; height:300px; background-color:#F1CCE8; padding:20px; }.ul1{ }.ul2{ list-style-type:none; }.ul3{ list-style-image:url(person02.png); list-style-position:outside; } </style></head><body> <div class="div1"> <ul class="ul1"> <li>第一队</li> <li>第一队</li> <li>第一队</li> </ul> <ul class="ul2"> <li>第二队</li> <li>第二队</li> <li>第二队</li> </ul> <ul class="ul3"> <li>第三队</li> <li>第三队</li> <li>第三队</li> </ul> </div></body></html>演示效果图为：
4.png
标签： #css样式美化 #html设置背景图像水平平铺 #html把图片作为背景 不平铺整个 #html背景图片设置平铺 #html图片不平铺
