CSS

文集信息
目录大纲
最新文档
知识宇宙

文集详情

文集导读

1. CSS 基础知识 CSS 基础知识详解：代码实践与内容解析引言在绚丽多彩的互联网世界中，网页不仅是信息的载体，更是视觉艺术的展现。CSS（Cascading Style Sheets，层叠样式表）是赋予网页视觉生命力的关键技术。它如同网页的化妆师，负责控制网页元素的外观和布局，将枯燥的HTML内容转化为吸引人的视觉体验。本文系统介绍CSS基础知识，通过丰富的代码实践和详细的内容解析，帮助读者快速掌握CSS的核心概念，为构建美观、专业的网页打下坚实基础。 1. CSS的基本概念 1.1 CSS的作用 CSS的核心作用是将网页的内容（HTML）与表现（样式）分离。开发者可以专注于HTML结构的设计，而将所有关于外观的控制交给CSS。这种分离带来诸多好处：易于维护：修改样式只需更改CSS文件，无需改动HTML结构。提高效率：多个网页可以共享同一个CSS文件，实现样式的统一和复用。更好的可访问性：内容与表现分离有助于屏幕阅读器等辅助技术更好地解析网页内容。更快的加载速度： CSS文件通常比内联样式更小，并且可以被浏览器缓存，从而加快网页加载速度。 1.2 CSS的语法结构 CSS规则由两个主要部分组成：选择器（Selector）和声明块（Declaration Block）。选择器 { 属性名: 属性值; 属性名: 属性值; ...

1. CSS 基础知识

CSS 基础知识详解：代码实践与内容解析

引言

在绚丽多彩的互联网世界中，网页不仅是信息的载体，更是视觉艺术的展现。CSS（Cascading Style Sheets，层叠样式表）是赋予网页视觉生命力的关键技术。它如同网页的化妆师，负责控制网页元素的外观和布局，将枯燥的HTML内容转化为吸引人的视觉体验。

本文系统介绍CSS基础知识，通过丰富的代码实践和详细的内容解析，帮助读者快速掌握CSS的核心概念，为构建美观、专业的网页打下坚实基础。

1. CSS的基本概念

1.1 CSS的作用

CSS的核心作用是将网页的内容（HTML）与表现（样式）分离。开发者可以专注于HTML结构的设计，而将所有关于外观的控制交给CSS。这种分离带来诸多好处：

易于维护：修改样式只需更改CSS文件，无需改动HTML结构。
提高效率：多个网页可以共享同一个CSS文件，实现样式的统一和复用。
更好的可访问性：内容与表现分离有助于屏幕阅读器等辅助技术更好地解析网页内容。
更快的加载速度：CSS文件通常比内联样式更小，并且可以被浏览器缓存，从而加快网页加载速度。

1.2 CSS的语法结构

CSS规则由两个主要部分组成：选择器（Selector） 和 声明块（Declaration Block）。


选择器 {
  属性名: 属性值;
  属性名: 属性值;
  ...
}

选择器：用于指定要应用样式的HTML元素。例如，p 选择器选择所有 <p> 标签，.container 选择器选择所有 class="container" 的元素。
声明块：由一对花括号 {} 包围，包含一个或多个声明。
声明：由 属性名 和 属性值 组成，中间用冒号 : 分隔，末尾用分号 ; 结束。例如，color: blue; 将文本颜色设置为蓝色。

代码实践1：第一个CSS规则


<!DOCTYPE html>
<html>
<head>
<title>我的第一个CSS示例</title>
<style>
  p {
    color: red; /* 设置段落文本颜色为红色 */
    font-size: 16px; /* 设置段落字体大小为16像素 */
  }
</style>
</head>
<body>
<h1>欢迎来到CSS世界</h1>
<p>这是一个段落，使用了CSS样式。</p>
</body>
</html>

代码详解：

<style> 标签用于在HTML文档中嵌入CSS代码。
p { ... } 是一个CSS规则，选择器是 p，表示选择所有 <p> 元素。
color: red; 和 font-size: 16px; 是声明，分别设置了 color（文本颜色）和 font-size（字体大小）属性的值。
浏览器会解析这段CSS代码，并将样式应用到页面中的所有 <p> 元素上。

2. CSS选择器

选择器是CSS的核心，它决定了哪些HTML元素将被应用样式。CSS提供了多种选择器，可以根据元素类型、属性、ID、类名等多种条件来选择元素。

2.1 元素选择器

元素选择器直接使用HTML元素名称作为选择器，选中所有该类型的元素。

语法： 元素名称

代码实践2：元素选择器


h1 {
  color: green; /* 设置所有 <h1> 标题颜色为绿色 */
}
ul {
  list-style-type: none; /* 移除所有 <ul> 列表的默认项目符号 */
}

2.2 类选择器

类选择器允许根据HTML元素的 class 属性值来选择元素。类名以 . 开头。

语法： .类名

代码实践3：类选择器


<p class="highlight">这段文字将被高亮显示。</p>
<div class="container">这是一个容器。</div>


.highlight {
  background-color: yellow; /* 设置类名为highlight的元素背景色为黄色 */
  font-weight: bold; /* 设置类名为highlight的元素字体加粗 */
}
.container {
  width: 80%; /* 设置类名为container的元素宽度为80% */
  margin: 0 auto; /* 设置类名为container的元素水平居中 */
}

2.3 ID选择器

ID选择器允许根据HTML元素的 id 属性值来选择元素。ID名以 # 开头。注意：ID在同一个HTML文档中应该是唯一的。

语法： #ID名

代码实践4：ID选择器


<div id="header">
  <h1>网站标题</h1>
</div>


#header {
  background-color: #f0f0f0; /* 设置ID为header的元素背景色为浅灰色 */
  padding: 20px; /* 设置ID为header的元素内边距为20像素 */
}

