【CSS】二、浏览器调试与文字样式

1、谷歌调试前端代码

Command+Option+I或者F12打开开发者模式，选中元素栏Elements，然后选择左上方箭头，点击页面任意位置定位代码和CSS样式：

如此，发现项目中font.html文件的第8行，有错误（注意“⚠️”这个符号），检查发现是忘记带单位px，改完错误后，鼠标悬停在样式代码上，发现这两个都打了✅，说明都生效了，取消勾选，可直接调试效果：

刷新浏览器，重置调试，回到代码中的效果

2、文字属性控制

常用值：

2.1 字体大小

px即像素，谷歌浏览器默认字号16px

p {
    font-size: 30px;
}

2.2 字体粗细

p {
    font-weight: 700;
}

• 数字

• 关键字

2.3 字体倾斜

em {
    font-style: italic;
}

• 正常(不倾斜)：normal
• 倾斜：italic

em标签默认倾斜：

可以使用font-style来清楚默认的倾斜效果：

2.4 行高

设置多行文本的间距，效果示例：

行高示意图：

也就是下图中，两个红色矩形的宽 + 文字的高，计算繁琐

等价一下，行高也是从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)

p {
    line-height: 2;
}

line-height，属性值：

• 数字+px
• 只写一个数字n，表示行高是当前标签的font-size的属性值的n倍

此外，要实现单行文字垂直居中的效果（如下图）：可设置行高属性值等于盒子高度属性值，注意，实现前提是单行

验证下，先看默认效果：

文字在盒子的左上角：

修改后：

2.5 字体族

font-family的属性值可以写多个，用逗号隔开：

font-family: 楷体, 微软雅黑;

下面这个写法，就是：字体从左往右找，先在你的电脑里找到哪个，就用哪个，如果都没有，就从最后写的那个sans-serif（无衬线字体）中找一个就行，这样不同的电脑，也算有个保底的样式

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

网页开发中，一般使用无衬线字体，衬线是下图红色部分：

2.6 复合属性

上面一个个设置很烦，font即复合属性，下图中，左右两种写法等价：

一般用在设置网页文字的公共样式：

font是属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开，格式为，font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

div {
	font: italic 700 30px/2 楷体; 
}

注意，字号和字体值必须写，否则font属性不生效

2.7 文本缩进

2em，即首行缩进两个字，即使字号变了，因此，推荐em，不用px

div {
	text-indent: 2em; 
}

text-indent，取值：

• 数字 + px
• 数字 + em，1em = 当前标签的字号大小

2.8 文本对齐方式

控制内容水平对齐方式，取值：

text-align: center;

ext-align本质是控制内容的对齐方式，属性要设置给内容的父级，比如设置图片居中：

效果：

2.9 文本修饰线

属性text-decoration，取值：

测试去掉a标签自带的下划线：

修改：

2.10 文字颜色

属性名color，取值：

效果：

3、练习

网页制作思路:

• 对着UI画图，从上到下，先整体再局部
• 先标签，再 CSS 美化

下面这个新闻的练习题，注意两点：

• 实现加粗的方式有多种，但如果你的这个加粗还有强调特殊的作用，那就用strong
• 前面定义了div标签选择器，后面的div样式冲突了，就改用类选择器给加CSS样式