MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS语法详解：选择器、属性和值的基本结构

2023-06-052.2k 阅读

CSS 语法基础：选择器、属性和值

在前端开发中，CSS（层叠样式表）是用于描述网页外观和格式化的语言。CSS 语法主要由选择器、属性和值三部分构成。理解这三个部分的基本结构以及它们如何协同工作，对于掌握 CSS 并创建精美的网页设计至关重要。

选择器

选择器是 CSS 规则的起始部分，它用于指定要应用样式的 HTML 元素。通过选择器，我们可以精准地选择网页中的元素，然后为其应用相应的样式。选择器种类繁多，下面将详细介绍几种常见的选择器类型。

元素选择器

元素选择器是最基本的选择器类型，它通过 HTML 元素标签名来选择元素。例如，要为所有的 <p> 元素设置字体颜色为红色，可以这样写：

p {
  color: red;
}

在上述代码中，p 就是元素选择器，它选中了网页中所有的 <p> 段落元素，并将 color 属性的值设为 red，从而使段落文本显示为红色。

类选择器

类选择器允许我们为具有相同类名的一组元素应用样式。在 HTML 中，通过 class 属性来指定元素的类名。在 CSS 中，类选择器以点号（.）开头，后面跟着类名。例如，假设有一个按钮类 .btn，我们希望为所有具有这个类的按钮设置背景颜色为蓝色：

<button class="btn">点击我</button>

.btn {
  background - color: blue;
}

这样，所有 class 属性值为 btn 的按钮都会显示蓝色背景。类选择器的优势在于可以将相同的样式应用到多个不同类型的元素上。比如，我们不仅可以为 <button> 元素使用 .btn 类，还可以为 <a> 元素添加同样的类，使其具有相同的样式。

ID 选择器

ID 选择器用于选择具有特定 id 属性值的单个元素。在 HTML 中，id 属性的值在整个文档中必须是唯一的。在 CSS 中，ID 选择器以井号（#）开头，后面跟着 id 名。例如，假设有一个 id 为 main - content 的 <div> 元素，我们希望为它设置宽度为 800 像素：

<div id="main - content">
  这里是主要内容区域
</div>

#main - content {
  width: 800px;
}

由于 id 的唯一性，ID 选择器通常用于为页面中独一无二的元素设置特定样式，如页面的导航栏、页脚等。

后代选择器

后代选择器用于选择某个元素的后代元素。语法是将两个选择器用空格隔开，前面的选择器表示祖先元素，后面的表示后代元素。例如，要选择 <div> 元素内的所有 <li> 元素，可以这样写：

<div>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

div li {
  color: green;
}

上述代码会使 <div> 元素内的所有 <li> 列表项文本颜色变为绿色，而其他不在该 <div> 内的 <li> 元素不受影响。

子选择器

子选择器与后代选择器类似，但它只选择直接子元素。子选择器使用大于号（>）来连接两个选择器。例如，只选择 <ul> 元素的直接子元素 <li>：

<ul>
  <li>直接子项 1</li>
  <li>直接子项 2</li>
  <div>
    <li>非直接子项</li>
  </div>
</ul>

ul > li {
  background - color: yellow;
}

在这个例子中，只有 <ul> 的直接子元素 <li> 会有黄色背景，而 <div> 内嵌套的 <li> 元素不会应用该样式。

相邻兄弟选择器

相邻兄弟选择器用于选择紧接在另一个元素后的兄弟元素，而且它们必须有相同的父元素。相邻兄弟选择器使用加号（+）连接两个选择器。例如，假设我们有一个标题 <h1> 后面紧跟着一个段落 <p>，我们希望为这个紧跟的 <p> 元素设置特殊样式：

<h1>标题</h1>
<p>紧跟在标题后的段落</p>
<p>另一个段落</p>

h1 + p {
  font - style: italic;
}

这样，紧跟在 <h1> 后面的第一个 <p> 元素的文本会显示为斜体，而第二个 <p> 元素不受影响。

通用选择器

通用选择器用星号（*）表示，它可以选择文档中的所有元素。虽然通用选择器使用起来很方便，但由于它会选中所有元素，可能会影响性能，因此应谨慎使用。例如，要将文档中所有元素的边距和内边距都设为 0：

* {
  margin: 0;
  padding: 0;
}

上述代码会将所有 HTML 元素的外边距和内边距都清零，这在一些需要重置默认样式的情况下很有用。

群组选择器

群组选择器允许我们将相同的样式应用到多个不同的选择器上。通过逗号（, ）将多个选择器分隔开。例如，我们想让 <h1>、<h2> 和 <p> 元素都具有相同的字体颜色：

h1, h2, p {
  color: purple;
}

这样，<h1>、<h2> 和 <p> 元素的文本都会显示为紫色。群组选择器在需要对多种不同元素应用相同样式时非常便捷，可以减少重复的代码。

属性选择器

