<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/ .box1{ font-family: Algerian,"宋体"; } /* font-size 字体大小 单位 px rem % em px 谷歌浏览器默认字体大小16px,最小是12px rem 相对于html(根标签)的字体大小 em 等于父级的字体尺寸——相对于父级字体大小而言的 % 相对于父容器中字体的%调整 这个要知道 */ .box2{ font-size: 20px; } .box3{ font-size: 12px; } .box4{ font-size: 2rem; } #box{ font-size: 30px; } #box div{ /*font-size: 2em;*/ font-size: 50%; } /* font-weight 字体粗细 关键字 normal 默认字体 lighter 较细 bold 加粗 这个要知道 bolder 很粗 给值 只能100-900的整百数 400相当于正常的 700相当于bold */ .box5{ font-weight: bold; } .box6{ font-weight: 700; font-style: italic; } /* font-style 字体类型 normal 默认 文字正常 italic 文字斜体（属性） oblique 文字斜体 */ /* color 文字颜色 关键字 英文单词 red green 16进制（0-9 a-f） #5544aa #54a #abd456 #dddddd #ddd rgb(0-255,0-255,0-255) r red g green b blue rgba(0-255,0-255,0-255,0-1) r red g green b blue a alpha(透明度) 0 完全透明 1 完全不透明 */ .box7{ /*color: aqua;*/ color: rgb(224, 62, 69); } .box8{ /*color: #222add;*/ color: rgba(224, 62, 69,0.2); } </style> </head> <body> <div class="box1">hello 001 abc</div> <div class="box2">hello 001 abc</div> <div class="box3">hello 001 abc</div> <div class="box4">hello 001 abc</div> <div class="box5">hello 001 abc</div> <div class="box6">hello 001 abc</div> <div class="box7">hello 001 abc</div> <div class="box8">hello 001 abc</div> <div id="box"> <div>hello 001 abc</div> </div> </body> </html>