Web前端篇：CSS常用格式化排版 - 好文

一、字体的属性
设置字体属性：
body{font-family:"Microsoft Yahei"} body{font-family:"Microsoft
Yahei","宋体","黑体"} #备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。
* 字体大小：
最常用的像素单位：px、em、rem，这里咱们先介绍一种单位，px。
px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

* 字体颜色：
颜色表示方法在css中有三种方式：
英文单词表示法：red/green/blue
rgb表示法
十六进制表示法

* 字体样式font-style
网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。

normal正常,italic斜体,oblique斜体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> p{ font-style:italic; } </style> </head> <body>
<p>你好</p> </body> </html>
* 字体粗细
font-weight

* 文本属性：
text-decoration

* 文本缩进
我们通常写文章的时候，首字母要空两格。那么我们需要使用
text-indent,它的属性值是像素(px、em、rem)单位。

*
行间距

*
line-height:数值px/em

*
纵纹字间距/字母间距

letter-spacing:数值px;
word-spacing:数值px;

* 文本对齐
text-align

二、px,em,rem

*

px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

*
它是相对于当前对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸

*
rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> *{ padding:0; margin:0; } html{ font-size:20px }
.box{ font-size:12px; width:20rem; height:20rem; background-color: red; }
</style> </head> <body> <div class="box"></div> </body> </html>

热门工具换一换