属性选择器根据元素的属性及属性值来选择元素。常见的属性选择器有以下几种形式：

  1. 选择具有指定属性的元素：例如，要选择所有具有 title 属性的元素，可以这样写：
[title] {
  border: 1px solid black;
}

这样，所有带有 title 属性的元素都会有一个 1 像素宽的黑色边框。 2. 选择具有指定属性且属性值等于某个值的元素：比如，要选择 type 属性值为 submit 的 <input> 元素：

<input type="submit" value="提交">
<input type="text" value="输入框">

input[type="submit"] {
  background - color: green;
}

在上述代码中，只有 type 属性值为 submit 的 <input> 元素会有绿色背景。 3. 选择具有指定属性且属性值包含某个单词的元素：例如，选择 class 属性值中包含 menu 单词的元素：

<div class="main - menu">主菜单</div>
<div class="sub - menu">子菜单</div>
<div class="content">内容区域</div>

[class*="menu"] {
  color: blue;
}

此时，class 属性值包含 menu 单词的 <div> 元素文本会显示为蓝色。

属性

属性是 CSS 规则中定义元素样式特征的部分。每个属性都有其特定的含义和用途，用于控制元素的外观、布局等方面。

文本相关属性

  1. color：用于设置文本的颜色。可以使用颜色关键字（如 red、blue）、十六进制值（如 #FF0000 表示红色）或 RGB 值（如 rgb(255, 0, 0) 也表示红色）来指定颜色。例如：
p {
  color: #333333;
}

上述代码将 <p> 元素的文本颜色设为深灰色。 2. font - size：设置文本的字体大小。常用的单位有像素（px）、百分比（%）、em 和 rem。例如：

h1 {
  font - size: 36px;
}

这里将 <h1> 标题的字体大小设为 36 像素。如果使用百分比或 em 单位，字体大小会相对于父元素的字体大小进行计算。而 rem 单位是相对于根元素（通常是 <html> 元素）的字体大小计算。 3. font - family：指定文本使用的字体族。可以列出多个字体，浏览器会按顺序选择可用的字体。例如：

body {
  font - family: Arial, sans - serif;
}

上述代码表示首选 Arial 字体，如果 Arial 不可用，则选择系统的无衬线字体。 4. text - align：用于设置文本的水平对齐方式，取值有 left（左对齐）、right（右对齐）、center（居中对齐）和 justify（两端对齐）。例如：

p {
  text - align: center;
}

这样，<p> 元素内的文本会居中显示。 5. text - decoration：用于给文本添加装饰效果，如下划线、删除线等。常见取值有 underline（下划线）、overline（上划线）、line - through（删除线）和 none（无装饰）。例如：

a {
  text - decoration: none;
}

这会去掉 <a> 链接元素的默认下划线。

背景相关属性

  1. background - color：设置元素的背景颜色，用法与 color 属性类似。例如：
body {
  background - color: lightblue;
}

上述代码将页面的背景颜色设为浅蓝色。 2. background - image：用于设置元素的背景图像。可以使用 url() 函数指定图像的路径。例如：

div {
  background - image: url('image.jpg');
}

这会将 image.jpg 图像设置为 <div> 元素的背景。 3. background - repeat：控制背景图像的重复方式。取值有 repeat（默认，沿水平和垂直方向重复）、repeat - x（仅水平方向重复）、repeat - y（仅垂直方向重复）和 no - repeat（不重复）。例如：

body {
  background - image: url('pattern.png');
  background - repeat: repeat - x;
}

上述代码会使 pattern.png 图像仅在水平方向重复作为页面背景。 4. background - position：指定背景图像的位置。可以使用关键字（如 top left、center 等）或具体的长度值（如 50px 100px）来定位。例如：

div {
  background - image: url('logo.png');
  background - position: center;
}

这会将 logo.png 图像居中显示在 <div> 元素内。

边框相关属性

  1. border - width：设置元素边框的宽度。可以分别设置上、右、下、左边框的宽度，也可以使用一个值统一设置所有边框宽度。例如：
div {
  border - width: 1px;
}

或者分别设置：

div {
  border - top - width: 2px;
  border - right - width: 1px;
  border - bottom - width: 2px;
  border - left - width: 1px;
}
  1. border - style：定义边框的样式，常见取值有 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。例如：
p {
  border - style: solid;
}
  1. border - color：设置边框的颜色，用法与 color 属性类似。例如：
div {
  border - color: red;
}

也可以将边框的宽度、样式和颜色合并在一起设置，例如：

div {
  border: 1px solid blue;
}

这表示为 <div> 元素设置 1 像素宽的蓝色实线边框。

盒模型相关属性

  1. width 和 height：分别用于设置元素的宽度和高度。可以使用像素、百分比等单位。例如：
div {
  width: 200px;
  height: 100px;
}
  1. margin：设置元素的外边距，用于控制元素与其他元素之间的距离。与边框宽度类似，可以分别设置上、右、下、左外边距，也可以使用一个值统一设置所有外边距。例如：
