一、字体样式
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; }  .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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。