第一章：CSS基础入门

1. CSS简介 CSS，全称为Cascading Style Sheets（层叠样式表），是一种样式表语言，专门用于描述HTML或其他XML文档（例如SVG、MathML）的展示和格式化。CSS负责定义网页元素的布局、颜色、字体、尺寸、间距、透明度、显示模式等各种视觉和布局特性。CSS的核心价值在于它实现了内容与表现的分离，使得开发者可以独立修改网页的样式而不影响内容结构，提高了网站的可维护性和可扩展性。

2. CSS语法基础

选择器 ：CSS选择器是用于指定HTML元素的样式规则的关键部分。它可以是元素名称（如p代表段落元素）、类名（.class）、ID名（#id）、属性选择器（如 [href] 或 [target="_blank"]）以及其他更复杂的组合选择器（如后代选择器 div .content、子代选择器 div > p 和相邻兄弟选择器 h1 + p 等）。
属性与值 ：在CSS规则中，每个选择器后面跟随一对或多对属性和值，属性和值之间用冒号:分隔，每对属性值之间则以分号;结束。例如：

Css

css 复制代码

p {
  color: red; /* 设置文字颜色为红色 */
  font-size: 16px; /* 设置字体大小为16像素 */
  margin: 0 auto; /* 设置外边距使段落居中 */
}

注释：CSS注释与大多数编程语言类似，使用/* 注释内容 */格式，例如：

Css

css 复制代码

/* 这是一个CSS注释，不会被浏览器解析 */
body {
  background-color: #f0f0f0; /* 设置页面背景色 */
}

3. 链接与引入CSS 在HTML文档中应用CSS有三种主要方式：

内联样式 ：直接在HTML元素的style属性中定义样式，仅对该元素生效。

Html

html 复制代码

<p style="color: blue;">这段文字是蓝色的。</p>

内部样式表：在HTML文档<head>部分使用<style>标签定义样式，这些样式适用于整个文档。

Html

html 复制代码

<head>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: darkblue;
    }
  </style>
</head>

外部样式表：创建一个单独的.css文件，并在HTML文档中通过<link>标签链接至该文件，这种方式便于集中管理和复用样式，提高效率。

Html

html 复制代码

<head>
  <link rel="stylesheet" href="styles.css">
</head>

在外部样式表styles.css中：

Css

css 复制代码

body {
  background-color: lightgrey;
}

h1 {
  color: darkblue;
}

通过上述方式，CSS可以根据需要灵活地控制和美化网页内容的展现形式。