CSS文本详解

最新推荐文章于 2022-07-03 23:34:49 发布

月曜日与猫

最新推荐文章于 2022-07-03 23:34:49 发布

阅读量248

点赞数 1

分类专栏：周报

本文链接：https://blog.csdn.net/weixin_44142127/article/details/85781900

版权

周报专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用于样式文本的 CSS 属性通常可以分为两类：
字体样式和文本布局
注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 （<span> 或者 <strong>）, 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

字体样式

颜色

color 属性设置选中元素的颜色 (可以是文本，也可以是使用 text-decoration 属性放置在文本下方或上方的线 (underline，overline)。
字体种类
要在你的文本上设置一个不同的字体，你可以使用 font-family 属性，这个允许你为浏览器指定一个字体，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 例子:
p {
font-family: arial;
}

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。
默认字体
CSS 定义了 5 个常用的字体名称: serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。有时候浏览器不能一模一样地渲染你选用的字体，它会尽力提供一个看上去差不多的的字体。 serif, sans-serif 和 monospace 是比较容易的，默认的情况应该比较合理，而cursive 和 fantasy 是不太好预测的。
五个名称定义如下：


名称	定义
serif	有衬线的字体（衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）
sans-serif	没有衬线的字体
monospace	每个字符具有相同宽度的字体，通常用于代码列表
cursive	用于模拟笔迹的字体，具有流动的连接笔画
fantasy	用来装饰的字体

字体栈（相当于字体库）

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如
p {
font-family: “Trebuchet MS”, Verdana, sans-serif;
}

作用：在这种情况下，浏览器将依次从你的字体栈里寻找合适的字体。
在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。
但是如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman 。
注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。
字体大小
(通过 font-size 属性设置)
字体大小时，最常用的单位是：

px (像素): 将像素的值赋予给你的文本。这是一个绝对单位。
ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 相对单位
rems: 这个单位的效果和 ems 差不多，除了 1rem 等于 HTML
中的根元素的字体大小，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， rems 不支持 Internet Explorer 8
和以下的版本。

相对大小的计算问题：元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，都为16px。其他元素也许有默认的大小，比如 <h1> 元素有一个 2ems 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 <article> 元素在你的页面上，然后设置它的 font-size 为 1.5ems (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

    <!-- document base font-size is 16px -->
    <article> <!-- If my font-size is 1.5em -->
      <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
    </article>

你需要将 em 的值设置为 20/24, 或者 0.83333333ems. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rems 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

一个简单的 size 示例

当调整你的文本大小时，将文档(document)的基础 font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 ®em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。
我们的新结果是这样的:

    html {
      font-size: 10px;
    }/*初始化，方便了下文对字体大小的设置*/
    h1 {
      font-size: 2.6rem;/*即26px*/
    }
    p {
      font-size: 1.4rem;
      color: red;
      font-family: Helvetica, Arial, sans-serif;
    }

字体样式，字体粗细，文本转换和文本装饰

CSS 提供了 4 种常用的属性来改变文本的样子：

font-style: 用来打开和关闭文本 italic (斜体)。可能的值如下
(你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：

normal: 将文本设置为普通字体 (将存在的斜体关闭) italic:
如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
oblique:将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

font-weight: 设置文字的粗体大小。这里有很多值可选，防止你有好几个可用的字体。 (比如 -light, -normal,-bold, -extrabold, -black, 等等)
1. normal, bold: 普通或者加粗的字体粗细
2. ighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
  100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
text-transform: 允许你设置要转换的字体。值包括：
1. none: 防止任何转型。
2. uppercase: 将所有文本转为大写。
3. lowercase: 将所有文本转为小写。
capitalize: 转换所有单词让其首字母大写。
1. full-width: 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。拉丁字符以及亚洲语言字形（如中文，日文，韩文）
text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：
1. none: 取消已经存在的任何文本装饰。
2. underline: 文本下划线.
3. overline: 文本上划线
4. line-through: 穿过文本的线 strikethrough over the text.
  （text-decoration 可以一次接受多个值）

我们来看一下这几个属性添加到我们的例子中：我们的新结果是这样的：

    html{
      font-size: 10px;
    }
    h1 {
      font-size: 2.6rem;
      text-transform: capitalize;
    }
    h1+p {
      font-weight: bold;
    }
    p {
      font-size: 1.4rem;
      color: red;
      font-family: Helvetica, Arial, sans-serif;
    }

文本布局风格

文本对齐

text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。

缩进文本

把 Web 页面上的段落的第一行缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5

    em：
    p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

使用负值

text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

    p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

    p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：

    div {width: 500px;}
    p {text-indent: 20%;}
    
    <div>
    <p>this is a paragragh</p>
    </div>

继承

text-indent 属性可以继承，请考虑如下标记：

    div#outer {width: 500px;}
    div#inner {text-indent: 10%;}
    p {width: 200px;}
    
    <div id="outer">
    <div id="inner">some text. some text. some text.
    <p>this is a paragragh.</p>
    </div>
    </div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

行高

line-height 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

    line-height: 1.5;

字母和单词间距

letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.
所以作为例子，如果我们把这个样式应用到我们的示例中的

段落的第一行：

    p::first-line {
      letter-spacing: 2px;
      word-spacing: 4px;
    }

文本方向

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl
Font 简写
许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。
font-size 和 line-height 属性之间必须放一个正斜杠。
一个完整的例子如下所示：

    font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

应用

现在我们用css来修饰文本：

    <!DOCTYPE html>
    <html lang="en">
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <title>font</title>
        <style type="text/css">
            .box {
                max-width: 800px;
                margin: 100px 0 0 100px;
                color: black;
                font-weight: bold;
                font-size: 20px;
                font-family: "Microsoft YaHei UI", tahoma, Hiragino Sans GB, sans-serif;
            }
     
            .box p{
                font-size: 3em;
                color: black;
                text-shadow:
                        0 0 10px #fefcc9,
                        5px -5px 15px #feec85,
                        -10px -10px 20px #ffae34,
                        10px -15px 17.5px #ec760c,
                        -10px -20px 20px #cd4606,
                        0 -50px 65px #973716,
                        5px -35px 35px #451b0e;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <p>朝花夕拾</p>
        愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。有一分热，发一分光。就令萤火一般，也可以在黑暗里发一点光，不必等候炬火。此后如竟没有炬火，我便是唯一的光。
    </div>
    </body>
    </html>

效果：
xiaoguo

月曜日与猫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文本详解

用于样式文本的 CSS 属性通常可以分为两类：字体样式和文本布局注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如（&lt;span&gt; 或者 &lt;strong&gt;）, 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中...
复制链接

扫一扫