div {
  margin: 10px;
}

或者分别设置：

div {
  margin - top: 20px;
  margin - right: 10px;
  margin - bottom: 20px;
  margin - left: 10px;
}
  1. padding：设置元素的内边距，用于控制元素内容与边框之间的距离。同样可以分别设置上、右、下、左内边距或统一设置。例如：
p {
  padding: 5px;
}
  1. box - sizing：该属性用于控制盒模型的计算方式。取值有 content - box（默认，宽度和高度仅包括内容区域）和 border - box（宽度和高度包括内容、内边距和边框）。例如，当使用 border - box 时：
div {
  box - sizing: border - box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

此时，<div> 元素的总宽度仍然是 200 像素，包括了 10 像素的内边距和 1 像素的边框。

值

值是与属性相关联的具体设定，用于确定属性的具体表现。不同的属性有不同类型的值，以下是一些常见的值类型。

颜色值

  1. 颜色关键字：如 red、blue、green 等，这些是预定义的颜色名称，简单直观，但数量有限。例如：
h1 {
  color: yellow;
}
  1. 十六进制值：以 # 开头，后面跟着 6 位十六进制数字（如 #FF0000 表示红色）。这种表示方法可以精确指定大量颜色。例如：
p {
  color: #00FF00;
}
  1. RGB 值：使用 rgb() 函数，括号内分别表示红、绿、蓝三种颜色通道的值，取值范围是 0 - 255。例如：
div {
  background - color: rgb(128, 128, 128);
}
  1. RGBA 值：是 RGB 值的扩展，增加了透明度（A）通道，取值范围是 0（完全透明）到 1（完全不透明）。例如：
button {
  background - color: rgba(0, 128, 255, 0.5);
}

这会使按钮背景颜色为半透明的蓝色。

长度值

  1. 绝对长度单位：
    • 像素（px）：是最常用的绝对长度单位，在屏幕上具有固定的物理尺寸。例如：
img {
  width: 300px;
}

- **英寸（`in`）**、**厘米（`cm`）**、**毫米（`mm`）**：这些单位基于真实世界的度量，但在网页开发中使用相对较少，因为不同设备的屏幕分辨率不同。例如：

div {
  width: 5cm;
}
  1. 相对长度单位：
    • 百分比（%）：相对于父元素的相应属性值计算。例如，如果一个 <div> 元素的父元素宽度是 400 像素，设置该 <div> 的宽度为 50%，则其宽度为 200 像素。
div {
  width: 50%;
}

- **`em`**：相对于当前元素的字体大小。如果当前元素字体大小为 16 像素，设置 `padding: 1em`，则内边距为 16 像素。如果在子元素中再次使用 `em`，则是相对于子元素自身的字体大小。

p {
  font - size: 16px;
  padding: 1em;
}

- **`rem`**：相对于根元素（通常是 `<html>` 元素）的字体大小。这使得在整个文档中保持统一的相对尺寸更容易。例如，根元素字体大小为 10 像素，设置 `h1` 的字体大小为 `2rem`，则 `h1` 的字体大小为 20 像素。

html {
  font - size: 10px;
}
h1 {
  font - size: 2rem;
}

关键字值

许多属性使用关键字值来表示特定的状态或效果。例如，display 属性常用的关键字值有 block（块级元素显示）、inline（行内元素显示）、inline - block（行内块元素显示）和 none（不显示元素）。

span {
  display: inline - block;
}

在上述代码中，<span> 元素原本是行内元素，通过设置 display: inline - block，使其具有行内元素不换行的特点，同时又可以设置宽度、高度等块级元素的属性。

又如，float 属性的关键字值 left、right 和 none，用于控制元素的浮动方向。

img {
  float: left;
}

这会使图像向左浮动，文本会环绕在图像右侧。

函数值

一些属性使用函数来生成值。例如，transform 属性常使用函数来实现元素的变换效果。

  1. translate() 函数：用于移动元素。例如，将一个 <div> 元素向右移动 50 像素，向下移动 30 像素：
div {
  transform: translate(50px, 30px);
}
  1. rotate() 函数：用于旋转元素。例如，将一个按钮顺时针旋转 45 度：
button {
  transform: rotate(45deg);
}
  1. scale() 函数：用于缩放元素。例如，将一个图像放大 1.5 倍：
img {
  transform: scale(1.5);
}

通过深入理解 CSS 语法中的选择器、属性和值的基本结构，并结合实际的代码示例进行练习，开发者可以更加熟练地运用 CSS 来创建出美观、交互性强的网页界面。无论是简单的文本样式调整，还是复杂的布局设计和动画效果实现，扎实的 CSS 基础都是必不可少的。在实际项目中，不断探索和尝试不同的选择器组合、属性设置以及值的搭配，能够创造出独特而精彩的网页视觉效果。同时，随着 CSS 技术的不断发展，新的选择器、属性和值也在不断涌现，开发者需要持续学习和关注，以跟上前端开发的潮流。