CSS 基础与选择器

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

欢迎来到 CSS 世界!

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

CSS 动画效果演示

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicConceptsGroup -.-> css/properties("`Properties`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/lists_and_tables("`Lists and Tables`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-289074{{"`CSS 基础与选择器`"}} css/properties -.-> lab-289074{{"`CSS 基础与选择器`"}} css/colors -.-> lab-289074{{"`CSS 基础与选择器`"}} css/fonts -.-> lab-289074{{"`CSS 基础与选择器`"}} css/text_styling -.-> lab-289074{{"`CSS 基础与选择器`"}} css/width_and_height -.-> lab-289074{{"`CSS 基础与选择器`"}} css/backgrounds -.-> lab-289074{{"`CSS 基础与选择器`"}} css/lists_and_tables -.-> lab-289074{{"`CSS 基础与选择器`"}} css/pseudo_classes -.-> lab-289074{{"`CSS 基础与选择器`"}} end

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 教程