CSS 教程学习笔记

1. 简介

CSS（Cascading Style Sheets）是一种用于描述网页样式的语言。它可以让你控制网页的布局、颜色、字体等外观效果，使你的网页更加美观、易读。

2. 基本语法和选择器

CSS 的基本语法是由选择器和一条或多条声明组成。每条声明由一个属性和一个值组成。

2.1 选择器

选择器用于指定 CSS 样式应用的元素。常用的选择器有：

• 标签选择器：通过 HTML 标签名来选取元素
• 类选择器：通过指定 class 属性的值来选取元素
• ID 选择器：通过指定 id 属性的值来选取元素
• 属性选择器：通过选择带有指定属性的元素来选取元素
• 后代选择器：通过指定上级元素和下级元素的关系来选取元素

2.2 声明

声明由一个 CSS 属性和一个值组成，如下所示：

cssCopy Code
color: red;

3. CSS 样式

3.1 文本样式

设置文本样式可以让你控制文本的字体、颜色、大小等属性。常用的文本样式属性有：

• font-family：指定字体，如 Arial、Georgia、Verdana 等。
• font-size：指定字体大小，如 12px、16px 等。
• color：指定字体颜色，如 red、green、blue 等。

实例：

cssCopy Code
h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #333;
}

3.2 背景样式

设置背景样式可以让你控制元素的背景颜色、图片等属性。常用的背景样式属性有：

• background-color：指定背景颜色，如 #f0f0f0。
• background-image：指定背景图片，如 url("bg.jpg")。
• background-position：指定背景位置，如 top left、center center 等。

实例：

cssCopy Code
body {
  background-color: #f0f0f0;
  background-image: url("bg.jpg");
  background-position: center center;
}

3.3 盒模型样式

盒模型是指由内容区域、内边距、边框和外边距组成的一个矩形框。设置盒模型样式可以让你控制元素的大小、边框样式等属性。常用的盒模型样式属性有：

• width：指定元素宽度，如 200px。
• height：指定元素高度，如 100px。
• border：指定边框样式，如 1px solid #ccc。
• padding：指定内边距，如 10px。
• margin：指定外边距，如 20px。

实例：

cssCopy Code
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
}

4. 总结

以上就是 CSS 的一些基本语法和常用样式属性，掌握这些知识可以让你更加熟练地使用 CSS 来美化网页。当然，CSS 还有很多其他的特性和技巧，需要不断学习和实践才能掌握。