[前端系列第2弹]CSS入门教程：从零开始学习Web页面的样式和布局

在这篇文章中，我将介绍CSS的基本概念、语法、选择器、属性和值，以及如何使用它们来定义Web页面的外观和布局。还将给一些简单而实用的例子，可以跟着我一步一步地编写自己的CSS样式表。

目录

一、什么是CSS

二、CSS的语法

三、CSS的选择器

四、CSS的属性和值

（一）颜色

（二）字体 

（三）尺寸 

（四）定位 

（五）背景 

（六）变换 

（七）过渡 

（八）动画 

---

一、什么是CSS

CSS是一种用于描述Web页面外观和布局的语言，它可以控制元素的颜色、字体、大小、位置、边距、背景、动画等属性。CSS可以通过三种方式引入Web页面：内联样式、内部样式表和外部样式表。内联样式是在HTML元素中使用style属性直接定义样式，如

This is a paragraph.

。内部样式表是在HTML文档中使用

外部样式表是在一个单独的CSS文件中定义样式，然后在HTML文档中使用标签引入，如。外部样式表的优点是可以实现样式的复用和维护，也可以利用缓存提高加载速度。一个简单的CSS文件如下：

/* This is a comment */
body {
  font-family: Arial, sans-serif;
  background-color: lightgray;
}

p {
  color: black;
  font-size: 16px;
}

img {
  width: 300px;
  height: auto;
}

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

a:hover {
  color: red;
}

二、CSS的语法

CSS的语法由以下几个部分组成：

• 规则集（rule set）：这是一组用于描述一个或多个元素样式的规则，它由选择器（selector）和声明块（declaration block）组成。
• 选择器（selector）：这是用于指定要应用样式的元素或元素组的标识符，它可以是元素名、类名、ID名、属性名或伪类等。
• 声明块（declaration block）：这是用于定义具体样式的一对大括号，它包含一个或多个声明（declaration）。
• 声明（declaration）：这是用于指定一个属性和一个值的语句，它由属性名（property name）、冒号（:）和属性值（property value）组成。
• 属性名（property name）：这是用于表示要修改的元素特征的标识符，如color, font-size, margin等。
• 属性值（property value）：这是用于表示要赋予属性名的具体数值或关键字，如red, 16px, auto等。

一个规则集的示例如下：

p {
  color: red;
  font-size: 16px;
}

三、CSS的选择器

CSS有很多种类的选择器，它们可以分为以下几类：

• 基本选择器（basic selector）：这类选择器用于根据元素的名称、类名、ID名或通配符来选择元素，如p, .class, #id, *。
• 属性选择器（attribute selector）：这类选择器用于根据元素的属性或属性值来选择元素，如[attr], [attr=value], [attr~=value], [attr|=value]。
• 伪类选择器（pseudo-class selector）：这类选择器用于根据元素的状态或位置来选择元素，如:link, :hover, :first-child, :nth-child(n)。
• 伪元素选择器（pseudo-element selector）：这类选择器用于根据元素的部分或内容来选择元素，如::before, ::after, ::first-line, ::first-letter。
• 组合选择器（combinator selector）：这类选择器用于根据多个条件或关系来组合选择元素，如A B, A + B, A > B, A ~ B。
• 多重选择器（multiple selector）：这类选择器用于同时应用多个选择器到同一组元素，如A, B, C。

以下是一些常用的CSS选择器的示例：

• p 选择所有p元素。
• .class 选择所有class属性值为class的元素。
• #id 选择所有id属性值为id的元素。
• * 选择所有元素。
• [attr] 选择所有有attr属性的元素。
• [attr=value] 选择所有attr属性值为value的元素。
• [attr~=value] 选择所有attr属性值包含value的元素，value必须是一个完整的单词，以空格分隔。
• [attr|=value] 选择所有attr属性值以value开头的元素，value可以是一个完整的单词或一个连字符（-）分隔的前缀。
• :link 选择所有未访问过的链接元素，通常是a元素。
• :visited 选择所有已访问过的链接元素，通常是a元素。
• :hover 选择所有鼠标悬停在上面的元素。
• :active 选择所有被激活或点击的元素。
• :focus 选择所有获得焦点的元素，通常是表单控件或超链接。
• :first-child 选择所有作为父元素第一个子元素的元素。
• :last-child 选择所有作为父元素最后一个子元素的元素。
• :nth-child(n) 选择所有作为父元素第n个子元素的元素，n可以是一个正整数、负整数、奇数（odd）、偶数（even）或公式（an+b）。
• ::before 在每个选中的元素之前插入内容，内容由content属性指定，通常用于添加装饰性的内容。注意要使用双冒号（::）而不是单冒号（:）来区分伪类和伪元素。
• ::after 在每个选中的元素之后插入内容，内容由content属性指定，通常用于添加装饰性的内容。注意要使用双冒号（::）而不是单冒号（:）来区分伪类和伪元素。

四、CSS的属性和值

CSS有很多种类的属性和值，它们可以分为以下几类：

（一）颜色

• 颜色（color）：这类属性用于设置元素的前景色（如文本、边框等）或背景色，它们可以使用颜色名（如red, green, blue等）、十六进制值（如#FF0000, #00FF00, #0000FF等）、RGB值（如rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)等。一个颜色属性的示例如下：

