前端CSS文字文本相关属性

#博学谷IT学习技术支持#

一、字体和文本样式

（一）字体样式

1、字体大小：font-size

   取值：数字 + px

2、字体粗细：font-weight

   取值：关键字（正常normal，加粗bold）;纯数字（正常400，加粗700）

3、字体样式：font-style

   取值：正常normal，倾斜italic

4、字体类型：font-family

   取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体类型。具体字体名称："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……字体系列名称：sans-serif、serif、monospace等……

   渲染规则：1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体。2、如果都不支持，则显示最后设置的字体系列的默认字体。

   注意点：1、如果字体名称中存在多个单词，推荐使用引号包裹；2、最后一项字体系列不需要引号包裹；3、网页开发时，尽量使用系统自带字体，保证不同用户浏览网页都可以正确显示  

5、font属性的连写问题

   顺序问题--font: style weight size family

   省略问题--只能省略前两个，如果省略了相当于设置了默认值。省略的覆盖问题，如果需要同时设置单独的属性和连写形式

（二）文本样式

1、文本缩进text-indent

   取值：数字 + px；数字 + em

   注意点：不是独占一行的元素设置text-indent无效

2、文本水平对齐方式text-align

   取值：左对齐+left；居中对齐+center；右对齐+right

   注意点：如果让文本水平居中，text-align:center给文本的父元素设置

3、文本修饰text-decoration

   取值：下划线+underline；删除线+line-through；没有效果+none

（三）行高line-height

1、取值：数字+px；倍数（当前文字大小的倍数）

2、常见应用：line-height：文字父元素的高度，让单行文本垂直居中；设置line-height：1取消上下间距，精准布局时会使用

3、和font属性的连写形式，font：style weight size/line-height family；如果需要设置单独的样式和连写

二、Chrome调试工具

（一）打开方式--右击→检查

（二）选择元素：方法一：在左侧elements中点击需要调试的元素

                方法二：点击左上角按钮后，直接在网页中点击需要调试的元素

（三）功能

1、控制样式：

A、修改属性值：直接点击属性值，直接修改

B、添加属性：在上一个属性的分号后点击一下，直接添加

C、控制样式生效：点击属性前的小框即可

2、特殊情况：

A、样式上有删除线

a、含义：样式失效

b、原因：样式被注释了或者样式被覆盖了

B、样式前有小三角形

a、含义：样式报错

b、原因：属性值后没写分号；出现中文标点；属性名或者属性值单词拼错

三、总结

    今天的学习分享就到这里了，明天继续加油！