CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容在页面上的展示样式的语言，它与HTML（超文本标记语言）一同用于构建和设计网页。CSS可以控制页面元素的外观、布局和样式，如文字颜色、字体、大小、背景、边框、间距等。
CSS的工作方式是通过将样式规则应用于HTML元素来改变其外观。样式规则是由选择器和声明组成的。选择器选择要应用样式的元素，声明包含要应用的样式属性和值。
CSS具有以下特点：
-
分离性：CSS将网页的表现与内容分离，即将样式信息与HTML代码分开，使得网页的设计更加灵活和易于维护。
-
层叠性：当多个CSS样式规则同时应用到同一个元素时，CSS会根据规则的优先级和特定的层叠顺序来确定最终的样式表现。
-
继承性：某些CSS属性可以继承到子元素，即父元素的样式会自动应用到子元素上。
-
选择器：CSS提供了多种选择器，可以根据元素的类型、类名、ID等进行选择，从而精确地应用样式。
通过使用CSS，网页设计师可以轻松地改变网页的外观和布局，使网页更加美观、直观和易于导航。同时，CSS的模块化和可复用性也使得样式代码可以更好地组织和管理，提高了开发效率和维护性。
1.类选择器多类名的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 定义一个用于设置元素背景颜色为红色的类 */
.red-background {
background-color: red; /* 设置背景色为红色 */
}
/* 定义一个用于使文本加粗的类 */
.bold-text {
font-weight: bold; /* 设置字体粗细为粗体 */
}
/* 定义一个用于使元素内容居中的类 */
.centered {
text-align: center; /* 将文本内容水平居中对齐 */
}
</style>
</head>
<body>
<!-- 使用多类名的元素，同时应用了三个样式类 -->
<p class="red-background bold-text centered">这是一个具有红色背景、加粗文本且居中的段落。</p>
</body>
</html>在这个例子中：
- 我们定义了三个CSS类：
.red-background用于设置背景颜色为红色，.bold-text用于设置文本加粗，.centered用于将文本居中。- 在HTML的
<p>标签中，我们使用了多个类名（red-background bold-text centered），这意味着这个段落会同时应用这三个类的所有样式。
最终结果是 <p> 标签内的文本将以红色背景显示，并且字体加粗，同时整个段落内容居中对齐。
2.通配符选择器
/* 使用通配符选择器 "*"，它会匹配页面上的所有元素，并设置它们的字体颜色和字体大小 */
* {
font-size: 16px; /* 设置所有元素的字体大小为16像素 */
color: #333; /* 设置所有元素的字体颜色为深灰色 */
}请注意，在实际项目中，虽然通配符选择器可以全局统一样式，但因其影响范围广，可能会带来性能问题，因此推荐尽量针对具体元素或元素类别进行样式设置。
3.CSS字体属性之字体
在CSS中，设置字体系列（font-family）的属性用于定义元素内容所使用的字体。以下是一个具体的例子：
/* 选择器可以是任何HTML元素或自定义类名 */
p {
/* 设置字体系列：首先列出首选字体，如果浏览器不支持第一个字体，则尝试下一个，直到找到可用字体为止 */
font-family: "Arial", sans-serif;
/* 其他相关字体样式也可以在此处一同声明 */
font-size: 18px; /* 设置字体大小为18像素 */
font-weight: normal; /* 设置字体粗细为正常 */
line-height: 1.5; /* 设置行高为1.5倍字体大小 */
}
/* 如果希望所有页面文本都有一个通用字体系列，可以使用通配符选择器，但请谨慎，因为这会影响所有元素的默认字体 */
body * {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
h2 {
font-family: '微软雅黑';
}
p {
font-family: 'Times New Roman', Times, serif;
}4.CSS字体属性之字体大小
在CSS中，设置字体大小（font-size）的属性用于控制元素中文本的显示尺寸。以下是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置字体大小为16像素 */
font-size: 16px;
}
h1 {
/* 设置一级标题的字体大小为32像素 */
font-size: 32px;
}
#special-text {
/* 对于ID为'special-text'的元素，设置字体大小为2em，这里的2em是相对单位，基于父元素的基础字体大小计算 */
font-size: 2em;
}
article.small-text {
/* 对于class为'small-text'的文章元素，设置字体大小为0.875rem，这里的rem是相对于根元素(html)的基础字体大小计算 */
font-size: 0.875rem;
}
在这个例子中：
- `p` 元素的字体大小被设定为固定的16像素。
- `h1` 元素作为一级标题，其字体大小更大，设为32像素。
- ID为 `'special-text'` 的元素，其字体大小是父元素基础字体大小的两倍。
- 类名为 `'small-text'` 的所有 `article` 元素，其字体大小被设定为相对于根元素字体大小的0.875倍。
5.CSS字体属性之字体粗细
在CSS中，设置字体粗细（font-weight）的属性用于控制文本的线条粗细。以下是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
h1 {
/* 设置一级标题的字体为加粗 */
font-weight: bold; /* 或者使用数值表示法：font-weight: 700; */
}
p.important {
/* 对于类名为'important'的段落元素，设置字体比常规更粗 */
font-weight: bold; /* 或者 font-weight: bolder; 表示相对于父元素的字体粗细进行加粗 */
/* 使用数字值精确指定粗细程度 */
font-weight: 600;
}
em.emphasize {
/* 对于强调文本（<em>标签），使其字体比常规更细 */
font-weight: lighter;
}在这个例子中：
- `h1` 元素被设定为粗体字，这可以通过关键字 `bold` 或数字值 `700` 来实现。
- 类名为 `'important'` 的所有段落（`p`）元素将具有较粗的字体，这里使用了关键字 `bold` 或 `bolder`，后者会根据其父元素的字体粗细进行相对调整。
- 类名为 `'emphasize'` 的 `<em>` 标签内的文本将会变得比其正常字体更细，通过使用关键字 `lighter` 实现这一效果。
6.CSS字体属性之文字样式(风格)
在CSS中，设置字体样式（文字风格）通常使用 `font-style` 属性。以下是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p.normal-text {
/* 设置正常字体样式 */
font-style: normal;
}
em.italicized-text {
/* 设置斜体字体样式 */
font-style: italic;
}
i.oblique-text {
/* 设置倾斜字体样式 */
font-style: oblique;
}在这个例子中：
- 类名为 `'normal-text'` 的所有段落（`p`）元素将保持标准的字体样式。
- 类名为 `'italicized-text'` 的 `<em>` 元素（或者其他应用了该类名的元素）中的文本将以斜体显示，如果浏览器支持的话，它会尝试使用指定字体的斜体版本；如果没有可用的斜体版本，则可能以某种方式模拟斜体效果。
- 类名为 `'oblique-text'` 的 `<i>` 元素或其他应用此类名的元素中的文本将以倾斜样式显示，与斜体类似，但这里的倾斜是浏览器根据普通字体样式进行的一种人为倾斜处理，而非使用字体本身的斜体变体。注意：在实际应用中，虽然 `<i>` 和 `<em>` 标签在默认情况下通常表现为斜体，但它们在语义上有所不同，其中 `<em>` 表示强调，而 `<i>` 用于表示一种不同语境下的文本样式，例如技术术语、外文短语等。通过CSS我们可以分别控制这些元素的字体样式。
7.CSS字体属性之复合属性
在CSS中，可以使用 `font` 复合属性一次性设置多个字体相关的样式。下面是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p.custom-font {
/* 使用复合属性 font 设置多个字体相关样式 */
font: italic bold 18px/32px "Arial", sans-serif;
}
/* 上述复合属性分解说明：
- font-style: italic; 定义字体为斜体
- font-weight: bold; 定义字体为粗体
- font-size: 18px; 定义字体大小为18像素
- line-height: 32px; 定义行高为32像素（在font复合属性中，使用'/'符号表示）
- font-family: "Arial", sans-serif; 定义字体系列，优先使用Arial，若无，则使用无衬线字体系列
*/
/* 等效于以下单独声明各个属性的方式： */
p.custom-font {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 32px;
font-family: "Arial", sans-serif;
}通过 `font` 复合属性，我们可以将多种字体样式属性合并成一行，从而简化CSS代码，并且更高效地表达一个元素的综合字体样式。
8.CSS文本外观属性之颜色
在CSS中，设置文本颜色的属性是 `color`。下面是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本颜色为红色 */
color: red;
}
h1.title {
/* 设置所有 class 为 'title' 的一级标题文本颜色为蓝色 */
color: blue;
}
a.custom-link {
/* 设置所有 class 为 'custom-link' 的链接文本颜色为绿色，并且在鼠标悬停时变为橙色 */
color: green;
}
/* 使用RGB表示颜色 */
p.rgb-color {
color: rgb(255, 0, 0); /* 这同样是红色 */
}
/* 使用十六进制表示颜色 */
p.hex-color {
color: #FF0000; /* 同样也是红色 */
}
/* 使用HSL表示颜色 */
p.hsl-color {
color: hsl(0, 100%, 50%); /* 这还是红色 */
}
9.CSS文本外观之文字对齐
在CSS中，设置文本对齐的属性是 `text-align`。下面是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本左对齐 */
text-align: left;
}
.centered-text {
/* 设置所有类名为 'centered-text' 的元素文本居中对齐 */
text-align: center;
}
.right-aligned {
/* 设置所有类名为 'right-aligned' 的元素文本右对齐 */
text-align: right;
}
.justified-text {
/* 设置所有类名为 'justified-text' 的元素文本两端对齐 */
text-align: justify;
}
/* 特殊情况下的文本对齐，比如对于内联元素 */
span.inline-element {
display: inline-block; /* 需要先转换为块级或行内块级元素才能应用text-align */
width: 100px; /* 为了演示效果，设置了宽度 */
text-align: center; /* 内联元素内容（如文字）居中对齐 */
}
在这个例子中，我们分别展示了如何将文本设置为左对齐、居中对齐、右对齐以及两端对齐。同时，也提到了一个特殊情况，即内联元素需要先转换为可设置宽度和对齐方式的显示类型（例如：inline-block），然后才能对其内部内容进行对齐设置。
10.CSS文本外观之装饰文本
/* 选择器可以是任何HTML元素、类名或ID */
a {
/* 设置链接文本带有下划线 */
text-decoration: underline;
}
h2.strike-through {
/* 设置所有class为 'strike-through' 的二级标题具有删除线效果 */
text-decoration: line-through;
}
em.underline-overline {
/* 设置所有使用 <em> 标签且类名为 'underline-overline' 的强调文本既有下划线又有上划线 */
text-decoration-line: underline overline;
/* 可以进一步自定义装饰线的颜色（假设支持的浏览器） */
text-decoration-color: hotpink;
/* 装饰线样式，如波浪线等（假设支持的浏览器） */
text-decoration-style: wavy;
}
/* 对于链接，也可以控制hover状态下的装饰效果 */
a:hover {
/* 当鼠标悬停在链接上时，移除下划线 */
text-decoration: none;
}
11.CSS文本外观之文本缩进
在CSS中，设置文本缩进通常使用 `text-indent` 属性。下面是一个具体的例子：
/* 选择器可以是任何HTML元素、类名或ID */
p.indent {
/* 设置段落首行缩进2个字符（等效于约10px，具体取决于字体大小和字符宽度） */
text-indent: 2em;
}
blockquote.quote {
/* 设置所有 blockquote 元素的首行缩进50像素 */
text-indent: 50px;
}
/* 若需要实现每行缩进而非仅首行缩进，则需配合其他CSS属性如 padding 或 margin 实现 */
p.full-indent {
/* 使用内边距实现每行缩进 */
padding-left: 1em;
}
在这个例子中：
- 类名为 `'indent'` 的所有段落（`<p>`）元素的首行将被缩进2个字符单位。
- 所有 `<blockquote class="quote">` 引用块的首行将被缩进50像素。
- 类名为 `'full-indent'` 的段落通过 `padding-left` 属性实现了每行内容都从左侧开始有1个字符单位的内边距缩进效果。
请注意，`text-indent` 只影响元素的第一行文本，而 `padding-left` 或 `margin-left` 则会影响整个元素的内容区域。
12.CSS文本外观之行间距
在CSS中，设置行间距（行高）的属性是 `line-height`。下面是一个具体的例子：```css
/* 选择器可以是任何HTML元素、类名或ID */
p {
/* 设置段落文本的行间距为1.5倍行字体大小 */
line-height: 1.5;
}
h1.title {
/* 设置一级标题的行间距为28像素 */
line-height: 28px;
}
/* 使用数值形式表示相对单位，自动根据当前字体大小计算行间距 */
p.relaxed-spacing {
/* 行间距设置为当前字体大小的1.7倍 */
line-height: 1.7;
}
/* 使用百分比值，基于当前字体大小计算行间距 */
p.tight-spacing {
/* 行间距设置为当前字体大小的120% */
line-height: 120%;
}
在这个例子中：
- 所有的段落（`<p>`）元素的行间距被设置为其字体大小的1.5倍。
- 类名为 `'title'` 的所有一级标题（`<h1>`）元素的行间距被固定为28像素。
- 类名为 `'relaxed-spacing'` 的段落元素使用了相对单位，其行间距将是字体大小的1.7倍。
- 类名为 `'tight-spacing'` 的段落元素设置了行间距为其字体大小的120%。
通过调整 `line-height` 属性的值，我们可以控制文本内容的垂直间距，实现美观和易读性上的优化。
13.内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内部样式表</title>
<style>
div {
color: pink;
}
</style>
</head>
<body>
<div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>
</html>14.行内样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内样式表</title>
</head>
<body>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底压心底不能告诉你</p>
<p> 晚风吹过温暖我心底我又想起你</p>
<p> 多甜蜜多甜蜜怎能忘记</p>
<p>不能忘记你把你写在日记里</p>
<p>不能忘记你心里想的还是你</p>
<p>浪漫的夏季还有浪漫的一个你</p>
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>15.外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>16.用HTML和css写一个简单的案例
当然，下面是一个简单的HTML和CSS案例，它创建了一个具有红色背景、居中显示的标题以及一个段落文本。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单示例</title>
<link rel="stylesheet" href="styles.css"> <!-- 假设CSS文件名为styles.css -->
</head>
<body>
<div class="container">
<h1 class="centered-title">欢迎来到我的网站！</h1>
<p class="welcome-text">这是一个使用HTML和CSS编写的简单页面示例。</p>
</div>
</body>
</html>CSS部分（styles.css）：
/* 设置整个页面背景为红色 */
body {
background-color: red;
}
/* 创建一个居中的容器，并设置一些内边距 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 让容器高度等于视口高度 */
padding: 20px;
}
/* 设置居中显示的标题样式 */
.centered-title {
color: white;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
/* 设置段落文本样式 */
.welcome-text {
color: darkgray;
font-size: 18px;
line-height: 1.5;
}在这个例子中，我们首先在HTML文档中定义了基本结构，包括一个标题和一个段落。然后，在CSS文件中，我们设置了背景颜色、居中对齐、字体大小和行间距等样式属性。
后续内容：请点击
2627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
