深入理解CSS ｜ 青训营

湖边的奥利奥
100 阅读6分钟

1. 什么是CSS？

CSS，层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义网页或文档外观和布局的标记语言。它与HTML（超文本标记语言）一起被广泛用于构建和设计网页。CSS为网页提供了样式和布局的指令，使开发者能够控制文本、图像、背景、边框、间距等元素的外观，从而实现更丰富、美观和一致的用户界面。

CSS的主要功能包括：

  1. 样式定义：通过CSS，开发者可以定义元素的颜色、字体、大小、间距、边框等外观样式，使网页具有吸引人的视觉效果。
  2. 布局控制：CSS允许开发者指定元素的位置、对齐方式、浮动等，从而实现网页布局的自定义和控制。
  3. 响应式设计：CSS可以用于创建响应式设计，使网页能够根据不同设备的屏幕尺寸和方向进行适应和排布，提供更好的用户体验。
  4. 分离内容和样式：开发者可以将网页的内容和外观分开，这样一方面提高了代码的可维护性，另一方面也使得样式可以在多个页面中共享。

2. CSS选择器

CSS使用选择器和声明的组合来应用样式。选择器用于定位要应用样式的HTML元素，而声明包含了要应用的样式属性及其值。以下是一个简单的CSS代码示例：

/* 选择器: 目标是所有<p>元素 */
p {
    color: blue;
    font-size: 16px;
}

CSS选择器是用于定位和选择HTML文档中特定元素以应用样式的模式。它们是CSS样式规则的一部分，用于确定哪些HTML元素将受到特定样式属性的影响。以下是一些常见的CSS选择器类型：

  1. 元素选择器 ：通过HTML元素的标签名称选择元素。例如，p选择器将匹配所有<p>元素。
  2. 类选择器 ：通过HTML元素的class属性选择元素。类选择器以点（.）开头，后面跟着类名。例如，.my-class选择器将匹配所有具有class="my-class"属性的元素。
  3. ID选择器 ：通过HTML元素的id属性选择元素。ID选择器以井号（#）开头，后面跟着id名称。例如，#my-id选择器将匹配具有id="my-id"属性的元素。
  4. 属性选择器 ：通过HTML元素的属性值选择元素。例如，[type="text"]选择器将匹配所有具有type="text"属性的元素。
  5. 后代选择器 ：选择嵌套在其他元素内部的元素。例如，div p选择器将匹配所有在<div>内部的<p>元素。
  6. 子元素选择器 ：选择作为特定父元素的直接子元素的元素。例如，ul > li选择器将匹配所有作为<ul>的直接子元素的<li>元素。
  7. 伪类选择器 ：通过元素的状态或位置选择元素。例如，:hover选择器将匹配鼠标悬停在元素上时的状态。
  8. 伪元素选择器 ：用于在元素的特定部分应用样式。例如，::before选择器可以在元素的前面插入一个虚拟的内容。

这些选择器可以组合使用，以便更精确地选择所需的元素。例如，.container > ul li选择器将选择作为class="container"的直接子元素的<ul>，然后选择其中的所有<li>元素。

3. CSS选择器权重

CSS选择器权重（Specificity）是用于确定哪个样式规则应该适用于特定HTML元素的一种机制。当多个规则应用于同一元素时，选择器权重决定了哪个规则的样式将优先生效。选择器权重通常是由选择器本身的类型和数量决定的。

CSS选择器权重由四个部分组成，按照优先级递增排列：

  1. 内联样式：内联样式是直接在HTML元素的style属性中定义的样式。它们的权重最高，为1000。
  2. ID选择器：使用ID选择器定位元素，它们的权重为100。
  3. 类选择器、属性选择器和伪类选择器：这些选择器的权重为10。
  4. 元素选择器和伪元素选择器：这些选择器的权重为1。

权重是各个部分权重相加得到的。例如，如果有一个内联样式、一个ID选择器和一个类选择器，它们的权重分别是1000、100和10，总权重为1110。通常情况下，具有较高权重的样式将覆盖具有较低权重的样式。

4. LESS简介

LESS是一种CSS预处理器，它扩展了标准的CSS语法，为开发者提供了更强大的工具和功能来编写和组织样式表。LESS允许开发者使用变量、嵌套、混合、函数等高级特性，从而使样式表的编写更加简洁、可维护和模块化。

以下是一些LESS与标准CSS之间的区别：

  1. 变量 ：LESS允许开发者定义变量，以便在样式中重复使用特定的值。这有助于在整个样式表中保持一致性和易于维护。
  2. 嵌套 ：在LESS中，开发者可以在父元素选择器内部嵌套子元素选择器，以形成更清晰的层次结构。这样可以减少代码嵌套和提高可读性。
  3. 混合 ：混合是一种将一组属性应用于多个选择器的方式。开发者可以在LESS中创建混合，然后在需要的地方调用它们，以减少重复的样式代码。
  4. 函数 ：LESS支持自定义函数，这些函数可以用于处理样式值，执行计算和生成动态样式。
  5. 操作符 ：LESS允许开发者使用数学和逻辑操作符来处理样式值，这样可以在样式表中执行简单的计算。
  6. 导入 ：通过使用@import指令，开发者可以将多个LESS文件合并为一个文件，从而使样式表结构更加模块化和可管理。
  7. 生成 ：LESS文件需要通过编译器转换为普通的CSS文件，然后在网页中使用。这意味着在开发过程中，开发者编写的是LESS代码，而用户在浏览器中看到的是编译后的CSS样式。
// 1. 变量
@main-color: #007bff;
@font-size: 16px;

// 2. 嵌套
.container {
  padding: 20px;
  background-color: #f0f0f0;
  
  // 3. 混合
  .box {
    border: 1px solid @main-color;
    padding: 10px;
    font-size: @font-size;
  }
}

// 4. 函数
@base-width: 200px;
@multiplier: 2;

.large-box {
  width: calc(@base-width * @multiplier);
}

// 5. 操作符
@padding: 10px;
@margin: 5px;

.button {
  padding: @padding + 5px;
  margin: @margin * 2;
}

// 6. 导入
@import "other-styles.less";
avatar
文章
阅读
粉丝