CSS笔记 | 青训营

用户9410925091298
158 阅读13分钟

CSS笔记 | 青训营

1. 基本概念

1.1 选择器（Selectors）

当编写CSS样式规则时，选择器是用来标识应该应用样式的HTML元素的方式。选择器可以是元素名、类名、ID名，还可以结合使用伪类和伪元素来更精确地定位元素。下面将详细介绍一些常见的选择器及其使用方法。

  1. 元素选择器（Element Selectors）：使用HTML元素的标签名作为选择器。

    p {
    color: blue;
}

    上面的例子将会使所有 <p> 元素的文本颜色变为蓝色。

  2. 类选择器（Class Selectors）：使用CSS类名作为选择器，类名前加上点号 .。

    .header {
    background-color: #f2f2f2;
}

    上面的例子会将具有 header 类的元素的背景颜色设为浅灰色。

  3. ID选择器（ID Selectors）：使用HTML元素的ID属性作为选择器，ID名前加上井号 #。

    #main-content {
    border: 1px solid #ccc;
}

    上面的例子会将具有 main-content ID的元素添加一个边框。

  4. 组合选择器（Combined Selectors）：结合多个选择器，以逗号分隔。

    h1, h2 {
    font-family: 'Arial', sans-serif;
}

    上面的例子会将所有 <h1> 和 <h2> 元素的字体设为 Arial。

  5. 后代选择器（Descendant Selectors）：选择某个元素的后代元素。

    .container p {
    margin: 10px;
}

    上面的例子会选中所有位于具有 container 类的元素内部的 <p> 元素，然后添加10像素的外边距。

  6. 子元素选择器（Child Selectors）：选择某个元素的直接子元素。

    ul > li {
    list-style-type: circle;
}

    上面的例子会将 <ul> 元素下直接的 <li> 元素样式设为圆圈标记。

  7. 伪类选择器（Pseudo-Class Selectors）：表示元素在特定状态下的样式，使用冒号 :。

    a:hover {
    color: red;
}

    上面的例子会将鼠标悬停在 <a> 元素上时，其文本颜色设为红色。

  8. 伪元素选择器（Pseudo-Element Selectors）：表示元素的特定部分的样式，使用双冒号 ::。

    p::first-line {
    font-weight: bold;
}

    上面的例子会将每个 <p> 元素的首行文本设置为粗体。

  9. 属性选择器（Attribute Selectors）：选择具有特定属性的元素。

    input[type="text"] {
    border: 1px solid #ccc;
}

    上面的例子会选中所有 type 属性值为 text 的 <input> 元素，然后添加一个灰色边框。

这些是一些常见的CSS选择器。了解不同类型的选择器可以帮助您更好地控制和定位HTML元素，从而实现所需的样式效果。

1.2 属性（Properties）

