Skip to content

Latest commit

 

History

History
407 lines (260 loc) · 9.75 KB

README.md

File metadata and controls

407 lines (260 loc) · 9.75 KB

简介

CSS（层叠样式表，全称 Cascading Style Sheets）是一种声明式语言，用于控制网页内容在浏览器中的呈现方式。它通过设置样式规则，定义页面元素的布局、颜色、字体、动画等外观效果，是 Web 开发中不可或缺的核心技术之一，与 HTML 和 JavaScript 并列为 Web 三大支柱技术。

CSS 的主要功能是为 HTML 元素添加样式，也支持其他标记语言（如 SVG 和 XML）。它通过一组规则为选定的元素指定样式，规则由 选择器 和 样式属性 组成，其中样式属性由 属性名 和 属性值 配对定义。

以下是一个简单的 CSS 示例，将页面中的所有 HTML 段落元素样式设为黑色背景和黄色文字：

p {
  background-color: black;
  color: yellow;
}

CSS 具备以下特点：

  1. 层叠性：多重样式规则可以叠加，浏览器根据优先级和特定性决定最终应用的样式。
  2. 模块化：CSS 可通过外部文件、嵌入式样式表或行内样式分离内容与样式，提升开发效率与代码维护性。
  3. 响应式设计：借助媒体查询等功能，CSS 能适应不同设备和屏幕尺寸。

CSS 的强大功能使其成为现代网页设计中不可或缺的工具，能够帮助开发者轻松实现视觉上的吸引力和用户体验上的优化。

引入方式

CSS 的引入方式主要有三种：行内样式、内嵌样式、外链样式。

行内样式（Inline Style）

直接在 HTML 元素的 style 属性中定义样式。

适合小范围、临时的样式调整，但不利于代码复用和维护。

<p style="color: red; font-size: 16px;">这是行内样式的示例</p>

内部样式表（Internal Style Sheet）

在 HTML 文件的 <style> 标签中定义样式，通常位于 <head> 内。

适合单个页面的样式设置，但对于多页面项目维护性较低。

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

外部样式表（External Style Sheet）

通过 <link> 标签引入外部的 CSS 文件，常用于大型项目，利于代码复用和集中管理。

这是推荐的方式，能够保持结构与样式分离。

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

外部 CSS 示例文件 (index.css)：

@charset "utf-8";
p {
  color: green;
  font-size: 18px;
}

注意：css文件第一行代码需指定字符编码格式，防止出现乱码：@charset "utf-8";

这三种方式可以根据具体需求灵活选择，甚至可以混合使用，但一般推荐优先使用外部样式表以保持代码整洁和维护性。

通过< link >标签引用CSS文件

在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。

<link rel="stylesheet" href="样式表路径+名称.css">

通过 <link> 标签引用外部 CSS 文件有以下主要好处：

  1. 实现样式与内容分离

    将 CSS 样式单独存储在外部文件中，HTML 文件只专注于页面结构，便于维护和更新。

    遵循 Web 开发的**关注点分离（Separation of Concerns）**原则，使代码更清晰。

  2. 提高代码复用性

    外部 CSS 文件可以被多个 HTML 文件引用，无需为每个页面重复编写相同的样式。

    当需要修改全局样式时，只需更新一个 CSS 文件即可，无需逐一修改每个 HTML 文件。

  3. 提升页面加载效率

    外部 CSS 文件可以被浏览器缓存，当用户访问同一网站的多个页面时，样式文件无需重复下载，从而加快页面加载速度。

  4. 方便团队协作

    团队成员可以分别负责 HTML 和 CSS 的编写与优化，提高开发效率。

    外部 CSS 文件作为独立模块，可以在版本控制系统中单独跟踪和管理。

  5. 支持媒体查询和条件加载

    使用 <link> 标签时，可以根据设备类型或屏幕尺寸加载不同的 CSS 文件，便于实现响应式设计。

    <link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">

引用优先级

在 CSS 中，不同的引用方式之间存在优先级，决定了样式规则的应用顺序。以下是 CSS 三种引用方式的优先级从低到高的总结：

优先级从低到高

  1. 外部样式表：

    定义在外部的 .css 文件中，通过 <link> 引入。

    优先级最低，适合全局通用的样式设置

  2. 内部样式表：

    写在 HTML 文档的 <style> 标签中，通常位于 <head> 部分。

    优先级高于外部样式表，适合页面局部的特殊样式设置

  3. 行内样式：

    直接写在 HTML 元素的 style 属性中。

    优先级最高，适合临时、个别元素的样式调整。

优先级规则的补充

