css基础笔记简洁版1

📘 CSS 基础笔记 1

一、CSS 简介

CSS（层叠样式表）用于为网页添加样式，实现结构与样式分离，能够控制颜色、字体、布局、位置、动画等视觉效果。

二、基本语法

选择器 {
  属性1: 值1;
  属性2: 值2;
}

说明：

• 选择器：选中目标元素
• 属性:值：设置样式
• 每条声明用 ; 结尾，属性和值用 : 分隔

三、CSS 的三种写法

1. 行内样式（不推荐）：

<p style="color: green;">你好</p>

2. 内部样式表：

<style>
  p { color: red; }
</style>

3. 外部样式表（推荐）：

<link rel="stylesheet" href="style.css">

四、基础选择器

类型	写法	说明
标签选择器	p {}	所有 <p> 标签
类选择器	.box {}	class 为 box 的元素
ID 选择器	#header {}	id 为 header 的元素
通配符选择器	* {}	匹配所有元素，常用于初始化

五、复合选择器

类型	写法	说明
后代选择器	div p {}	所有 div 内的 p 元素
子选择器	ul > li {}	ul 的直接子元素 li
并集选择器	h1, p {}	同时选中 h1 和 p

六、伪类选择器（常用交互样式）

伪类	写法	说明
:hover	a:hover {}	鼠标悬停
:active	button:active {}	鼠标点击时
:focus	input:focus {}	输入框获取焦点时
:first-child	li:first-child {}	第一个子元素
:last-child	li:last-child {}	最后一个子元素

七、通配符说明

* {
  margin: 0;
  padding: 0;
}

用于清除所有元素的默认边距，常用于页面初始化。