当编写CSS样式规则时，属性用于定义要应用于HTML元素的具体样式。以下是一些常见的CSS属性，涵盖了不同方面的样式设置：

  1. 颜色与背景（Color and Background）：

    • color：定义文本颜色。
    • background-color：定义背景颜色。
    • background-image：设置背景图片。
    • background-size：定义背景图片的尺寸。

  2. 字体与文本（Typography and Text）：

    • font-family：设置字体。
    • font-size：定义字体大小。
    • font-weight：定义字体粗细。
    • text-align：定义文本对齐方式。
    • text-decoration：设置文本装饰，如下划线、删除线等。
    • line-height：设置行高。

  3. 边框与轮廓（Borders and Outlines）：

    • border：设置边框的宽度、样式和颜色。
    • border-radius：设置边框圆角。
    • outline：设置轮廓的宽度、样式和颜色。

  4. 内外边距（Margins and Padding）：

    • margin：设置元素的外边距。
    • padding：设置元素的内边距。

  5. 尺寸与布局（Size and Layout）：

    • width：定义元素宽度。
    • height：定义元素高度。
    • display：设置元素的显示类型（如 block、inline、flex等）。
    • position：定义元素的定位方式。

  6. 浮动与清除（Float and Clear）：

    • float：设置元素浮动。
    • clear：定义哪些元素不能位于浮动元素的旁边。

  7. 背景（Background）：

    • background：汇总设置背景的属性，如颜色、图片和位置。
    • background-size：定义背景图片的尺寸。

  8. 列表（Lists）：

    • list-style-type：设置列表项的标记类型。
    • list-style-image：设置自定义的列表项标记图片。

  9. 盒模型（Box Model）：

    • box-sizing：定义元素的盒模型计算方式，可以是 content-box或 border-box。

  10. 动画与过渡（Animation and Transition）：

    • animation：定义元素的动画效果。
    • transition：定义元素的过渡效果。

  11. 伪类与伪元素（Pseudo-Classes and Pseudo-Elements）：

    • :hover、:active、:focus等：定义元素在不同状态下的样式。
    • ::before、::after：定义元素的伪元素样式。

  12. 媒体查询（Media Queries）：

    • @media：定义不同屏幕尺寸和方向下的样式。

这仅仅是一小部分常见的CSS属性，实际上有很多属性可以用来调整元素的外观和布局。通过组合这些属性，您可以创建丰富多彩、响应式的网页界面。要深入了解每个属性的具体用法和效果，最好参考相关的CSS文档和教程。

1.3 值（Values）

在CSS中，属性的值用于定义要应用到HTML元素的具体样式。不同的属性接受不同类型的值，这些值可以是颜色、长度、百分比、关键字等。下面是一些常见的CSS属性及其可能的值：

  1. 颜色值（Color Values）：

    • 十六进制颜色：#RRGGBB 或 #RRGGBBAA（带透明度）
    • RGB颜色：rgb(R, G, B) 或 rgba(R, G, B, A)（带透明度）
    • 颜色关键字：如 red、blue、green 等

  2. 长度值（Length Values）：

    • 像素（px）：如 20px
    • 百分比（%）：如 50%
    • em：相对于元素的字体尺寸
    • rem：相对于根元素的字体尺寸
    • vh、vw：相对于视口高度和宽度的百分比
    • cm、mm、in、pt：常见的单位

  3. 文本值（Text Values）****：

    • 字符串：如 "Arial", sans-serif
    • 字体关键字：如 serif、monospace

  4. 布尔值（Boolean Values）：

    • visible：元素可见
    • hidden：元素隐藏

  5. 数值值（Numeric Values）：

    • 无单位数值：如 1、0.5
    • 百分比：如 50%

  6. 位置值（Position Values）：

    • 关键字：如 top、bottom、center
    • 百分比：如 50%

  7. 背景定位值（Background Position Values）：

    • 关键字：如 left、center、right
    • 百分比：如 50%

  8. 边框值（Border Values）：

    • 边框样式关键字：如 solid、dashed
    • 边框宽度：如 1px

  9. 缩放值（Scale Values）：

    • 缩放比例：如 scale(1.5)

  10. 旋转值（Rotation Values）：

    • 角度：如 rotate(45deg)

  11. 变换原点（Transform Origin Values）：

    • 关键字：如 top、bottom、center
    • 百分比：如 50%

这些只是一些常见的CSS属性值示例。实际上，每个属性都可能支持多种不同类型的值，具体取决于属性的用途和预期效果。在编写CSS规则时，正确选择适当的属性值是创建所需样式的关键一步。要了解属性及其支持的值，请查阅相关的CSS文档和参考资料。

1.4 样式规则（Rules）

在CSS中，样式规则由选择器、属性和属性值组成，用于定义要应用于HTML元素的样式。以下是一个样式规则的基本结构和解释：

选择器 {
    属性1: 值1;
    属性2: 值2;
    /* 更多属性和值 */
}