除了引用方式，CSS 特殊性（Specificity） 和 重要性（!important） 也会影响优先级：

  1. 特殊性（Specificity）：选择器的特定性越高，优先级越高，例如：

    内联样式的特殊性最高（如 style）。

    ID 选择器比类选择器优先级高。

    类选择器优先于标签选择器。

    /* ID 选择器（优先级更高） */
#example {
  color: green;
}

/* 类选择器 */
.example {
  color: blue;
}

/* 标签选择器 */
p {
  color: red;
}

  2. 重要性（!important）：

    !important 会覆盖正常优先级规则，即使其他样式优先级更高。应谨慎使用，避免难以维护的样式冲突。

    示例：

    p {
  color: red !important; /* 无论其他规则如何，都会优先使用 */
}

总结

优先级总体规则为：

重要性 > 特殊性 > 引入方式 > 源代码顺序。

通常推荐避免滥用行内样式和 !important，优先使用外部样式表以提升代码的可维护性。

CSS 常用单位

CSS 中常用的单位可以分为以下几类：相对单位、绝对单位、时间单位、角度单位和其他特殊单位。以下是具体介绍：

相对单位

相对于某个参照值动态计算的单位，适应性更强，常用于响应式设计。

  1. em

  • 定义：相对于父元素的字体大小（font-size）。

  • 特点：会继承父元素的字体大小，如果嵌套会累积。

  • 示例：

    p {
  font-size: 2em; /* 如果父元素字体大小是 16px，则此处字体大小为 32px */
}

  • 计算： $$ em = 像素值 / 父元素字体大小 $$

  1. rem

  • 定义：相对于根元素（<html>）的字体大小。

  • 特点：不受父元素影响，更适合全局和统一的响应式设计。

  • 示例：

    html {
  font-size: 16px;
}
p {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

  • 计算： $$ 根元素字体大小 = 设备宽度/设计稿宽度 * 100 $$

    $$ rem = 设计稿值 / 100 $$

  1. 百分比

  • 定义：相对于父元素的某些属性值（如 width, height）。

  • 特点：常用于布局中的宽高定义。

  • 示例：

    div {
  width: 50%; /* 占父元素宽度的 50% */
}
  1. vh 和 vw

  • 定义：

    • vh：相对于视口高度的 1%。
    • vw：相对于视口宽度的 1%。

  • 特点：适用于全屏布局。

  • 示例：

    div {
  height: 50vh; /* 占视口高度的 50% */
  width: 100vw; /* 占视口宽度的 100% */
}
  1. vmin 和 vmax

  • 定义：

    • vmin：视口宽度和高度的最小值的 1%。
    • vmax：视口宽度和高度的最大值的 1%。

  • 特点：适合动态调整大小的组件。

  • 示例：

    div {
  font-size: 10vmin; /* 动态调整字体大小，基于视口 */
}

绝对单位

固定的单位，与屏幕分辨率无关，常用于打印或精确的尺寸定义。

  1. 像素（px）

  • 定义：屏幕上的一个物理像素。

  • 特点：使用广泛，适用于精确布局。

  • 示例：

    div {
  width: 100px;
}

时间单位

用于定义动画和过渡的持续时间。

  1. 秒（s）

  • 定义：以秒为单位定义时间。

  • 示例：

    div {
  transition: all 2s; /* 动画持续 2 秒 */
}
  1. 毫秒（ms）

  • 定义：以毫秒为单位定义时间。

  • 示例：

    div {
  transition: all 500ms; /* 动画持续 500 毫秒 */
}

角度单位

用于旋转变换和渐变方向。

  1. 度（deg）

  • 定义：以角度为单位，360° 表示一整圈。

  • 示例：

    div {
  transform: rotate(45deg); /* 旋转 45° */
}
  1. 弧度（rad）

  • 定义：以弧度为单位，2π 表示一整圈。

  • 示例：

    div {
  transform: rotate(3.14rad); /* 旋转约 180° */
}
  1. 百分度（grad）和圈数（turn）

  • 定义：

    • grad：400 百分度等于 360°。
    • turn：1 turn 表示一整圈。

  • 示例：

    div {
  transform: rotate(1turn); /* 旋转一整圈 */
}

其他特殊单位

  1. 无单位值

  • 定义：某些 CSS 属性（如 line-height 或 z-index）接受无单位值。

  • 示例：

    p {
  line-height: 1.5; /* 相对于字体大小的 1.5 倍 */
}

总结

CSS 单位在不同场景有不同的适用性：

  1. 相对单位（如 em, rem, vw）适合响应式设计。
  2. 绝对单位（如 px, cm）适合固定尺寸或打印。
  3. 时间和角度单位主要用于动画和变换。

灵活选择合适的单位可以提高布局的适配性和设计效果。