3-CSS样式化文字

最新推荐文章于 2024-08-20 23:48:08 发布

宁静_致远_

最新推荐文章于 2024-08-20 23:48:08 发布

阅读量851

点赞数 1

分类专栏：前端开发文章标签： CSS

本文链接：https://blog.csdn.net/tiantianzs/article/details/123855134

版权

前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

title: 3-CSS样式化文字
tags: CSS（设计Web）
category: MDN

基本文本和字体样式

参考文档

用于样式文本的 CSS 属性通常可以分为两类：

1、字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。

2、文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

注意:

请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如使用 <span> 或者 <strong>

或者还可以使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

字体

颜色

color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。

字体种类

要在你的文本上设置一个不同的字体，你可以使用 font-family 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替

如果用户端的字体不支持网页设置的字体样式，则使用浏览器默认的字体样式

网页安全字体

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的网页安全字体。

可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表

默认字体

CSS 定义了 5 个常用的字体名称: serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。

字体栈

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

/* 注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。 */
p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

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

font-style: 用来打开和关闭文本 italic (斜体)。可能的值如下·

normal
  将文本设置为普通字体 (将存在的斜体关闭)

italic
  如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。

oblique
  将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等)

normal
  普通字体粗细

bold
  加粗的字体粗细

lighter
  将当前元素的粗体设置为比其父元素粗体更细

bolder
  将当前元素的粗体设置为比其父元素粗体更细或更粗

100–900
  数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。

text-transform: 允许你设置要转换的字体。值包括：

none
  防止任何转型。

uppercase
  将所有文本转为大写。

lowercase
  将所有文本转为小写。

capitalize
  转换所有单词让其首字母大写

full-width
  将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。

text-decoration: 设置/取消字体上的文本装饰, 可用值为：

none
  取消已经存在的任何文本装饰。

underline
  文本下划线.

overline
  文本上划线

line-through
  穿过文本的线

text-decoration 可以一次接受多个值，如果你想要同时添加多个装饰值，同时注意 text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。你可以使用这些属性值的组合来创建有趣的效果

文字阴影

你可以为你的文本应用阴影，使用 text-shadow 属性。这最多需要 4 个值，如下例所示：

/* 
第一个参数
  阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位，但是 px 是比较合适的。这个值必须指定。（可以为负值）

第二个参数
  阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。（可以为负值）

第三个参数
  模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位

第四个参数
  阴影的基础颜色，可以使用大多数的 CSS 颜色单位。 如果没有指定，默认为 black 
*/

text-shadow: 4px 4px 5px red;

以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

文本布局

文本对齐

text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下

left
  左对齐文本。

right
  右对齐文本

center
  居中文字

justify
  使文本展开，改变单词之间的差距，使所有文本行的宽度相同。
  有时候要结合 hyphens 属性使用

行高

line-height 属性设置文本每行之间的高，可以接受大多数单位, 不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。

推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

line-height: 1.5;

字母和单词间距

letter-spacing 属性允许你设置你的文本中的字母与字母之间的间距

word-spacing 属性允许你设置你的文本中的单词与单词之间的间距。

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

其他一些值得看一下的属性

Font 样式:

font-variant
  在小型大写字母和普通文本选项之间切换。

font-kerning
  开启或关闭字体间距选项。

font-feature-settings
  开启或关闭不同的 OpenType 字体特性。

font-variant-alternates
  控制给定的自定义字体的替代字形的使用。

font-variant-caps
  控制大写字母替代字形的使用。

font-variant-east-asian: 
  控制东亚文字替代字形的使用, 像日语和汉语。

font-variant-ligatures
  控制文本中使用的连写和上下文形式。

font-variant-numeric
  控制数字，分式和序标的替代字形的使用。

font-variant-position
  控制位于上标或下标处，字号更小的替代字形的使用。

font-size-adjust
  独立于字体的实际大小尺寸，调整其可视大小尺寸。

font-stretch
  在给定字体的可选拉伸版本中切换。

text-underline-position
  指定下划线的排版位置，通过使用 text-decoration-line 
  属性的underline 值。

text-rendering
  尝试执行一些文本渲染优化。

文本布局样式：

text-indent
  指定文本内容的第一行前面应该留出多少的水平空间。