让我们逐步解释每个部分：

  1. 选择器（Selector）：选择器指定要应用样式的HTML元素。可以是元素名、类名、ID名，也可以是伪类和伪元素。选择器确定了哪些HTML元素将受到此规则的影响。

    示例：

    p {
    color: blue;
}

    在这个规则中，p 是选择器，表示所有 <p> 元素将会有蓝色的文本颜色。

  2. 属性（Property）：属性定义了要更改的样式方面，如颜色、字体大小、边框等。属性是CSS规则的关键部分，它决定了要对所选元素应用哪种样式。

    示例：

    p {
    font-size: 16px;
}

    这个规则中的 font-size 是属性，它会将所选的元素的字体大小设置为 16 像素。

  3. 属性值（Value）：属性值是属性所对应的具体样式设置。属性值的类型可以是颜色、长度、字体等，具体取决于属性的性质。

    示例：

    p {
    background-color: #f2f2f2;
}

    这个规则中的 #f2f2f2 是属性值，它会将所选的元素的背景颜色设置为浅灰色。

通过结合选择器、属性和属性值，您可以创建复杂的样式规则，从而精确地控制HTML元素的外观和布局。同时，通过将多个样式规则应用于不同的元素，您可以实现整个网页的一致样式和布局。最终，样式规则使您能够在网页中呈现出美观、专业和功能良好的界面。

1.5 层叠性（Cascading）

层叠性（Cascading）是CSS的一个重要概念，用于描述当多个样式规则同时适用于同一元素时，浏览器如何确定哪个样式规则的属性值应该被应用到元素上。层叠性是确保不同样式规则能够合理地共存和决定优先级的机制。

CSS中的层叠性涉及以下三个方面：

  1. 优先级（Specificity）：每个选择器都有一个特定性（specificity）值，表示选择器的特定程度。特定性值是一个有四个部分组成的四元组：行内样式、ID选择器、类选择器/属性选择器/伪类选择器、元素选择器。特定性值越高，表示选择器越具体，其样式规则的优先级也就越高。

    例如，以下规则中的选择器特定性值从高到低依次排列：

    p#intro    /* 特定性值：0, 1, 0, 1 */
.content   /* 特定性值：0, 0, 1, 0 */
p          /* 特定性值：0, 0, 0, 1 */

  2. 重要性（!important）：通过在属性值后面添加 !important，可以让特定规则具有更高的优先级。但是，滥用 !important 可能导致样式难以管理和维护，应该谨慎使用。

    示例：

    p {
    color: blue !important; /* 这个规则具有更高的优先级 */
}

  3. 源代码顺序：当特定性和 !important 都没有明确决定规则的优先级时，最后出现在CSS文件中的规则将覆盖之前的规则。

层叠性的机制确保了多个样式规则在一个文档中可以协同工作，而不是互相冲突。理解层叠性有助于开发者正确管理样式，确保期望的样式被应用，并且可以避免出现意外的覆盖和不一致的外观。

盒模型与布局

盒模型和布局是CSS中非常重要的概念，它们决定了HTML元素在页面中的尺寸、位置和排列方式。让我们分别具体讲解一下盒模型和布局：

盒模型（Box Model）：

盒模型指的是将HTML元素看作一个矩形盒子，这个盒子由四个部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。CSS中的各种样式属性可以用来控制这些部分的尺寸和样式。

以下是盒模型的四个部分：

  1. 内容区域（Content）：这是元素实际显示内容的部分，例如文本、图片或其他嵌套的元素。
  2. 内边距（Padding）：内边距是内容区域与边框之间的空间，可以用来控制内容与边框的距离。
  3. 边框（Border）：边框是围绕内容和内边距的一条线，可以设置样式、颜色和宽度。
  4. 外边距（Margin）：外边距是元素与相邻元素之间的空间，用来控制元素之间的距离。

示例：

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid #ccc;
    margin: 20px;
}

