CSS

约 316 字大约 1 分钟

2025-10-03

简介

CSS（Cascading Style Sheets 层叠样式表）用于描述 HTML 元素的样式，常用于：

样式美化：文本样式、背景、边框等
布局与定位：元素排列、响应式设计
动画交互：伪类、过渡、动画

CSS分类

内联（行内）样式表

样式写在标签内部，可以控制当前标签的样式，实践中较少使用。

<p style="color: red; font-size: 16px;">这是一个红色文字</p>
<div style="background-color: yellow; padding: 10px;">黄色背景的div</div>

内部样式表

样式写到<head>标签中，可以控制当前页面的所有标签，较为常用

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
        .container {
            width: 100%;
            margin: 0 auto;
        }
        #header {
            background-color: #f0f0f0;
            padding: 20px;
        }
    </style>
</head>
<body>
    <p>这段文字是蓝色的</p>
</body>
</html>

外部样式表

将CSS代码保存在独立的.css文件中，通过<link>标签引入，可以控制整个网站的所有标签，最常用

style.css

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">页面头部</div>
    <button class="button">点击按钮</button>
</body>
</html>