时间：2023-10-02 14:24:01 | 来源：网站运营
时间：2023-10-02 14:24:01 来源：网站运营
CSS 进阶——字体 颜色 多列布局：
在线咨询
<br> 元素。color 属性。严格来讲，color 设置的是前景内容，设置元素背景颜色要用 background-color。p { color: red;}这段用来设置<p>中的字体颜色为红色。p { font-family: arial;}这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。| 字体名称 | 泛型 | 注意 |
|---|
serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。| 名称 | 定义 |
|---|
<html> 指定字体的方式来网指定字体,这样页面上的所有文字都继这个属性，然后整个页面的字体都会同时设置。html { font-family: "Noto Sans SC", "Source Han Sans CN", "MicroSoft YaHei", sans-serif; /*前两个思源黑体，第三个微软雅黑，最后是无衬线类。*/}px 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。一般不推荐使用。em 设置相对父元素的字节大小，推荐使用。注意这不是直接相对浏览器本身的字节大小，而是自己的父元素。也就是如果你给一个段落设置成了 1.2em ，它的子元素设置 1em 就是相对 1.2em 而言的。rem 相对根元素大小。这个可以避免上面提到的嵌套问题，而是直接相对浏览器本身的字节大小。font-style: 用来打开和关闭文本 italic (斜体)。 可能的值如下： normal : 将文本设置为普通字体 (将存在的斜体关闭) ，italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会将文字倾斜来模拟 italics 。你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态。font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 light, normal, bold, extrabold, black, 等等), 不过事实上你很少会用到 normal 和 bold 以外的值。其中 normal 设置正常字体，bold 设置粗体。text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为： none （取消已经存在的任何文本装饰），underline（文本下划线），overline（文本上划线） ，line-through（删除线）。left: 左对齐文本。right: 右对齐文本。center: 居中文字justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 hyphens ，打破一些更长的词语。text-align: center; 到一个页面的 <h1> 元素中，结果如下：line-height 属性设置文本每行之间的高，可以接受大多数单位，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size (字体大小)来获得 line-height 行高）。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的 1.5 倍，你可以使用这个:line-height: 1.5;letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，尤其是中文的网站下面，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位。<p> 段落的第一行：p::first-line { letter-spacing: 2px; word-spacing: 4px;}color）和背景色( background-color )。前景色通常用来指定文本的颜色，背景色通常用来指定块元素的背景颜色。下面是一个例子，形成了黑底灰字。p { color: grey; background-color: black;}<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>color: red;color: orange;# 打头的十六进制数字设置，符号由红色、绿色和蓝色的值组成，就是把 RGB 直接写成一个数字。color: #090;color: #009900;color: rgb(34, 12, 64);color: rgb(34, 12, 64, 0.6);color: rgba(34, 12, 64, 0.6);color: hsl(30, 100%, 50%, 0.6);color: hsla(30, 100%, 50%, 0.6);background-image 属性用于为一个元素设置一个或者多个背景图像。接受一个图片的 URL 作为参数。例如下面：background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");<div> 里面，它带有一个container 类。我们会将它作为一个放置文本的容器，来进行一个展示。column-count 被设置成 3 意思是三列。.container { column-count: 3;}<div class="container"> <h1>Simple multicol example</h1> <p>节约纸张</p> <p>同上</p></div>除了列数，还可以通过指定每列的宽度。之前为了方便都是用 px 当作单位。这里也可以换成 em （一般情况下，1em 等于 16px，具体换算由浏览器决定），两者之中 em 更适合移植。.container { column-width: 12.5em; /*相当于 200px*/}浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。column-gap 改变列间间隙。column-rule 在列间加入一条分割线。column-gap 属性可以更改列间间隙：.container { column-width: 200px; column-gap: 20px;}你可以尝试不同的值 — 该属性接受任何长度单位。现在再加入 column-rule。和你之前遇到的 border 属性类似， column-rule 是 column-rule-color 和 column-rule-style 的缩写，接受同 border 一样的单位。然后就得到了下面的效果.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227);}本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的以下文章改编:
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals
本文按照 CC-BY-SA 4.0 协议发布
本文也在：https://yjzxclub.github.io/929cb01d3315/
本人也是：尼泽·莫伯斯
关键词：布局,颜色,字体
