CSS零基础入门：语法、引入方式与基础样式全解析

梨想橙汁2026-07-15 17:17

引言

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，而CSS3是最新的CSS标准，用于控制页面的样式与布局。

一、CSS基础语法

CSS的语法结构由选择器和声明块两部分组成。 语法格式：选择器 {属性：属性值；}

css 复制代码

p {
    color: red;
  }

二、引入CSS的方法

1.1 内联样式

内联样式是指在HTML标签中利用 style属性直接添加CSS的方式，但是这种引入方式只能控制当前标签的样式，如果多个相同标签存在相同的样式时，每次都需要重新写一遍style属性，会造成代码冗长，不利于维护。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入</title>
</head>
<body>
    <!-- 内联样式 -->
    <div style="background: red"></div>
</body>
</html>

1.2 内部样式表

内部样式表是指在HTML的头部中的<style></style>内书写CSS代码，这种方式只对当前HTML页面有效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入</title>
    <!-- 内部样式表 -->
    <style>
        p {
            color:red;
        }
    </style>
</head>
<body>
    <p>内部样式表</p>
</body>
</html>

1.3 外部样式表

当样式需要应用于多个页面时，外部样式表是最好的选择，在每个页面的head中使用<link>标签链接到样式表，浏览器会从csdn2.css文件中读取到样式声明并应用到页面中

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入</title>
    <link rel="stylesheet" href="./csdn2.css">
</head>

CSS零基础入门：语法、引入方式与基础样式全解析

引言

一、CSS基础语法

二、引入CSS的方法

1.1 内联样式

1.2 内部样式表

1.3 外部样式表

三、CSS常用样式

3.1 background背景样式

3.2 文本样式

3.3 字体样式

3.4 border边框样式

3.5 多列属性（CSS3新增）