发表于 2021-12-1 11:43:47
首先，让我们确保我们了解 CSS 是什么以及我们为什么需要它（如果我们希望我们的网页看起来不错）。
关于 CSS
CSS（层叠样式表）用于将样式应用到 HTML 文档。这是因为 HTML 不打算提供样式。HTML 旨在提供HTML 文档的结构，并且每个 HTML 元素都有预定义的含义。CSS 用于演示。
CSS 允许您执行诸如更改颜色、字体、大小、添加边框、背景图像、定位元素、添加边距、添加阴影、创建动画等操作。
但同样重要的是，它还允许您指定如何在不同类型的媒体上呈现您的内容。例如，您可以为屏幕创建一个样式表，为音频设备创建另一个样式表，为页面打印时创建另一个样式表。这使您可以精确控制每个 HTML 元素在不同媒体上的呈现方式。
CSS 还允许您为不同大小的屏幕创建不同的样式。因此，您可以为大屏幕（例如台式机/笔记本电脑）创建一个样式表，为中型（例如平板电脑）创建一个样式表，为小型（智能手机）创建另一个样式表。
无需针对每种屏幕尺寸、设备或媒体类型重写 HTML 文档。您只需编写一次 HTML 页面，然后根据需要创建样式表。
CSS 的工作原理
CSS 样式表由一系列语句组成。有两种语句：规则集和at-rules。
甲规则集（也称为规则）由一个选择器，随后一个声明块的。
像这样：
selector {declaration block}
因此，在下面的代码示例中，<h1>元素是选择器，其余的是声明块。
h1 { color: limegreen }
声明块以左花括号 ( {)开始，以右花括号 ( ) 结束}。它包含零个或多个用分号 ( )分隔的声明;。它还可以包含空格，因此，上面的语句也可以这样写：
h1 {
color: limegreen
}
这可以使您的样式表更具可读性，尤其是当您有很多声明时：
h1 {
color: limegreen;
font-family: 'Open Sans';
font-size: 2em;
margin: 5px;
... etc
}
您还可以包含多个选择器。如果你这样做，你必须用逗号分隔它们：
h1, h2, h3, h4, h5, h6 {
color: limegreen
}
上面的声明块一次设置了所有 6 级标题的颜色。这与这样做的效果相同：
h1 { color: limegreen }
h2 { color: limegreen }
h3 { color: limegreen }
h4 { color: limegreen }
h5 { color: limegreen }
h6 { color: limegreen }
不同之处在于第一个使用更少的代码，从而降低文件大小，并使您的网站更快。因此，尽可能组合选择器是个好主意。显然，您只能在每个元素的样式完全相同时执行此操作。
但是，您也可以这样做：
h1, h2, h3, h4, h5, h6 {
font-family: 'Museo Slab';
color: limegreen;
}
h1 {
color: orange;
}
上面的样式表将导致所有六个标题大小都设置为浅绿色，并使用一种名为“Museo Slab”的字体。但是，第二个声明块会将标题级别 1 的颜色覆盖为橙色。
因此，最终结果将是：所有标题都以“Museo Slab”字体呈现，<h1>元素为橙色，所有其他标题为柠檬绿色。
类和 ID
CSS 还允许您根据元素的class或ID应用样式。您可以创建自己的类和 ID，因此这提供了极大的灵活性。您创建的每个类或 ID 都可以有自己的样式。
类允许您根据其逻辑功能（或其他目的）对事物进行分组。
ID 允许您将唯一标识附加到其他元素无法拥有的元素。这不仅在使用 CSS 时很有用，而且在使用 JavaScript 和其他脚本语言时也很有用。
#logo { margin: 9px }
.search { width: 100% }
上面的样式表为 ID 为 的元素设置了边距属性logo。ID 选择器以散列 ( #) 开头，后跟 ID 值。
它还设置已分配类的所有元素的宽度属性search。类选择器以句点 ( .) 开头，后跟类值。
类也可以使用~=符号来引用。因此，以下两个语句具有相同的效果：
div.search { width: 100% }
div[class~=search] { width: 100% }
那么如何为这些元素分配一个类或 ID？
很高兴你问。在 HTML 文档中，它看起来像这样：
<div id="logo">
...
</div>
<div class="search">
...
</div>
在本例中，我使用了<div>元素，但您可以将 ID 和类分配给任何 HTML 元素。
请注意，一个 ID 只能分配给页面上的一个元素。这就是赋予元素唯一标识的原因（这在使用 JavaScript 时非常重要）。另一方面，类可以分配给任意数量的元素。
其他选择器
CSS 支持许多可能的选择器模式。这使您能够非常详细地了解您选择将样式应用到哪些元素。
考虑以下示例：
form input { color: green }
上面的代码选择所有<input>元素的后代<form>元素。
现在让我们稍微修改一下：
form.comments input { color: green }
上面的代码选择所有属于类的元素<input>的后代<form>元素comments。
让我们增加一些复杂性：
form.comments input[type="text"] { color: green }
上面的代码选择所有<input>具有元素type属性集的text值，但仅当该元素是一个的后代<form>元件一类的comments。只有通过该测试的元素才会被设置为绿色。
如您所见，您可以获得非常具体的信息。我们甚至还没有提到伪类！
如果您有兴趣，这里是CSS3 中选择器的官方列表。
HTML 和 CSS 如何协同工作 - 向 HTML 文档添加样式
在 HTML 中，可以通过三种方式向网页添加样式。
内联样式表
使用 globalstyle属性在元素级别应用样式。这样做只会影响您应用样式的元素。
下面是一个例子：
<p style="color:blue;">Content...</p>
嵌入式样式表
使用元素在页面级别应用样式（通过将元素放置在元素内）。这允许您将样式应用于该页面上的任何元素。您不需要修改每个元素，因为它只在页面顶部完成一次。这样做只会影响声明样式的页面。 <style> <head>
例子：
<head>
...
<style type="text/css">
h1 { color:limegreen; }
.big { font-size:200%; }
</style>
...
</head>
请注意，随着 HTML 规范的最新变化，您还可以通过使用属性在<head>元素外（即在 内<body>）使用此scoped标记。这将允许从父元素向下应用样式。
<style type="text/css" scoped>
h1 { color:limegreen; }
.big { font-size:200%; }
</style>
外部样式表
使用<link>元素链接到外部样式表（通过将元素放置在元素内<head>）。这允许您将样式应用于链接到样式表的任何页面上的任何元素。建议在整个网站上设置样式，因为每个页面都可以链接到相同的样式表。如果需要更新样式，只需在一个地方进行——外部样式表（而不是在每个页面中）。此方法允许您在不打开任何 HTML 文档的情况下更新整个网站的样式。
所以这段代码将放在<head>元素中：
<head>
...
<link rel="stylesheet" href="html-styles.css">
...
</head>
样式表文件（在这种情况下我们称之为html-styles.css）看起来像这样：
.sweet {
color range;
font-size:1.5em;
}
如您所见，看不到 HTML 标记。纯粹的 CSS 代码（毕竟，它是一个 .css 文件）。
这实际上是我们在页面顶部的 HTML 编辑器中链接到的外部样式表。在实践中，您可以包含更多样式——如果您愿意，可以为页面上的每个 HTML 元素添加样式。
您还可以使用元素@import内的规则<style>或从另一个外部样式表中导入来自外部样式表的样式。
像这样：
<style type="text/css" scoped>
@import url('html-styles.css');
</style>
虽然这种方法可能有它的用处，但它通常不是推荐的方法，主要是出于性能原因。通常最好使用该<link>方法。 |
|
置顶卡
变色卡
千斤顶
京公网安备11010502050698号