上述例子中，.box 类的元素将会被设置为一个200x100像素的盒子，内边距为10像素，边框为2像素的灰色实线，外边距为20像素。

布局（Layout）：

布局指的是如何在页面上排列和定位HTML元素，以创建所需的页面结构。CSS提供了多种布局技术来实现不同的布局效果。以下是一些常见的布局技术：

  1. 定位（Positioning）：使用 position属性可以设置元素的定位方式，如 static（默认）、relative、absolute和 fixed。通过配合 top、bottom、left和 right属性，可以使元素相对于父元素或视口定位。
  2. 浮动（Floating）：通过 float属性可以使元素浮动到其容器的一侧，实现文本环绕、多列布局等效果。
  3. 弹性布局（Flexbox）：使用 display: flex可以创建弹性容器，通过设置 flex-direction、flex-grow、flex-shrink等属性，可以轻松创建自适应的布局。
  4. 网格布局（Grid）：使用 display: grid可以创建网格布局，通过网格容器和网格项的属性，可以实现复杂的页面布局。
  5. 响应式设计（Responsive Design）：通过使用媒体查询（@media）和相对单位（如百分比、em、rem），可以实现不同设备和屏幕尺寸下的自适应布局。

综合使用这些布局技术，可以实现各种各样的页面结构和排列方式，从简单的居中布局到复杂的多列响应式布局。掌握这些布局技术是创建现代、功能齐全的网页所必需的一部分。

响应式设计与媒体查询

响应式设计是一种Web设计方法，旨在使网站在各种设备和屏幕尺寸下都能提供最佳的用户体验。媒体查询是响应式设计的关键工具之一，它允许您根据设备属性（如宽度、高度、方向等）来应用不同的CSS样式，以适应不同的屏幕尺寸和方向。

媒体查询使用 @media规则，其基本语法如下：

@media (条件) {
    /* 样式规则 */
}

媒体查询条件可以是以下之一：

  1. 宽度和高度：例如，针对小屏幕应用样式，可以使用以下媒体查询：

    @media (max-width: 768px) {
    /* 在宽度小于768像素时应用的样式 */
}

  2. 设备方向：可以根据设备是横向（landscape）还是纵向（portrait）来应用不同的样式：

    @media (orientation: landscape) {
    /* 横向方向应用的样式 */
}

  3. 像素密度：可以根据设备的像素密度来应用不同的样式，以支持高清屏幕：

    @media (min-resolution: 2dppx) {
    /* 高像素密度（Retina）屏幕应用的样式 */
}

  4. 复合条件：您还可以将多个条件组合在一起，以更精确地定位不同的设备和屏幕：

    @media (max-width: 768px) and (orientation: portrait) {
    /* 在宽度小于768像素且纵向方向时应用的样式 */
}

响应式设计和媒体查询的优点在于，您可以使用相同的HTML内容，通过适当的CSS样式，在不同的设备上呈现出最佳的布局和外观。这有助于提高用户体验，并确保您的网站在各种设备上都能够正常使用。通过合理使用媒体查询，您可以创造出灵活、适应性强的网页界面。

实用技巧与预处理器

  1. 伪类与伪元素：使用伪类（如 :hover）和伪元素（如 ::before和 ::after）可以为元素添加特殊样式。
  2. 继承（Inheritance）：某些样式属性会继承父元素的样式，如字体样式。
  3. CSS预处理器：工具如Sass和Less允许使用类似编程语言的语法编写CSS，提供变量、嵌套、混合等功能。

总结

CSS是一种用于控制网页样式和布局的关键技术。通过选择器、属性和值的组合，开发者可以精确控制网页的外观，创造各种视觉效果，实现响应式设计，并通过强大的布局技巧构建现代化的网页界面。理解CSS的基本概念和语法，可以让您更好地掌控网页的呈现方式。

avatar
文章
阅读
粉丝