本次博客带领大家学习CSS的作用和各种样式。

CSS的作用

可以节省大量时间；
CSS提供了一种简单的方法来更新文档的格式，并保持多个文档之间的一致性，使得维护变得简单容易；
页面加载速度更快；
HTML的高级样式；
多设备兼容性。

字体样式

1. 字体：

在 CSS 中，我们使用 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;
}

2. 字体样式：

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

p.normal {font-style: normal;
}p.italic {font-style: italic;
}p.oblique {font-style: oblique;
}

3.字体粗细：

font-weight 属性指定字体的粗细：

p.normal {font-weight: normal;
}p.thick {font-weight: bold;
}

4. 字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

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

5. 字体大小

font-size 属性设置文本的大小。

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

请始终使用正确的 HTML 标签，例如

-

用于标题，而

仅用于段落。

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

绝对尺寸：

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

相对尺寸：

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

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

h1 {font-size: 40px;
}h2 {font-size: 30px;
}p {font-size: 14px;
}

6. 字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

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

p.a {font: 20px Arial, sans-serif;
}p.b {font: italic small-caps bold 12px/30px Georgia, serif;
}

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

所有 CSS 字体属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family：字体font-size：字体大小font-weight：字体粗细--><style>body{font-family: 楷体;}h1{font-size: 50px;}.p1{font-weight:bold;}</style>
</head>
<body><h1>故事介绍</h1>
<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p></body>
</html>

文本样式

1. 文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

查看 CSS 颜色值，以获取可能颜色值的完整列表。

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

body {color: blue;
}h1 {color: green;
}

2. 文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性：

body {background-color: lightgrey;color: blue;
}h1 {background-color: black;color: white;
}

3. 文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

h1 {text-align: center;
}h2 {text-align: left;
}h3 {text-align: right;
}

4. 文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {direction: rtl;unicode-bidi: bidi-override;
}

5. 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

img.top {vertical-align: top;
}img.middle {vertical-align: middle;
}img.bottom {vertical-align: bottom;
}

6. 文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

a {text-decoration: none;
}

/*上划线*/
h1 {text-decoration: overline;
}
/*中划线*/
h2 {text-decoration: line-through;
}
/*下划线*/
h3 {text-decoration: underline;
}

7. 文本转换

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

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

/*将所有内容转换为大写字母*/
p.uppercase {text-transform: uppercase;
}
/*将所有内容转换为小写字母*/
p.lowercase {text-transform: lowercase;
}
/*将每个单词的首字母大写*/
p.capitalize {text-transform: capitalize;
}

8. 文字缩进

text-indent 属性用于指定文本第一行的缩进：

p {text-indent: 50px;
}

9. 字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：

h1 {letter-spacing: 3px;
}h2 {letter-spacing: -3px;
}

10. 行高

line-height 属性用于指定行之间的间距：

p.small {line-height: 0.8;
}p.big {line-height: 1.8;
}

11. 字间距

word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

h1 {word-spacing: 10px;
}h2 {word-spacing: -5px;
}

12. 空白

white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

p {white-space: nowrap;
}

13. 文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

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

接下来，向阴影添加颜色（红色）：

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

然后，向阴影添加模糊效果（5px）：

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

所有 CSS 文本属性

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。

CSS的作用与各种样式相关推荐

CSS的作用及字体样式
为什么要美化网页? 1.有效的传递页面信息 2.美化网页.页面漂亮才能吸引用户 3.凸显页面的主题 4.提高用户的体验 span标签:重点要突出的字使用span标签套起来(约定俗成) <!DOC ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
css设置a连接禁用样式_使用CSS禁用链接
css设置a连接禁用样式 Question: 题: Links are one of the most essential aspects of any web page or website. Th ...
[css] 重置（初始化）css的作用是什么？
[css] 重置(初始化)css的作用是什么? 这是一个,还有就是视觉问题,浏览器默认样式会影响我们的设计还原,而且默认样式一般不够美观,满足不了定制化的视觉需求,达不到视觉产品的信息传达目标. 个人 ...
为什么要将html页面和样式表分离,0031 如何使用css文件对网页内容和样式进行分离...
原标题:0031 如何使用css文件对网页内容和样式进行分离上节课,学习了针对文字可以设置很多种样式. 这节课,学习如何将内容和样式进行分离. 上节课的课后练习 1.将斜体字体效果去除 2.将工作经 ...
CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
CSS基本（选择器及样式）--2021-08-12
CSS是Cascading Style Sheets 层叠样式表的简称,由W3C制定和维护.作用:美化.布局. CSS分类: 行内样式表内嵌样式表外部样式表优先级:行内>内嵌>外部 ...

CSS的作用与各种样式