HTML 样式 – CSS (Cascading Style Sheets)

天天向上

发布： 2025-02-22 13:13:36

原创

235 人浏览过

CSS（层叠样式表）是一种用于描述 HTML 文档外观和格式的语言。CSS 控制网页的排版、颜色、字体、布局以及其他样式特性，它使得网页的内容与样式分离，从而提升了网页的灵活性和可维护性。

1. CSS 基本概念

CSS 主要通过选择器（Selector）来定义样式，并应用于 HTML 元素。选择器决定了要应用样式的 HTML 元素，样式则通过属性和属性值来定义。

语法：

selector {
    property: value;
}

选择器（Selector）：指定要应用样式的 HTML 元素。
属性（Property）：要应用的样式类型，例如 color, font-size。
属性值（Value）：属性的具体值，例如 red, 16px。

2. CSS 的使用方法

CSS 可以通过三种方式应用于 HTML：

内联样式（Inline CSS）：直接在 HTML 元素中使用 style 属性定义样式。
内部样式表（Internal CSS）：在 HTML 文档的 <head> 标签中使用 <style> 标签嵌入 CSS。
外部样式表（External CSS）：通过链接外部的 .css 文件来引入样式。

1. 内联样式（Inline CSS）

<p style="color: blue; font-size: 16px;">这是一个段落。</p>

2. 内部样式表（Internal CSS）

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. 外部样式表（External CSS）

在 HTML 文件中通过 <link> 标签引入外部的 CSS 文件：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

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

p {
    color: blue;
    font-size: 16px;
}

3. 常见的 CSS 属性

1. 文本和字体样式

color：设置文本颜色。
font-family：设置字体。
font-size：设置字体大小。
font-weight：设置字体粗细。
text-align：设置文本对齐方式。

示例：

h1 {
    color: green;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

2. 背景样式

background-color：设置背景颜色。
background-image：设置背景图片。
background-size：设置背景图片的尺寸。

示例：

body {
    background-color: #f0f0f0;
}
div {
    background-image: url('background.jpg');
    background-size: cover;
}

3. 盒子模型属性

width：设置元素的宽度。
height：设置元素的高度。
padding：设置元素内容与边框之间的间距。
border：设置元素的边框样式、宽度和颜色。
margin：设置元素与周围元素之间的间距。

示例：

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

4. 布局属性

display：设置元素的显示类型（如 block, inline, flex）。
position：设置元素的位置（如 static, relative, absolute, fixed）。
float：让元素左右浮动。
clear：防止元素被浮动元素覆盖。

示例：

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

5. 边框和圆角

border-radius：设置元素的圆角。
border-width：设置边框宽度。
border-style：设置边框的样式（如 solid, dotted, dashed）。

示例：

div {
    border-radius: 10px;
    border: 2px solid #000;
}

4. CSS 选择器

CSS 选择器用于选择网页中的 HTML 元素，并为它们应用样式。常见的选择器包括：

1. 元素选择器

选择所有指定标签的元素。

p {
    color: red;
}

2. 类选择器

选择所有具有指定类名的元素。使用 . 前缀。

.classname {
    color: blue;
}

3. ID 选择器

选择具有指定 ID 的元素。使用 # 前缀。

#idname {
    color: green;
}

4. 后代选择器

选择指定元素的所有后代元素。

div p {
    color: purple;
}

5. 伪类选择器

选择元素的特殊状态，如鼠标悬停状态。

a:hover {
    color: red;
}

6. 伪元素选择器

选择元素的特定部分，如文本的第一字母。

p::first-letter {
    font-size: 2em;
}

5. CSS 优先级

在 CSS 中，样式的优先级遵循一定的规则。当多个样式应用于同一元素时，优先级决定了哪个样式最终生效。

内联样式优先级最高。
ID 选择器的优先级比类选择器和元素选择器高。
类选择器的优先级比元素选择器高。

6. CSS 层叠与继承

层叠（Cascade）：CSS 的“层叠”指的是样式的应用顺序，后定义的样式会覆盖前面的样式。
继承（Inheritance）：一些 CSS 属性会被子元素继承，例如 color、font-family 等。

7. 响应式设计

响应式设计使用媒体查询（Media Queries）来根据屏幕大小或设备类型调整网页布局和样式。常见的媒体查询条件包括屏幕宽度、高度、分辨率等。

示例：

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

总结

CSS 用于控制网页的外观，涉及文本、背景、布局、尺寸等多个方面。
样式可以通过 内联样式、内部样式表 和 外部样式表 来定义。
常用的 CSS 属性包括文本样式、背景、布局、边框、圆角、位置等。
CSS 选择器用于选择并为 HTML 元素应用样式，可以是元素、类、ID 选择器，或者使用更复杂的组合选择器。
通过媒体查询可以实现响应式设计，确保网页在各种设备上良好显示。

CSS 是前端开发的核心技能之一，掌握它能够让你设计出美观、灵活且响应式的网页。