1. CSS简介

CSS（Cascading Style Sheets）是一种用于描述HTML或XML文档样式的样式表语言。它允许开发者将文档的内容和表现形式分离，从而提高网页设计的效率和质量。CSS通过选择器来指定样式规则，这些规则定义了文档中元素的字体、颜色、布局等样式。

2. CSS基本语法

CSS的基本语法由选择器和声明组成。以下是一个简单的CSS样式示例：

/* 选择器 */
h1 {
  /* 声明 */
  color: red;
  font-size: 24px;
}

在这个例子中，h1 是选择器，表示所有 <h1> 标签。color 和 font-size 是声明，分别设置文本颜色和字体大小。

3. CSS选择器

CSS选择器用于指定要应用样式的HTML元素。以下是一些常用的CSS选择器：

  • 元素选择器：根据元素标签选择，如 h1、p 等。
  • 类选择器：根据元素类属性选择，如 .my-class。
  • ID选择器：根据元素ID属性选择，如 #my-id。
  • 组合选择器：通过组合基本选择器来选择元素，如 .my-class h1。

4. CSS样式属性

CSS样式属性用于定义元素的样式，以下是一些常见的CSS属性：

  • 颜色：color、background-color、border-color 等。
  • 字体：font-family、font-size、font-weight 等。
  • 布局：margin、padding、width、height、position 等。
  • 文本：text-align、line-height、text-decoration 等。
  • 列表：list-style、list-style-type、list-style-position 等。

5. CSS引入方式

CSS样式可以通过以下方式引入HTML文档：

  • 行内样式：直接在HTML标签的style属性中定义样式。
  • 内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。
  • 外部样式表：通过<link>标签在HTML文档中引入外部CSS文件。

以下是一个使用外部样式表的示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>这是一个标题</h1>
</body>
</html>

在styles.css文件中定义样式：

h1 {
  color: red;
  font-size: 24px;
}

6. CSS布局技术

CSS布局技术用于控制网页元素的排列和定位。以下是一些常用的CSS布局技术：

  • 盒模型：定义了元素的内边距（padding）、边框（border）、外边距（margin）和实际尺寸（width/height）。
  • 浮动布局：通过设置元素的float属性来实现水平布局。
  • 定位布局：通过设置元素的position属性来实现绝对或相对定位。
  • Flexbox布局：提供了一种更加灵活和强大的布局方式。
  • Grid布局：提供了一种基于网格的布局方式，可以轻松实现复杂的布局结构。

7. CSS响应式设计

响应式设计是指网页在不同设备和屏幕尺寸下都能保持良好的显示效果。以下是一些实现响应式设计的CSS技术：

  • 媒体查询：根据不同的屏幕尺寸应用不同的样式规则。
  • 响应式单位：使用vw（视口宽度）、vh（视口高度）、rem（根字体大小）等响应式单位。
  • Flexbox布局和Grid布局：提供响应式布局的强大支持。

8. 实战练习

通过以下练习，您可以巩固CSS基础知识：

  1. 创建一个简单的网页，使用CSS设置标题、段落和链接的样式。
  2. 使用CSS实现一个两栏布局，左侧为导航栏，右侧为内容区域。
  3. 使用媒体查询实现一个响应式布局，在不同屏幕尺寸下调整布局和样式。
  4. 使用Flexbox布局实现一个商品列表，使商品图片和描述在同一行显示。

通过不断学习和实践，您将能够轻松掌握CSS基础，开启前端设计之旅。