「Web前端开发」CSS入门篇（下）

本文接着介绍字体和文本样式、谷歌调试工具和拓展

三、字体和文本样式

1、字体样式

1、字体大小：属性名为font-size 取值为数字+px，在谷歌浏览器中默认字号为16

2、字体粗细：属性名为font-weight 取值有两种表达方式，用关键字表示，正常字体大小取值为normal，加粗取值为bold；纯数字表示法正常大小取值为400，加粗取值为700

3、字体样式（是否倾斜）：属性名为font-style，若不倾斜取值为normal，倾斜取值为italic

4、字体类型：属性名为font-famliy

<style>

        div{font-family:微软雅黑,黑体,sans-serif;}

</style>

该段代码意为：如果用户电脑没有安装微软雅黑，按黑体显示，如果没有安装黑体，就按任意一种无衬线字体显示；

无衬线字体：sans-serif；衬线字体：serif；等宽字体：monospace；

5、样式的层叠问题

• 给同一标签设置了相同的样式，浏览器如何渲染？
• 样式会层叠（覆盖），写在下面的生效

CSS层叠样式表：表示样式可以一层层的层叠覆盖

<style>

        p{color:red;

           color:blue;}

</style>

p标签将显示蓝色

6、font连写

取值：font：style weight size family

各属性间以空格隔开，如果要省略只能省略前两个

一个属性冒号后书写多个值——复合属性

2、文本样式

1、文本缩进：属性值为text- indent

取值为数字+px或者数字+em（1em=当前标签的font-size大小）

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

属性值为left，即左对齐；center即为居中对齐；right即为右对齐；

• text-align：center能让哪些元素水平居中
• 文本、span标签和a标签、input标签和img标签
• 如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

3、文本修饰：text-decoration

属性值：underline（下划线，常用），line-through（删除线），overline（上划线，几乎不用），none（无装饰线）

开发中用text- decoration：none去除a标签的下划线

3、行高

控制一行的上下间距，line-height

取值：数字+px或者倍数（纯数字，当前font-size倍数）

行高=上下间距+上间距+下间距

取消上下间距：line-height设置为1

如果同时设置了行高和font连写，对于覆盖问题，可以用：

font：style weight size/line-height famliy

四、谷歌调试工具

常用的是谷歌浏览用f12键检查，查看CSS代码进行查错

五、拓展：颜色常用取值

background-color 背景颜色，填充元素的背景

颜色表示方式：

1. 关键词（预定义的各颜色）：red、blue
2. RGB（红绿蓝三原色，每项取值为0～255）
3. RGBA（A表示透明度，取值为0～1，RGB同上）
4. 十六进制表示法，#开头，共六位数，将数字转换成十六进制表示，两两组合的取值范围为0～255

六、标签水平居中

margin:0 auto;

——————

CSS入门篇到这里就结束啦