text-overflow
  定义如何向用户表示存在被隐藏的溢出内容。

white-space
  定义如何处理元素内部的空白和换行。

word-break
  指定是否能在单词内部换行。

direction
  定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，
  因为它是和文本内容相关联的。)

hyphens
  为支持的语言开启或关闭连字符。

line-break
   对东亚语言采用更强或更弱的换行规则。

text-align-last
  定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。

text-orientation
  定义行内文本的方向。

word-wrap
  指定浏览器是否可以在单词内换行以避免超出范围。

writing-mode
  定义文本行布局为水平还是垂直，以及后继文本流的方向。

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;

样式化列表

参考文档

为什么要样式化列表

因为浏览器会给列表添加默认样式，我们需要将它们修改为自己想要的样式

处理列表间距

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距和相互间的水平间距

列表特定样式

这三个属性可以在 <ul> 或 <ol> 元素上设置：

list-style-type
  设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。

list-style-position
  设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。

list-style-image
  允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

符号样式

list-style-type 属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

ol {
  list-style-type: upper-roman;
}

项目符号位置

list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。如上所示，默认值为 outside，这使项目符号位于列表项之外。

如果值设置为 inside，项目条目则位于行内。

ol {
  list-style-position: inside;
}

使用自定义的项目符号图片

list-style-image 属性允许对于项目符号使用自定义图片。

ul {
  list-style-image: url(star.svg);
}

然而，这个属性在控制项目符号的位置，大小等方面是有限的。您最好使用background 系列属性

ul {
/* 将该内边距设置的空间用于放置背景图片 */
  padding-left: 2rem;

/* 设置为不显示项目符号 */
  list-style-type: none;
}

ul li {
/* 设置与 ul 相同的内边距，以对齐 */
  padding-left: 2rem;

/* 放置充当项目符号的背景图片 */
  background-image: url(star.svg);

/* 修改背景的定位，从列表容器的左上角开始 */
  background-position: 0 0;

/* 设置背景图片的大小 */
  background-size: 1.6rem 1.6rem;

/* ：默认条件下，背景图片不断复制直到填满整个背景空间，
在我们的例子中，背景图片只需复制一次，所以我们设置值为 no-repeat */
  background-repeat: no-repeat;
}

list-style 速记

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

上述提到的三种属性可以用一个单独的速记属性 list-style 来设置。例如：

ul {
  list-style: square url(example.png) inside;
}

管理列表计数

有时，您可能想在有序列表上进行不同的计数方式。例如：从1以外的数字开始，或向后倒数，或者按步或多于1计数。

start

start 属性允许你从1 以外的数字开始计数。示例如下：

<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

reversed

reversed 属性将启动列表倒计数。示例如下：

<ol start="4" reversed>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

value

value 属性允许设置列表项指定数值，示例如下:

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

样式化链接

参考文档

让我们来看一些链接

链接状态

链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式:

Link (没有访问过的): 
  这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。

Visited: 
  这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。

Hover: 
  当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。

Focus: 
  一个链接当它被选中的时候 (比如通过键盘的 Tab  移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus() (en-US)) 它可以使用 :focus 伪类来应用样式。

Active:
  一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。

默认的样式

链接的默认行为表现

链接具有下划线。

未访问过的 (Unvisited) 的链接是蓝色的。
访问过的 (Visited) 的链接是紫色的.
悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接
激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)

将样式应用到一些链接

a {
/* 取消了链接被选中（focus）时的轮廓 （outline） */
  outline: none;
/* 取消了链接默认的文本下划线 */
  text-decoration: none;
/* 为每个链接添加了少量的内边距（padding） */
  padding: 2px 1px 0;
}


a:link {
/* 为未访问（unvisited）链接添加颜色 */
  color: #265301;
}


a:visited {
/* 为访问过（visited）的链接的添加颜色，
然后就能与未访问的链接分辨开来了*/
  color: #437A16;
}


a:focus {
/* 添加下划线 */
  border-bottom: 1px solid;
/* 设置选中状态的背景色 */
  background: #BAE498;
}


a:hover {
  border-bottom: 1px solid;
/* 设置鼠标悬停时候的背景色 */
  background: #CDFEAA;
}


a:active {
/* 给链接一个不同的配色方案，当链接被激活 (activated) 时，
让链接被激活的时候更加明显 */
  background: #265301;
  color: #CDFEAA;
}

