CSS 允许您指定如何向用户显示每个 HTML 元素。
HTML在元素的外观方面非常有限。如果您试图为网站提供独特的外观和感觉，或者您试图坚持企业形象，那么这并不是那么好。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
但这不是HTML的目的来做这样的事情。这就是 CSS 的工作。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
什么是企业社会责任？
CSS代表级联样式表，其目的是使Web作者/设计人员能够在其网站上应用样式。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
使用 CSS，您可以为任何给定的 HTML 元素指定许多样式属性。每个属性都有一个名称和一个值，以冒号 （） 分隔。每个属性声明都用分号 （） 分隔。:;文章源自你的网络首码项目网-https://www.youranweb.com/39.html
喜欢这个：文章源自你的网络首码项目网-https://www.youranweb.com/39.html
color:olive;font-size:24px;
在两者之间有空格是可以的：文章源自你的网络首码项目网-https://www.youranweb.com/39.html
color: olive; font-size: 24px;
您甚至可以将每个声明放在自己的行上：文章源自你的网络首码项目网-https://www.youranweb.com/39.html
color: olive; font-size: 24px;
样式表的类型
有不同的方法可以将样式实现到 HTML 文档中。通常，这些归结为使用内联样式表、嵌入式样式表和外部样式表。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
内联样式
上面的代码是内联样式的示例。它之所以被称为内联，是因为我们在 HTML 标记本身中声明了样式。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
<p style="color:olive;font-size:24px;">HTML Styles with CSS</p>
虽然内联样式可以是向 HTML 文档添加样式的快速便捷方法，但应谨慎使用此方法。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
在整个网站上添加内联样式会使维护变得更加困难。如果样式已应用于站点中的许多页面，则微小的更改可能成为一项重大任务。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
嵌入式样式
从内联样式（当涉及到可维护性时）的一个步骤是嵌入式样式。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
嵌入样式将添加到文档的<head> 元素（或嵌套在<head> 元素中的<noscript> 元素），并且可以包含文档的所有（或至少大多数）样式。这可以使文档更易于维护，尤其是在包含许多样式时。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
若要向网页添加嵌入样式，请将样式括在<样式>标记之间。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
body {
background-color: darkslategrey;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
#intro {
font-size: 1.3em;
}
.colorful {
color: orange;
}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>外部样式
更进一步，您可以将所有样式放入外部样式表中。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
外部样式是指创建包含所有样式信息的单独文件。然后，此文件将从任意数量的HTML页面链接到 - 甚至是整个站点。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
要将外部样式表添加到网页，请使用 <link> 标记，在属性中提供样式表的 URL 以及 。hrefrel="stylesheet"文章源自你的网络首码项目网-https://www.youranweb.com/39.html
对于以下示例，我从上面的（嵌入的）示例中获取样式，将它们移动到外部样式表，然后链接到该文件。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<link rel="stylesheet" href="/html/tutorial/html_styles_example.css">
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>因此，您可以看到 HTML 文件不再包含任何实际的 CSS 代码。CSS 代码位于外部文件中。文章源自你的网络首码项目网-https://www.youranweb.com/39.html
规则@import
还可以使用 CSS 规则导入外部样式表。@import文章源自你的网络首码项目网-https://www.youranweb.com/39.html
为此，请使用<style> 标记。
<style>
@import 'styles.css';
</style>请注意，此方法可能会影响性能，使用第一种方法（即使用<link> 标记）通常更有效。
但是，也可以从外部样式表本身内部使用该规则（以便将另一个样式表导入该样式表），而不会产生相同的性能问题。@import
您不仅限于将样式应用于文档的一种方法。如果需要，可以组合所有三种方法。
大多数现代网站将外部样式用于其大多数（如果不是全部）样式。
但是，有许多有效的理由可以解释为什么他们可能还需要使用一种或两种其他方法。
选择
嵌入式样式表和外部样式表使用选择器来指定要应用样式的元素。例如， 是<body>元素的选择器。body
下面是我用于上述示例的样式表。
body {
background-color: darkslategrey;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
#intro {
font-size: 1.3em;
}
.colorful {
color: orange;
}前两个选择器是 和 。它们选择同名的 HTML 元素，并将样式应用于这些元素。bodyh1
下一个选择器是 。这是一个 ID 选择器。它选择页面上的元素，该元素的属性设置为值 。换句话说，.#introidintroid="intro"
下一个选择器是 。这是一个类选择器。它选择 HTML 文档中具有值为 的属性的所有元素。换句话说，.colorfulclasscolorfulclass="colorful"
还有许多其他类型的选择器可用于设置 HTML 元素的样式。
以下是您可以使用 CSS 选择器执行的一些操作：
- 仅选择具有特定属性的那些元素。
- 选择具有特定属性和特定值的某个元素。
- 选择特定元素，但仅当它位于另一个特定元素中时。
- 仅选择特定元素的第一个子元素。
- 仅选择特定元素的最后一个子元素。
- 您甚至可以指定哪个孩子（例如，第3个孩子，或第4个，第5个孩子...等）。
- 仅当元素悬停在元素上时才选择该元素。
- 多。
当然，只要你能选择它，你就可以设置它。因此，在选择要设置样式的元素时，您可以非常具体。
以下是可供参考的 CSS 选择器的完整列表。
评论