文章目录
- 1、谷歌调试前端代码
- 2、文字属性控制
- 2.1 字体大小
- 2.2 字体粗细
- 2.3 字体倾斜
- 2.4 行高
- 2.5 字体族
- 2.6 复合属性
- 2.7 文本缩进
- 2.8 文本对齐方式
- 2.9 文本修饰线
- 2.10 文字颜色
- 3、练习
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;
}
- 数字
| 加粗 | 700 |
|---|---|
| 正常 | 400 |
- 关键字
| 加粗 | bold |
|---|---|
| 正常 | normal |
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样式