2.4 通用选择器

通用选择器使用 * 表示，选中页面上的所有元素。通常用于全局样式重置或特殊场景。

语法： *

代码实践5：通用选择器


* {
  margin: 0; /* 清除所有元素的默认外边距 */
  padding: 0; /* 清除所有元素的默认内边距 */
  box-sizing: border-box; /* 设置所有元素的盒模型为border-box，方便计算元素尺寸 */
}

2.5 属性选择器

属性选择器允许根据HTML元素的属性和属性值来选择元素。

[属性名]：选择包含指定属性的所有元素。
[属性名="属性值"]：选择属性名和属性值完全匹配的元素。
[属性名~="属性值"]：选择属性值包含指定词语的元素（词语之间用空格分隔）。
[属性名|="属性值"]：选择属性值以指定值开头，或者以指定值后跟连字符 - 开头的元素（常用于语言属性，如 lang="en" 或 lang="en-US"）。
[属性名^="属性值"]：选择属性值以指定值开头的元素。
[属性名$="属性值"]：选择属性值以指定值结尾的元素。
[属性名*="属性值"]：选择属性值包含指定值的元素。

代码实践6：属性选择器


<input type="text" placeholder="请输入文本">
<input type="password" placeholder="请输入密码">
<a href="http://example.com">链接到example.com</a>
<a href="https://www.example.org">链接到example.org</a>


input[type="text"] {
  border: 1px solid #ccc; /* 选择type属性为"text"的input元素，设置边框 */
  padding: 5px;
}
a[href^="http"] {
  color: blue; /* 选择href属性以"http"开头的a元素，设置颜色为蓝色 */
}
a[href$=".org"] {
  font-weight: bold; /* 选择href属性以".org"结尾的a元素，设置字体加粗 */
}

2.6 组合选择器

组合选择器用于在选择器之间建立关系，更精确地选择元素。

后代选择器：用空格分隔，选择指定元素的后代元素（包括子元素、子元素的子元素等）。
子选择器：用大于号 > 分隔，选择指定元素的直接子元素。
相邻兄弟选择器：用加号 + 分隔，选择紧跟在指定元素后的兄弟元素。
通用兄弟选择器：用波浪号 ~ 分隔，选择指定元素后的所有兄弟元素。

代码实践7：组合选择器


<div class="container">
  <p>这是容器内的段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <div>
    <p>这是容器内div中的段落。</p>
  </div>
