掌握 CSS 选择器，打造惊艳的网页设计

介绍

欢迎来到 CSS 世界！

在这个实验中，我们将扮演 Alex，一位初出茅庐的网页开发者，任务是为一款新的宠物服务创建一个引人入胜且时尚的网站。目标是展示所提供的服务，介绍团队，并为潜在客户提供便捷的联系方式。故事背景设定在一个繁华的城市，宠物拥有率正在上升，对高质量宠物护理服务的需求也在激增。Alex 的使命是通过使用基本的 CSS 技术和选择器，设计一个在竞争激烈的市场中脱颖而出的网站，为用户提供视觉吸引力和友好的体验。

CSS 动画效果演示

接下来，我们将通过 5 个实验来完成 "Pet's House" 的 CSS 设计。

CSS 选择器

我们打开一个网页，按下键盘上的 F12 打开开发者工具，可以看到两个部分：Elements（元素）和 Styles（样式）。

开发者工具中的元素和样式

如果你学习过 HTML，你应该知道元素是用于页面布局的不同 HTML 标签，而样式则是页面的 CSS。

我们可以使用 CSS 来改变 HTML 元素的颜色、大小、形状等，甚至可以为它们添加动画。

了解了 CSS 的用途后，我们需要思考一个问题：页面中有这么多元素，如何为指定位置的元素添加特定的样式呢？

我们可以使用 CSS 选择器来选择我们想要设置样式的元素，然后使用 CSS 属性来指定我们想要应用的样式。

让我们从最基本的 CSS 选择器开始。

CSS 选择器是 CSS 规则的第一部分。它是一种元素和其他术语的模式，用于告诉浏览器应该选择哪些 HTML 元素，以便将规则内的 CSS 属性值应用到这些元素上。被选择器选中的元素称为选择器的主体。

CSS 选择器有很多种，最基本的有：

类型选择器（Type selectors）
类选择器（Class selectors）
ID 选择器（ID selectors）
后代选择器（Descendant Selector）
通用选择器（Universal Selector）

类型选择器

如果你需要为页面中的某一类标签设置统一的样式，你应该使用标签选择器，标签选择器的关键字以标签名命名。

例如，如果你想将页面中所有 <p> 标签的字体颜色设置为红色，可以使用以下 CSS 规则：

CSS 类型选择器示例

类选择器

在定义类选择器时，必须以一个点号和一个类名来定义，而在使用该类选择器时，必须在使用该类的元素标签中添加 class="类名" 属性（不带点号），以表示该标签使用了指定的类选择器。

例如，如果你想将 class="text-paragraph" 的 HTML 元素的字体大小设置为 50 像素，可以使用以下 CSS 规则：

CSS 类选择器示例

ID 选择器

ID 选择器为标记了特定 ID 的 HTML 元素指定特定的样式。

在定义 ID 选择器时，必须以 # 符号和 ID 名称来定义选择器，而在使用 ID 选择器时，必须在 HTML 标签元素中添加 id="ID 名称" 属性（不带 # 符号），以指定该 HTML 元素的 ID，该 ID 在 HTML 文档中是唯一的。

例如，如果你想将 id="list-option" 的 HTML 元素的字体颜色设置为蓝色，可以使用以下 CSS 规则：

ID 选择器 CSS 示例

后代选择器

后代选择器选择某个标签内的所有指定标签元素，包括子元素和其他后代元素。

在使用后代选择器时，父标签名称和后代标签名称之间必须用空格分隔，以标识某个标签内的后代元素。

例如，我们为 <div> 元素的子元素 <span> 设置文本颜色为水绿色。

后代选择器示例

通用选择器

通用选择器选择 HTML 文档中的所有元素。在使用通用选择器时，必须使用 * 符号。

例如，让我们将所有元素的文本大小设置为 50 像素。

通用选择器示例

现在我们已经了解了如何使用选择器，接下来让我们学习如何使用不同的样式属性。

背景颜色与文本颜色

正如你所看到的，页面的不同部分有不同的背景颜色。在 CSS 中，你可以使用 background-color 来设置元素的背景颜色。

在宠物网站中，页头（header）、关于部分（about section）、联系部分（contact section）和页脚（footer）的背景颜色分别为 rgb(233, 174, 87) 和 rgb(239, 206, 157)，而关于部分、联系部分和页脚的字体颜色为 #fff，因此我们需要设置以下背景和字体颜色。

background-color 用于设置背景颜色。
color 用于设置字体颜色。

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

高度与宽度

现在你可以看到一些元素太大了，比如 logo，我们使用 height 来设置元素的高度，使用 width 来设置元素的宽度。

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

max-width CSS 属性用于设置元素的最大宽度。它防止 width 属性的使用值超过 max-width 指定的值。

max-height CSS 属性用于设置元素的最大高度。它防止 height 属性的使用值超过 max-height 指定的值。

列表样式

无序列表的默认样式是每个列表项前面有一个圆点，我们使用 list-style 属性来移除列表项前面的圆点。

ul {
  list-style: none;
}

文本属性

文本装饰

a 元素默认带有下划线，我们使用 text-decoration 属性来移除下划线。

a {
  color: grey;
  text-decoration: none;
}

文本转换

宠物页面的导航栏、页脚以及每个区域的标题都是大写的，我们使用 text-transform 属性来改变文本的大小写。

text-transform CSS 属性用于指定如何将元素的文本进行大小写转换。它可以用来使文本显示为全大写、全小写或每个单词首字母大写。

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

文本大小

我们使用 font-size 来改变文本的大小，正如你所看到的，文本的大小与宠物页面上的大小不同。

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

在设置字体大小时，我们使用了不同的单位。通常有以下五种单位：

单位	类型	描述
px	绝对单位	固定大小的单位
em	相对单位	基于父元素的字体大小计算
rem	相对单位	基于根元素的字体大小计算
vw	相对单位	视口宽度的百分比
vh	相对单位	视口高度的百分比

文本对齐

在宠物页面中，为了使标题文本居中，我们可以使用 text-align 属性来设置文本显示的位置。

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

文本粗细

font-weight 属性用于设置文本的粗细。

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

字母间距

在宠物页面上，我们可以观察到字符之间有一定的间距。通过使用 letter-spacing 属性，我们可以设置文本字符之间的间距。

letter-spacing CSS 属性用于设置文本字符之间的水平间距行为。该值会在渲染文本时添加到字符之间的自然间距中。

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

总结

在本实验中，你和 Alex 一起踏上了为“Pet's House”创建网站的旅程。你设置了项目工作区，应用了基本的 CSS 样式，并通过尝试各种 CSS 选择器来增强网站的导航功能。通过这些步骤，你已经获得了 CSS 基础知识和选择器的实践经验，这些是任何有抱负的 Web 开发者必备的关键技能。本实验为你未来项目中探索更高级的 Web 开发概念和技术奠定了基础。

CSS 基础与选择器

介绍