CSS 方向 - CSS (1) - 芒果文档

📌 相关文章

📜 CSS 方向 - CSS (1)

📅 最后修改于: 2023-12-03 15:00:08.882000 🧑 作者: Mango

CSS 方向 - CSS

CSS (Cascading Style Sheets) 是一种用于描述网页样式的语言。通过使用 CSS，可以为 HTML 文档添加样式、布局和交互效果，而不必改变 HTML 文档的内容。

CSS 的使用

CSS 可以通过以下方式使用：

嵌入式方式：将 CSS 样式规则嵌入到 HTML 页面的 <head> 标签中。

<head>
    <style>
        /* CSS 样式规则 */
    </style>
</head>

外部引入方式：将 CSS 样式规则保存在一个独立的文件中，然后在 HTML 页面中使用 <link> 标签引入。

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

行内方式：直接在 HTML 标签中使用 style 属性指定 CSS 样式规则。

<div style="color: red; font-size: 20px;">Hello World!</div>

CSS 规则集

CSS 中的样式规则由以下两部分组成：

选择器：用于选择需要样式化的 HTML 元素。

h1 {
    /* 样式规则 */
}

声明块：由一组 CSS 属性和属性值构成，用于设置 HTML 元素的样式。

h1 {
    color: red;
    font-size: 20px;
}

CSS 的语法

CSS 的语法由以下几部分组成：

选择器：用于选择需要样式化的 HTML 元素。

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

注释：用于增加代码的可读性，不会被浏览器解析。

/* 这是一个注释 */

属性：用于设置 HTML 元素的样式。

属性: 属性值;

CSS 的常用样式属性

CSS 中有很多常用的样式属性，以下是其中一些常用的样式属性：

color：用于设置文字颜色。

h1 {
    color: red;
}

font-size：用于设置文字大小。

h1 {
    font-size: 20px;
}

font-family：用于设置文字字体。

p {
    font-family: Arial, sans-serif;
}

background-color：用于设置背景颜色。

body {
    background-color: #f0f0f0;
}

margin：用于设置元素的外边距。

div {
    margin: 10px;
}

padding：用于设置元素的内边距。

div {
    padding: 10px;
}

border：用于设置元素的边框样式。

div {
    border: 1px solid red;
}

CSS 的优先级

CSS 中样式的优先级顺序如下：

!important 修饰的样式；
在元素标签中直接加上 style 属性的样式；
加在 #id 选择器中的样式；
加在 .class 选择器中的样式；
加在标签名选择器中的样式。

当多个样式属性的优先级相同时，后面的样式属性会覆盖前面的。

CSS 的盒模型

在 CSS 中，每个 HTML 元素都被看作一个矩形盒子。这个盒子包括四个区域：

内容区域（content）
内边距区域（padding）
边框区域（border）
外边距区域（margin）

盒模型图示

其中，内容区域包含了元素的实际内容，内边距区域是围绕内容区域的空白区域，边框区域是围绕内边距区域的一条或多条边框，外边距区域是围绕边框区域的空白区域。

总结

CSS 为网页提供了强大的样式控制功能，可以使网页的样式更加美观和易于阅读。掌握 CSS 的基本语法和常用样式属性，可以为开发网页提供帮助。