前端学习：CSS排版

Posted 2022-10-17 jevious

进击のpython

---

前端学习——CSS排版

---

本节主要介绍网页排版中主要格式化元素属性

帮助开发者把css技术与网页排版紧密联系到一起，来更好的实现网页设计效果

---

字体属性

字体

在日常工作中，我们会用到word来编写内容，比如可以对我们需要设置的内容设置字体、字号、颜色等设置

那么我们在网页中使用css样式时，同样也能做相关的设置

那我们可以试着为网页中的文字设置字体为微软雅黑

bodyfont-family:'微软雅黑'

这里要注意不要设置不常用的字体，比如你给我来个’菲律宾体’

因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体

换句话说，用户能不能看到你设置的字体样式完全取决于用户本地电脑是否安装你设置的字体

所以基本上网页都喜欢设置微软雅黑，因为这种字体既美观又可以在客户端完全的显示出来

备选字体

那如果真的就是没有微软雅黑呢？那就需要备选字体！

bodyfont-family:'Microsoft Yahei','宋体','黑体'

备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的

如果没有微软雅黑，再去找宋体，再去找黑体

字体大小

可以为网页中的文本设置字体大小，那么一般浏览器的字体大小默认为为16px

最常用的像素单位是：px，em，rem

<p style="font-size: 20px"></p> 设置字体20px

px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子

剩下那两个，一会说

字体颜色

颜色分为三原色：红、绿、蓝，三原色之间的不同混合就可以呈现出不同的颜色

比如红色+绿色 = 黄色

而颜色的表示方式在CSS中有三种方式：

<p style="color: red">英文单词表示法，比如red、green、blue</p>

英文单词表示法，比如red、green、blue

<p style="color: rgb(255,0,0)">rgb表示法</p>

rgb表示法

<p style="color: #ff0000">十六进制表示法</p>

十六进制表示法

对于rgb表示法和十六进制表示法，我们可以通过编辑器中辅助工具（颜色取色器）来取到对应的颜色

字体样式

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

<p style = "font-style:normal">这是正常的字体</p>默认的，文本设置为普通字体

这是正常的字体

<p style = "font-style:italic">这是倾斜的字体</p>如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics

这是倾斜的字体

<p style = "font-style:oblique">这是模拟倾斜的字体</p>将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中

这是模拟倾斜的字体

因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。

字体粗细

网站中我们可以通过font-weight来设置文字的粗体大小

这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细

属性值	描述
normal	普通的字体粗细，默认
bold	加粗的字体粗细
lighter	比普通字体更细的字体
bolder	比bold更粗的字体
100~900	400表示normal

加粗的字体粗细

比普通字体更细的字体

比bold更粗的字体

400表示normal

---

文本属性

文本修饰

在网页中有些时候我们需要对文本设置下划线，或者删除线

如果想实现下划线或者删除线，使用text-decoration属性

属性值	描述
none	无文本的修饰
underline	文本下划线
overline	文本上划线
line-through	穿过文本的线，可以模拟删除线。

无文本修饰

文本下划线

文本上划线

删除线

文本缩进

比如我们通常写文章的时候，首行缩进两个字符那么我们需要使用text-indent属性来实现

它的属性值是像素(px、em、rem)单位

我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少

比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果

那能不能动态的设置呢？我们可以设置另一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置

如果p标签的字体是16px,那么1em=16px，如果我后期设置了字体大小为20px,那么2em就自动变为40px

p
    text-indent:2em;
    font-size:30px;

行间距

行间距，也叫行高，表示行与行之间的距离 ,上个案例的呈现效果会发现，行与行之间的距离有点近， ,那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素

p    
    font-size: 20px;
    text-indent: 2em;
    line-height:2em;

中文字间距，英文间距

如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现

文本对齐

在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示

那么在网页排版中我们可以使用text-align属性来进行设置

属性值	描述
left	文本左对齐，默认
right	文本右对齐
center	中心对齐

默认左对齐

右对齐

居中对齐

---

***** *****