跳到主要内容

CSS基础

介绍​

CSS(层叠样式表)是用于描述网页样式的语言，它控制HTML元素的外观和布局。CSS使开发者能够将网页的结构(HTML)与表现(CSS)分离，提高代码的可维护性和复用性。

原理​

CSS的工作原理：

  • CSS通过选择器选择HTML元素，然后应用样式规则
  • 样式规则由属性和值组成，格式为property: value;
  • 多个样式规则可以组合成CSS声明块，用花括号{}包裹
  • CSS样式可以通过内联样式、内部样式表和外部样式表三种方式应用
  • 当多个样式规则应用于同一个元素时，会根据层叠规则确定最终样式

图示​

/* CSS选择器和声明块的基本结构 */
/* 选择器：用于选择要应用样式的HTML元素 */
selector {
    /* 属性: 值; - 样式声明 */
    property1: value1; /* 第一个样式规则 */
    property2: value2; /* 第二个样式规则 */
    /* 更多样式规则可以在这里添加 */
}

实例​

CSS引入方式​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础示例</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 内部样式表 -->
    <style>
        /* 内部样式表 - 在HTML文档内部定义的CSS */
        /* 元素选择器：选择所有h2元素 */
        h2 {
            color: green; /* 设置文本颜色为绿色 */
            font-size: 24px; /* 设置字体大小为24像素 */
        }
    </style>
</head>
<body>
    <!-- 内联样式 -->
    <h1 style="color: blue; font-size: 32px;">CSS基础</h1>
    <h2>内部样式表示例</h2>
    <p class="external-style">外部样式表示例</p>
    <div id="unique-element">ID选择器示例</div>
</body>
</html>

外部样式表 (styles.css)​

/* 外部样式表 (styles.css) - 独立的CSS文件 */

/* 元素选择器：选择所有p元素 */
p {
    font-family: Arial, sans-serif; /* 设置字体为Arial或sans-serif */
    line-height: 1.6; /* 设置行高为1.6倍字体大小 */
}

/* 类选择器：选择所有class为external-style的元素 */
.external-style {
    color: purple; /* 设置文本颜色为紫色 */
    font-size: 18px; /* 设置字体大小为18像素 */
}

/* ID选择器：选择id为unique-element的元素 */
#unique-element {
    background-color: yellow; /* 设置背景颜色为黄色 */
    padding: 10px; /* 设置内边距为10像素 */
    border: 1px solid black; /* 设置边框为1像素黑色实线 */
}

专业解决方案​

CSS基础语法​

  • 选择器：用于选择要应用样式的元素（如元素选择器、类选择器、ID选择器）
  • 属性：要设置的样式特性(如color, font-size)：定义元素的视觉特征
  • 值：属性的具体设置(如red, 16px)：属性的具体取值
  • 声明块：由花括号包裹的一个或多个样式声明：包含应用于选择器的所有样式规则
  • 注释：以/*开始，以*/结束的文本：用于解释代码，不影响样式

CSS单位​

  • 绝对单位：px(像素), pt(点), in(英寸), cm(厘米)
  • 相对单位：em(相对于父元素字体大小), rem(相对于根元素字体大小), %(百分比), vw(视口宽度的1%), vh(视口高度的1%)
  • 颜色单位：颜色名称(如red), 十六进制(如#ff0000), RGB(如rgb(255,0,0)), HSL(如hsl(0,100%,50%))

最佳实践​

  • 优先使用外部样式表，提高代码复用性和可维护性
  • 保持CSS代码整洁，使用适当的缩进和注释
  • 避免使用内联样式，除非有特殊需求
  • 使用语义化的类名和ID名
  • 遵循CSS命名规范(如BEM, OOCSS)
  • 避免过度使用!important

工具推荐​

  • CSS Validator：验证CSS代码的有效性
  • Prettier：代码格式化工具
  • Stylelint：CSS代码检查工具
  • Autoprefixer：自动添加CSS前缀
  • Sass/Less：CSS预处理器