CSS简介 - 技术栈

CSS （层叠样式表，Cascading Style Sheets）是用于描述网页内容外观和布局 的样式语言。它与HTML （负责内容结构）和JavaScript（负责交互逻辑）共同构成现代网页开发的三大核心技术。通过CSS，开发者可以将简单的HTML内容转化为美观、交互丰富的网页界面。

CSS具有以下特点：

层叠性 （Cascading）：多个样式规则可以同时作用于同一元素，最终样式由优先级和层叠顺序决定。
选择器 （Selectors）：通过选择器，你可以选择要应用样式的HTMLT元素。选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
样式规则 （Style Rules）：样式规则由选择器和一组属性-键值对组成。选择器选择要应用样式的元素，属性-键值对定义了要应用的样式。
继承性 （Inheritance）：子元素自动继承父元素的某些样式属性（如字体、颜色），无需重复定义。
盒模型 （Box Model） :CSS中的元素被认为是一个矩形的盒子，具有内容区域、内页距
布局（Layout）：CSS提供了一些布局属性和技术，如浮动、定位、弹性盒子等，用于更精确地控制网页的排版和布局。

CSS应用到HTML

内联样式：

直接在 HTML 元素的 style 属性中编写 CSS 样式，作用于单个元素。

javascript 复制代码

<div style="color: red; font-size: 16px;"></div>

内部样式表：

将 CSS 样式写在 HTML 文档的

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-class{
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div style="color: red; font-size: 16px;"></div>
    <div class="my-class">my-class</div>
</body>
</html>

外部样式表：

外部样式表（External Stylesheet）是将 CSS 代码单独存储在 .css 文件中，通过 HTML 的标签引入到网页中的样式定义方式。它是 CSS 最推荐的使用形式，实现内容与样式的完全分离。

css 复制代码

body{
    background-color: blanchedalmond;
}
h1{
    color: blue;
}
p{
    color: red;
}

在html文档中引入外部CSS文件：

html 复制代码

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

外部样式表是构建可维护、高性能网站的基石。通过文件拆分、构建工具优化和模块化开发，可以充分发挥其优势。