字体粗细属性名 font-weight作用控制字体的粗细。常用值—关键词:lighter 细normal 正常bold 粗bolder 很粗 多数字体不支持—数值6. 100~1000 且无单位数值越大字体越粗 或一样粗具体得看字体设计时的精确程度。7. 100~300 等同于 lighter 400~500 等同于 normal 600 及以上等同于bold 。语法div { font-weight: bold; } div { font-weight: 600; }字体复合写法属性名 font 可以把上述字体样式合并成一个属性。作用将上述所有字体相关的属性复合在一起编写。编写规则字体大小、字体族必须都写上。字体族必须是最后一位、字体大小必须是倒数第二位。各个属性间用空格隔开。实际开发中更推荐复合写法但这也不是绝对的比如只想设置字体大小那就直接用 font-size 属性。CSS文本属性文本颜色属性名 color作用控制文字的颜色。可选值颜色名rgb 或 rgbaHEX 或 HEXA 十六进制HSL 或 HSLA—开发中常用的是 rgb/rgba 或 HEX/HEXA 十六进制。举例div { color: rgb(112,45,78); }文本间距字母间距 letter-spacing单词间距 word-spacing 通过空格识别词属性值为像素 px 正值让间距增大负值让间距缩小。文本修饰属性名 text-decoration作用控制文本的各种装饰线。可选值none 无装饰线常用underline 下划线常用overline 上划线line-through 删除线可搭配如下值使用dotted 虚线wavy 波浪线也可以指定颜色举例a { text-decoration: none; }文本缩进属性名 text-indent 。作用控制文本首字母的缩进。属性值 css 中的长度单位例如 px举例div { text-indent:40px; }—后面我们会学习 css 中一些新的长度单位目前我们只知道像素( px )。文本对齐_水平属性名 text-align 。作用控制文本的水平对齐方式。常用值left 左对齐默认值right 右对齐center 居中对齐举例div { text-align: center; }细说 font-size由于字体设计原因文字最终呈现的大小并不一定与 font-size 的值一致可能大也可能小。—例如 font-size 设为 40px 最终呈现的文字可能比 40px 大也可能比 40px小。通常情况下文字相对字体设计框并不是垂直居中的通常都靠下 一些。行高属性名 line-height作用控制一行文字的高度。可选值normal 由浏览器根据文字大小决定的一个默认值。像素( px )。数字参考自身 font-size 的倍数很常用。百分比参考自身 font-size 的百分比。备注由于字体设计原因文字在一行中并不是绝对垂直居中若一行中都是文字不会太影响观感。举例div { line-height: 60px; line-height: 1.5; line-height: 150%; }行高注意事项line-height 过小会怎样—— 文字产生重叠且最小值是 0 不能为负数。line-height 是可以继承的且为了能更好的呈现文字最好写数值。line-height 和 height 是什么关系—设置了 height 那么高度就是 height 的值。—不设置 height 的时候会根据 line-height 计算高度。应用场景对于多行文字控制行与行之间的距离。对于单行文字让 height 等于 line-height 可以实现文字垂直居中。备注由于字体设计原因靠上述办法实现的居中并不是绝对的垂直居中但如果一行中都是文字不会太影响观感。文本对齐_垂直顶部无需任何属性在垂直方向上默认就是顶部对齐。居中对于单行文字让 height line-height 即可。—问题多行文字垂直居中怎么办—— 后面我们用定位去做。底部对于单行文字目前一个临时的方式让 line-height ( height × 2 ) - font-size - x 。备注 x 是根据字体族动态决定的一个值。—问题垂直方向上的底部对齐更好的解决办法是什么—— 后面我们用定位去做。vertical-align属性名 vertical-align 。作用用于指定同一行元素之间或 表格单元格 内文字的 垂直对齐方式。常用值baseline 默认值使元素的基线与父元素的基线对齐。top 使元素的顶部与其所在行的顶部对齐。middle 使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。bottom 使元素的底部与其所在行的底部对齐。特别注意 vertical-align 不能控制块元素。作业!DOCTYPE html html langzh-CN head meta charsetUTF-8 title欢度国庆/title style * { text-align: center; } .box1 { font-size: 16px; font-family: Microsoft YaHei; font-weight: bold; font-style: normal; line-height: 26px; } .box2 { font: bold normal 16px Microsoft YaHei; line-height: 26px; } .c1 { color: red; } .c2 { color: rgba(180, 0, 0, 0.6); } .c3 { color: #cc220080; } .c4 { color: hsla(8,100%,45%, 0.7); } .h1 { text-decoration: none; color: black; } .h1:hover { color: red; text-decoration: underline; } img { vertical-align: middle; width: 50px; height: 20px; } /style /head body h3 classtitle欢度国庆/h3 div classbox1 p classc1锦绣中华盛世华诞举国同庆共祝祖国繁荣昌盛。/p /div div classbox2 p classc2 山河万里红旗飘扬 a href# classh1了解国庆由来/a 我们共同祝福伟大祖国。 /p /div p classc3生在红旗下长在春风里目光所至皆为华夏。/p p classc4愿山河无恙国泰民安岁岁年年家国永安。/p p classc5 stylecolor: red; img src红旗.jpg alt国旗 红旗图片与文字垂直居中对齐 /p /body /html