CSS - css 简介及语法（一）_style="width:400-优快云博客

本文介绍了CSS（层叠样式表）的基本概念，包括其用于定义HTML元素显示方式、解决内容与表现分离问题的功能。CSS语法由选择器和声明组成，选择器指定元素，声明则包含属性和值。在HTML中，CSS可以通过内联样式、内部样式表和外部样式表三种方式应用。示例代码展示了不同应用方法及其优先级，其中直接在元素内部设置样式的优先级最高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二、CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

三、CSS 在 HTML 中的使用

css 代码

/*index.css*/

h1{
    font-size: 30px;
    color: #cc0000;
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <!--style 修改样式方法一-->
    <style>
        h1{
            font-size: 10px;
            color: #FF6600;
        }
    </style>

    <!--style 修改样式方法二，使用 link 标签，导入样式设置的文件-->
    <link rel="stylesheet" href="index.css">

</head>
<body>

<!--style 修改样式方法三，直接在标签内部设置样式，这种的优先级最高-->
<div style="width: 400px;height: 400px;background-color: #66cc66;font-size: 30px">
    <h1>今天是周一</h1>
    <h2>开始上班啦</h2>
</div>

<a href="baidu.com" style="font-size:20px">点我</a>

</body>
</html>

代码截图：