</div>
<p>这是容器外的段落。</p>
<ul>
  <li>列表项3</li>
</ul>


.container p {
  color: purple; /* 后代选择器：选择类名为container的元素内的所有<p>元素 */
}
.container > ul > li {
  list-style-type: square; /* 子选择器：选择类名为container的元素下的<ul>元素的直接子元素<li> */
}
p + ul {
  margin-top: 20px; /* 相邻兄弟选择器：选择紧跟在<p>元素后的<ul>元素，设置上边距 */
}
h1 ~ p {
  text-decoration: underline; /* 通用兄弟选择器：选择<h1>元素后的所有兄弟<p>元素（假设HTML中有<h1>元素） */
}

2.7 伪类选择器

伪类选择器用于选择元素的特殊状态，例如鼠标悬停状态、链接访问状态等。伪类选择器以冒号 : 开头。

:hover：鼠标悬停在元素上时应用样式。
:active：元素被激活时（例如鼠标点击时）应用样式。
:focus：元素获得焦点时（例如输入框被选中时）应用样式。
:link：未访问的链接状态。
:visited：已访问的链接状态。
:first-child：作为父元素的第一个子元素的元素。
:last-child：作为父元素的最后一个子元素的元素。
:nth-child(n)：作为父元素的第n个子元素的元素（n可以是数字、odd（奇数）、even（偶数）或公式）。
:nth-of-type(n)：作为父元素的同类型子元素的第n个元素。

代码实践8：伪类选择器


<a href="#">悬停我</a>
<button>点击我</button>
<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>


a:hover {
  color: red; /* 鼠标悬停在链接上时，链接颜色变为红色 */
  text-decoration: none; /* 鼠标悬停在链接上时，移除下划线 */
}
button:active {
  background-color: lightblue; /* 按钮被点击时，背景色变为浅蓝色 */
}
input:focus {
  border-color: blue; /* 输入框获得焦点时，边框颜色变为蓝色 */
  outline: none; /* 输入框获得焦点时，移除默认轮廓线 */
}
ul li:first-child {
  font-weight: bold; /* <ul>中第一个<li>元素字体加粗 */
}
ul li:nth-child(even) {
  background-color: #f0f0f0; /* <ul>中偶数位置的<li>元素背景色为浅灰色 */
}

2.8 伪元素选择器

伪元素选择器用于选择元素的特定部分，而不是元素本身。伪元素选择器以双冒号 :: 开头（CSS3规范）。在旧版本CSS中，也可能使用单冒号 :。

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
::first-line：选择元素的第一行文本。
::first-letter：选择元素的第一个字母。
::selection：选择用户选中文本的部分。

代码实践9：伪元素选择器


<p class="intro">这是一段介绍文字。</p>
<p>这是另一个段落。</p>


.intro::first-letter {
  font-size: 2em; /* 类名为intro的段落首字母放大两倍 */
  float: left; /* 首字母左浮动 */
  margin-right: 5px;
}
.intro::before {
  content: "【"; /* 在类名为intro的段落内容之前插入"【" */
  color: green;
}
.intro::after {
  content: "】"; /* 在类名为intro的段落内容之后插入"】" */
  color: green;
}
::selection {
  background-color: yellow; /* 用户选中文本时，背景色变为黄色 */
  color: black;
}

3. CSS属性

CSS属性用于控制元素的样式，例如颜色、字体、大小、布局等。CSS属性非常丰富，以下介绍一些常用的基础属性。

3.1 文本属性

color：设置文本颜色。
font-size：设置字体大小，常用单位有 px（像素）、em（相对于父元素字体大小）、rem（相对于根元素字体大小）。
font-family：设置字体族，例如 font-family: "Arial", sans-serif;。
font-weight：设置字体粗细，例如 bold、normal、lighter、100 - 900。
font-style：设置字体样式，例如 italic（斜体）、normal。
text-align：设置文本对齐方式，例如 left、right、center、justify（两端对齐）。
text-decoration：设置文本装饰，例如 underline（下划线）、overline（上划线）、line-through（删除线）、none（无装饰）。
line-height：设置行高，控制行与行之间的垂直间距。
letter-spacing：设置字母间距。
word-spacing：设置单词间距。
text-transform：设置文本转换，例如 uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。