p {
  color: red; /* 文本颜色为红色 */
  background-color: rgba(0, 255, 0, 0.5); /* 背景颜色为半透明的绿色 */
}

（二）字体 

• 字体（font）：这类属性用于设置元素的字体样式，它们可以使用字体名（如Arial, Times New Roman, Courier New等）、字体系列（如serif, sans-serif, monospace等）、字体大小（如12px, 1em, 150%等）、字体粗细（如normal, bold, lighter等）、字体样式（如normal, italic, oblique等）或字体变形（如normal, small-caps等）来表示。一个字体属性的示例如下：

p {
  font-family: Arial, sans-serif; /* 字体为Arial或其他无衬线字体 */
  font-size: 16px; /* 字号为16像素 */
  font-weight: bold; /* 字体为粗体 */
  font-style: italic; /* 字体为斜体 */
}

（三）尺寸 

• 尺寸（dimension）：这类属性用于设置元素的宽度、高度、边框、内边距或外边距，它们可以使用像素（px）、百分比（%）、相对长度单位（如em, rem等）或绝对长度单位（如cm, in等）来表示。一个尺寸属性的示例如下：

p {
  width: 300px; /* 宽度为300像素 */
  height: auto; /* 高度自动适应内容 */
  border: solid black; /* 边框为实线黑色 */
  padding: 10px; /* 内边距为10像素 */
  margin: auto; /* 外边距自动居中 */
}

（四）定位 

• 定位（positioning）：这类属性用于设置元素的位置和显示方式，它们可以使用定位方式（如static, relative, absolute, fixed, sticky等）、偏移量（如top, right, bottom, left等）、显示模式（如block, inline, inline-block, none等）或浮动方式（如float, clear等）来表示。一个定位属性的示例如下：

p {
  position: relative; /* 相对于原来的位置进行偏移 */
  top: 20px; /* 向下偏移20像素 */
  left: 50px; /* 向右偏移50像素 */
  display: inline-block; /* 以行内块的方式显示 */
  float: right; /* 浮动到右边 */
}

（五）背景 

• 背景（background）：这类属性用于设置元素的背景颜色、图片、重复方式、位置、大小、裁剪或附着方式，它们可以使用背景颜色（如background-color）、背景图片（如background-image）、背景重复（如background-repeat）、背景位置（如background-position）、背景大小（如background-size）、背景裁剪（如background-clip）、背景附着（如background-attachment）等来表示。一个背景属性的示例如下：

p {
  background-color: yellow; /* 背景颜色为黄色 */
  background-image: url("image.jpg"); /* 背景图片为image.jpg */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中显示 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-clip: content-box; /* 背景图片只显示在内容区域 */
  background-attachment: fixed; /* 背景图片固定不随滚动条移动 */
}

（六）变换 

• 变换（transform）：这类属性用于设置元素的变换效果，如旋转、缩放、倾斜或移动，它们可以使用变换函数（如rotate, scale, skew, translate等）来表示。一个变换属性的示例如下：

p {
  transform: rotate(45deg) scale(2) skew(-30deg) translate(100px, -50px); /* 将元素旋转45度，放大2倍，水平倾斜-30度，向右移动100像素，向上移动50像素 */
}

（七）过渡 

• 过渡（transition）：这类属性用于设置元素在不同状态之间切换时的过渡效果，如过渡属性、过渡时间、过渡延迟或过渡速度曲线，它们可以使用过渡属性（如transition-property）、过渡时间（如transition-duration）、过渡延迟（如transition-delay）或过渡速度曲线（如transition-timing-function）来表示。一个过渡属性的示例如下：

p {
  transition-property: color, transform; /* 过渡颜色和变换两个属性 */
  transition-duration: 1s, 2s; /* 过渡时间分别为1秒和2秒 */
  transition-delay: 0s, 0.5s; /* 过渡延迟分别为0秒和0.5秒 */
  transition-timing-function: linear, ease-in-out; /* 过渡速度曲线分别为线性和先加速后减速 */
}

p:hover {
  color: green; /* 鼠标悬停时颜色变为绿色 */
  transform: rotate(90deg); /* 鼠标悬停时旋转90度 */
}

（八）动画 

• 动画（animation）：这类属性用于设置元素的动画效果，如动画名称、动画时间、动画延迟、动画次数、动画方向、动画填充模式或动画速度曲线，它们可以使用动画名称（如animation-name）、动画时间（如animation-duration）、动画延迟（如animation-delay）、动画次数（如animation-iteration-count）、动画方向（如animation-direction）、动画填充模式（如animation-fill-mode）或动画速度曲线（如animation-timing-function）来表示。一个动画属性的示例如下：

p {
  animation-name: bounce; /* 动画名称为bounce */
  animation-duration: 3s; /* 动画时间为3秒 */
  animation-delay: 1s; /* 动画延迟为1秒 */
  animation-iteration-count: infinite; /* 动画无限次重复 */
  animation-direction: alternate; /* 动画方向为交替 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的状态 */
  animation-timing-function: ease-in-out; /* 动画速度曲线为先加速后减速 */
}

@keyframes bounce { /* 定义bounce动画的关键帧 */
  0% { transform: translateY(0); } /* 开始时元素不移动 */
  50% { transform: translateY(-100px); } /* 中间时元素向上移动100像素 */
  100% { transform: translateY(0); } /* 结束时元素回到原来的位置 */
}

---

以上就是本文的全部内容啦，快快学习起来吧~