CSS基础

一、CSS的基本结构

CSS规则由选择器和声明块组成，基本结构如下：

	selector { 

	property: value; /* more properties and values */ 

	}

• 选择器（Selector）：指定要应用样式的HTML元素。
• 声明块（Declaration Block）：包含一个或多个声明，每个声明由属性和值组成，属性与值之间用冒号（:）分隔，每个声明以分号（;）结束。

二、选择器类型

CSS提供了多种选择器来定位HTML元素，包括：

1. 元素选择器 ：选择所有指定的HTML元素，如p { color: red; }选择所有<p>元素。
2. 类选择器 ：选择所有指定类名的元素，使用.表示，如.className { color: blue; }选择所有类名为className的元素。
3. ID选择器 ：选择具有指定ID的元素，使用#表示，如#idName { color: green; }选择ID为idName的元素。
4. 复合选择器 ：
   • 后代选择器 ：选择某个元素内的所有指定元素，使用空格分隔，如div p { color: yellow; }选择所有在<div>内的<p>元素。
   • 子选择器 ：选择某个元素的直接子元素，使用>分隔，如ul > li { color: purple; }选择所有<ul>的直接子元素<li>。
   • 相邻兄弟选择器 ：选择紧接在某元素后的指定元素，使用+分隔，如h1 + p { color: orange; }选择紧接在<h1>后的第一个<p>元素。
   • 通用兄弟选择器 ：选择某元素后面的所有指定元素，使用~分隔，如h1 ~ p { color: pink; }选择<h1>后的所有<p>元素。
5. 伪类选择器 ：选择特定状态的元素，如:hover选择鼠标悬停状态的元素，:first-child选择父元素的第一个子元素。
6. 伪元素选择器 ：选择元素的特定部分，如::before和::after用于在元素内容的前后插入内容。

三、常用CSS属性

CSS提供了丰富的属性来控制网页的样式，包括但不限于：

• 字体样式 ：font-family、font-size、font-weight、font-style等。
• 文本样式 ：color、text-align、text-decoration、text-indent、line-height等。
• 背景样式 ：background-color、background-image、background-repeat、background-position、background-size等。
• 盒模型 相关：border、margin、padding、width、height等。
• 布局与定位 ：display（如block、inline、flex、grid）、position（如static、relative、absolute、fixed）、top、right、bottom、left、z-index等。

四、CSS单位

CSS支持多种单位，包括：

• 绝对单位 ：如px（像素）、cm（厘米）、mm（毫米）、in（英寸）、pt（磅）、pc（派卡）。
• 相对单位 ：如em（相对于元素的字体大小）、rem（相对于根元素<html>的字体大小）、vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin、vmax（相对于视口较小或较大的那一个百分比）。

五、CSS的编写位置

CSS的编写位置主要有三种：

1. 行内样式 ：直接写在HTML元素的style属性中，只影响当前元素。
2. 内部样式 ：将CSS代码写在HTML文档的<head>部分内的<style>标签中，影响当前页面的所有元素。
3. 外部样式 ：将CSS代码写在单独的.css文件中，然后在HTML文件中通过<link>标签引入，可以跨页面复用样式，实现结构与样式的分离。