代码实践10：文本属性


p {
  color: #333;
  font-size: 18px;
  font-family: "微软雅黑", "SimHei", sans-serif;
  line-height: 1.5;
  text-align: justify;
}
h2 {
  font-weight: bold;
  text-transform: uppercase; /* 标题文本转换为大写 */
  text-decoration: underline; /* 标题添加下划线 */
}

3.2 背景属性

background-color：设置背景颜色。
background-image：设置背景图像，例如 background-image: url("image.jpg");。
background-repeat：设置背景图像的重复方式，例如 repeat（平铺）、no-repeat（不重复）、repeat-x（水平平铺）、repeat-y（垂直平铺）。
background-position：设置背景图像的起始位置，例如 center center、top right、50% 25%。
background-size：设置背景图像的大小，例如 cover（覆盖整个元素）、contain（包含整个图像）、auto、px、%。
background-attachment：设置背景图像是否固定，例如 fixed（固定）、scroll（滚动）。

代码实践11：背景属性


body {
  background-color: #f0f8ff; /* 设置body背景颜色为淡蓝色 */
  background-image: url("background.png"); /* 设置body背景图像 */
  background-repeat: repeat; /* 背景图像平铺 */
}
.header {
  background-color: rgba(0, 0, 0, 0.5); /* 设置header背景颜色为半透明黑色 */
  color: white;
  padding: 20px;
}

3.3 盒模型

盒模型是CSS布局的基础，每个HTML元素都可以看作一个矩形的盒子，由以下几个部分组成：

内容（Content）：元素的实际内容，例如文本、图像等。
内边距（Padding）：内容与边框之间的空间。
边框（Border）：包围内容和内边距的边框线。
外边距（Margin）：边框与相邻元素之间的空间。

盒模型属性：

width：设置内容宽度。
height：设置内容高度。
padding：设置所有方向的内边距，也可以分别设置 padding-top、padding-right、padding-bottom、padding-left。
border：设置所有边框样式，例如 border: 1px solid black;，也可以分别设置 border-top、border-right、border-bottom、border-left，以及 border-width、border-style、border-color。
margin：设置所有方向的外边距，也可以分别设置 margin-top、margin-right、margin-bottom、margin-left。
box-sizing：设置盒模型计算方式，content-box（默认，宽度和高度只包含内容）或 border-box（宽度和高度包含内容、内边距和边框）。border-box 更常用，方便计算元素尺寸。

代码实践12：盒模型属性


div {
  width: 300px;
  height: 200px;
  background-color: lightcoral;
  padding: 20px;
  border: 2px dashed darkred;
  margin: 30px;
  box-sizing: border-box; /* 使用border-box盒模型 */
}

3.4 显示属性

display 属性用于控制元素的显示类型和布局方式。

block：块级元素，独占一行，可以设置宽度、高度、内外边距。例如 <div>、<p>、<h1> 等。
inline：行内元素，不独占一行，宽度和高度由内容决定，不能设置垂直方向的内外边距。例如 <span>、<a>、<img> 等。
inline-block：行内块级元素，既具有行内元素的特点（不独占一行），又具有块级元素的特点（可以设置宽度、高度、内外边距）。
none：隐藏元素，元素不显示，也不占据页面空间。
flex：弹性布局，用于创建灵活的响应式布局。
grid：网格布局，用于创建复杂的二维布局。

代码实践13：显示属性


span {
  display: inline-block; /* 将<span>元素设置为行内块级元素 */
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  text-align: center;
  line-height: 30px;
  margin: 5px;
}
.hide {
  display: none; /* 隐藏类名为hide的元素 */
}

4. CSS的层叠与优先级

CSS的“层叠”（Cascade）是其核心概念之一。当多个CSS规则应用于同一个元素时，浏览器需要根据一定的规则来决定最终应用哪个样式。

4.1 样式来源

CSS样式可以来自三个来源：