在链接中包含图标

在链接中包含图标，使链接提供更多关于链接指向的内容的信息。

让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。

/* 根据需要放置图片在链接中的位置 */
a[href*="http"] {
/* 设置了我们想要插入的图片的路径，指定了 no-repeat ，
这样我们只插入了一次图片，然后指定位置为100%，
使其出现在内容的右边，距离上方是0px */
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
/* 我们在链接上设置 padding-right ，为背景图片留出空间，这样就不会让它和文本重叠了 */
  padding-right: 19px;
}

我们是如何只选中了外部链接的？如果你正确编写你的HTML链接，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 <a> 元素，但是这样只会选中那些拥有 href 属性，且属性的值包含 “http” 的 <a>的元素。

样式化链接为按钮

一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分

ul {
/* 删除了 <ul> 元素的默认的 padding */
  padding: 0;
/* 设置了它的宽度是外部容器的 100%  */
  width: 100%;
}

li {
/* 我们设置了 display 属性为 inline，
这会导致列表中的每项内容都会一起出现在同一行，
它们现在表现得就像内联元素 */
  display: inline;
}

a {
/* 不显示轮廓 */
  outline: none;
/* 不显示下划线 */
  text-decoration: none;
/* 该显示模式可以控制元素大小 */
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Web 字体

参考文档

Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。

/* 指定要下载的字体文件 */
@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

/* 使用@font-face中指定的字体种类名称来
将你的定制字体应用到你喜欢的任何东西上，比如说： */
html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

web字体示例

首先前往 Font Squirre找到需要的字体，并下载它们，然后解压

前往Webfont Generator，点击"UPLOAD FONTS"按钮，将解压的字体文件上传。然后勾选"Yes, the fonts I’m uploading are legally eligible for web embedding"。之后点击跳出的按钮即可下载生成好的Web字体

解压生成的字体文件，将解压后的字体文件放置在项目文件夹中，并给它起一个合适的文件名。打开该文件夹中的 "stylesheet.css"文件，将里面的@font-face代码块复制到项目的 CSS文件中，并适当修改url()函数的值

例子如下：

@font-face {
  font-family: "alex_brushregular";
  src: url("/fant/alexbrush-regular-webfont.woff2") format("woff2"),
    url("/fant/alexbrush-regular-webfont.woff") format("woff");
/* 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，
您可以指定它们的粗细/样式，然后使用不同的font-weight/font-style
来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员 */
  font-weight: normal;
  font-style: normal;
}

html {
  font-family: "alex_brushregular";
}

使用在线字体服务

在线字体服务通常会为你存储和服务字体，这样就不用写@font-face代码了。只需要在你的网站上插入一两行代码就可以让一切都运行。

一个使用Google Fonts的例子如下：

打开网址后，点击右上角的一个按钮，鼠标悬停显示为"View your selected families"

然后在左侧网页中点击要链接的字体样式，之后网页跳转可以看到一个"Styles"，下方有多种样式可以选择。点击样式右侧的"Select this style"，则在右侧网页就会显示 HTML link标签、CSS引用例子。

例如在HTML中：

  <head>
    <meta charset="utf-8" />
    <title>Web font example</title>
    <link href="test.css" rel="stylesheet" type="text/css" />

    <!-- 
      引入在线字体
     -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>

在CSS中：

html {
  font-family: 'Noto Sans SC', sans-serif;
}

3-CSS样式化文字

title: 3-CSS样式化文字 tags: CSS（设计Web） category: MDN

基本文本和字体样式

字体

颜色

字体种类

网页安全字体

默认字体

字体栈

字体大小

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

文字阴影

文本布局

文本对齐

行高

字母和单词间距

其他一些值得看一下的属性

Font 简写

样式化列表

为什么要样式化列表

处理列表间距

列表特定样式

符号样式

项目符号位置

使用自定义的项目符号图片

list-style 速记

管理列表计数

start

reversed

value

样式化链接

让我们来看一些链接

链接状态

默认的样式

将样式应用到一些链接

在链接中包含图标

样式化链接为按钮

Web 字体

web字体示例

使用在线字体服务

title: 3-CSS样式化文字
tags: CSS（设计Web）
category: MDN