css简介与语法

CSS 简介与语法

CSS 简介

什么是 CSS

  • CSS 全称是 Cascading Style Sheets，中文叫 层叠样式表。
  • CSS 是一种用于定义网页样式和布局的样式表语言。
  • 通过 CSS，可以设置页面中各个元素的颜色、字体、大小、间距、边框、背景等样式。

CSS 和 HTML 的关系

  • HTML 负责页面结构和内容。
  • CSS 负责页面样式和布局表现。
  • 可以把 HTML 理解为毛坯房，把 CSS 理解为装修。

知识点总结

  • HTML 决定页面有什么。
  • CSS 决定页面长什么样。
  • CSS 的主要作用是美化页面和控制布局。

复习表达

CSS 是层叠样式表，主要用于控制网页的外观和布局。HTML 负责页面结构，CSS 负责页面样式，两者配合完成一个完整的网页展示效果。

CSS 语法

基本结构

CSS 通常由 选择器、属性 和 属性值 组成。

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

语法规则

  1. 一个选择器中可以写多条属性。
  2. 每一行属性通常都要以英文分号 ; 结尾。
  3. 属性和值以 键值对 的形式出现。

示例代码

1
2
3
4
5
/* 这是一个 p 标签选择器 */
p {
  color: blue;
  font-size: 16px;
}

课堂示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 导入方式</title>

  <style>
    p {
      color: blue;
      font-size: 26px;
    }
  </style>
</head>
<body>
  <p>这是一个应用了 css 样式的文本</p>
</body>
</html>

知识点总结

  • CSS 写法的核心是：选中元素，再给它设置样式。
  • 选择器决定“改谁”，属性和值决定“怎么改”。
  • color 用来设置文字颜色，font-size 用来设置字体大小。

复习表达

CSS 的基本语法由选择器和声明块组成，声明块中包含多个属性和属性值，写法一般是 属性名: 属性值;。其中选择器负责选中元素，属性和值负责定义样式效果。