【CSS 05】文本颜色文本对齐文字装饰文本转换文字间距文本阴影字体字体样式字体大小谷歌字体

news2024/9/19 10:44:19

CSS

- - 说在前面
  - 文本 text
  - 文本对齐 text-align
  - 文字装饰 text-decoration
  - 文本转换 text-transform
  - 文字间距 text_spacing
  - 文本阴影 text-shadow
  - 字体 font
  - 字体样式 font-style
  - 字体大小 font-size
  - 谷歌字体
  - 简写属性 shorthand

说在前面

事实证明，Zoro只要出现在标题就会被识别为关键字，所以现在我直接不将Zoro写入标题而是更换成封面，嘻嘻

文本 text

color 属性用于设置文本的颜色

name - red
HEX - #ff0000
RGB - rgb(255,0,0)

页面的默认文本颜色是在 body 选择器中定义的

body {
	color: blue;
}
对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性

body {
	background-color: light-grey;
	color: blue;
}

h1 {
	background-color: black;
	color: white;
}

文本对齐 text-align

text-align 属性用于设置文本的水平对齐方式
文本可以左对齐或右对齐，或居中对齐
h1 {
	text-align: center;
}

当 text-align 属性设置为 "justify" 后，将拉伸每一行（拉开词距），以使每一行具有相等的宽度，并且左右边距是直的
div {
	text-align: justify;
}

direction 和 unicode-bidi 属性可用于更改元素的文本方向
p {
	direction: rtl;
	unicode-bidi: bidi-override;
}

vertical-align 属性设置元素的垂直对齐方式
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

文字装饰 text-decoration

text-decoration 属性用于设置或删除文本装饰
text-decoration: none; 通常用于从链接上删除下划线

a {
	text-decoration: none;
}

其他 text-decoration 值用于装饰文本
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
建议不要在非链接文本加下划线，因为这经常会使读者感到困惑

文本转换 text-transform

text-transform 属性用于指定文本中的大写和小写字母

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

文字间距 text_spacing

text-indent 属性用于指定文本第一行的缩进
p {
	text-indent: 50px;
}

letter-spacing 属性用于指定文本字符间距
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

line-height 属性用于指定行间距
p.small {
	line-height: 0.8;
}
p.big {
	line-height: 1.8;
}

word-spacing 属性用于指定单词之间的间距（字间距）
h1 {
	word-spacing: 10px;
}

h2 {
	word-spacing: -5px;
}

white-space 属性指定元素内部空白的处理方式
演示如何禁用元素内的文本换行
p {
  white-space: nowrap;
}

文本阴影 text-shadow

text-shadow 属性为文本添加阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
接下来，向阴影添加颜色（红色
然后，向阴影添加模糊效果（5px）

h1 {
	text-shadow: 2px 2px 5px red;
}

字体 font

选择正确的字体会对网站的用户体验产生巨大影响
正确的字体可以为您的品牌创造强有力的形象
使用易于阅读的字体很重要
字体为您的文本增加了价值
为字体选择正确的颜色和文本大小也很重要

通用字体族
CSS中有五个通用字体族：

衬线 - Serif - 在每个字母的边缘都有一个小的笔触,营造出一种形式感和优雅感
无衬线 - Sans-serif - 字体线条简洁,营造出现代而简约的外观
等宽 - Monospace - 所有字母都有相同的固定宽度,创造出机械式的外观
草书 - Cursive - 模仿人的笔记
幻想 - Fantasy - 装饰性
使用 font-family 属性规定文本的字体

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性
请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）
字体名称应以逗号分隔

如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

字体样式 font-style

font-style 属性主要用于指定斜体文本
可以设置三个值：

normal - 文字正常显示
italic - 文字斜体显示
oblique - 文本倾斜，类似斜体且支持较少

font-weight 属性指定字体粗细

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小

p.normal {
	font-style: normal;
}

p.italic {
	font-size: italic;
}

p.oblique {
	font-style: oblique;
}

p.light {
	font-weight: lighter;
}

p.thick {
	font-weight: bold;
}

p.thicker {
	font-weight: 900;
}

p.small {
	font-variant: small-caps;
}

字体大小 font-size

font-size 属性设置文本的大小
在网页设计中，能够管理文本大小很重要
但是不应调整字体大小来使段落看起来像标题，或是使标题看起来像段落

font-size 值可以是绝对或相对大小：

绝对尺寸：

指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
输出物理尺寸已知时绝对尺寸有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

如果没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小
如果您使用像素，则仍然可以使用缩放工具来调整整个页面的大小

以 em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素
W3C 建议使用 em 尺寸单位
1em 等于当前字体大小
浏览器中的默认文本大小为 16px
因此默认大小 1em 为 16px

h1 {
	font-size: 40px;
}

h1 {
	font-size: 2.5em;
}

在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小
需要使用百分比和em的组合
body {
	font-size: 100%;
}

h1 {
	font-size: 2.5em;
}

响应式字体大小
可以使用 vw 单位设置文本大小，意思是“视口宽度”（"viewport width"）
这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放
<h1 style="font-size:10vw">响应式文本</h1>

<p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p>

<p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p>

<p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p>

谷歌字体

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体

只需添加一个样式表链接并引用您选择的字体系列

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
	font-family: "Sofia";
	font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

简写属性 shorthand

为了缩短代码，也可以在一个属性中指定所有单个字体属性
font属性是下面属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>