浏览器默认样式：浏览器内置的默认样式。
用户样式：用户自定义的样式，例如浏览器扩展或用户自定义CSS文件。
作者样式：网页开发者编写的样式，包括外部CSS文件、<style> 标签内的样式和内联样式。

优先级顺序（从低到高）：

浏览器默认样式
用户样式
作者样式

4.2 优先级规则

当作者样式之间发生冲突时，浏览器会根据 选择器的优先级 来决定应用哪个样式。优先级高的选择器会覆盖优先级低的选择器。

选择器优先级从低到高：

通用选择器（*）
元素选择器（例如 p、h1）和伪元素选择器（::before、::after）
类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:hover、:focus）
ID选择器（#id）
内联样式（直接写在HTML元素 style 属性中的样式）
!important 声明

计算优先级：

可以把选择器优先级看作一个四位数的权重值（A, B, C, D）：

A：内联样式（1）
B：ID选择器（每个ID选择器 +1）
C：类选择器、属性选择器、伪类选择器（每个选择器 +1）
D：元素选择器、伪元素选择器（每个选择器 +1）

通用选择器和组合符（空格、>、+、~）不影响优先级。

!important 声明：可以强制提高样式的优先级，但应尽量避免使用，因为它会破坏CSS的层叠性和可维护性。

代码实践14：CSS优先级


<style>
  p {
    color: blue; /* 规则1：元素选择器，优先级低 */
  }
  .text {
    color: green; /* 规则2：类选择器，优先级中 */
  }
  #paragraph {
    color: red; /* 规则3：ID选择器，优先级高 */
  }
  p.text {
    color: orange; /* 规则4：组合选择器，优先级略高于规则2 */
  }
  /* 规则5：内联样式，优先级更高 */
</style>
<p id="paragraph" class="text" style="color: purple;">这段文字会是什么颜色？</p>

代码解析：

规则1（元素选择器 p）优先级最低。
规则2（类选择器 .text）优先级高于规则1。
规则3（ID选择器 #paragraph）优先级高于规则2。
规则4（组合选择器 p.text）优先级略高于规则2，但低于规则3。
规则5（内联样式 style="color: purple;"）优先级最高。

因此，最终 <p> 元素的文本颜色将是紫色，因为内联样式具有最高的优先级。

5. CSS的引入方式

CSS可以通过以下三种方式引入到HTML文档中：

外部样式表：将CSS代码写在一个独立的 .css 文件中，然后在HTML文档中使用 <link> 标签引入。推荐使用这种方式。
内部样式表：将CSS代码写在HTML文档的 <head> 标签内的 <style> 标签中。
内联样式：将CSS代码直接写在HTML元素的 style 属性中。不推荐大量使用内联样式，不利于维护。

代码实践15：CSS的引入方式

外部样式表（styles.css）：


body {
  background-color: #eee;
}
h1 {
  color: navy;
}

HTML文件（index.html）：


<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎使用外部样式表</h1>
<p>这是一个使用了外部样式表的段落。</p>
</body>
</html>

内部样式表（index.html）：


<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
  body {
    background-color: #eee;
  }
  h1 {
    color: navy;
  }
</style>
</head>
<body>
<h1>欢迎使用内部样式表</h1>
<p>这是一个使用了内部样式表的段落。</p>
</body>
</html>

内联样式（index.html）：


<!DOCTYPE html>
<html>
<head>
<title>内联样式表示例</title>
</head>
<body style="background-color: #eee;">
<h1 style="color: navy;">欢迎使用内联样式</h1>
<p style="color: #333;">这是一个使用了内联样式的段落。</p>
</body>
</html>

总结

本文详细介绍了CSS基础知识，涵盖CSS的作用、语法结构、选择器、常用属性、盒模型、显示属性、层叠与优先级以及引入方式。通过代码实践和内容解析，读者可以对CSS的基础概念形成更深入的理解。

CSS的学习是一个循序渐进的过程，掌握基础知识是构建更复杂、更美观网页的第一步。深入学习CSS的各种属性和布局技巧后，开发者能够创造出令人惊叹的网页设计。祝各位读者在CSS的学习之旅中取得成功。

目录大纲

知识宇宙

正在加载知识图谱...

文集文档索引

CSS