CSS 学习总结二

发表于 分类于 评论数： 阅读数： 本文字数： 2.2k 阅读时长 ≈ 8 分钟

一、Emmet 语法

（一）Emmet 语法概述

Emmet 语法是一种快速编写 HTML 和 CSS 代码的高效方式，它能显著提高代码编写速度，尤其适用于前端开发人员。借助特定的缩写规则，能快速生成所需的代码结构。

（二）HTML 中的 Emmet 语法

1. 标签生成

  • 直接输入标签名，按下 Tab 键，即可生成对应的 HTML 标签。例如输入 div，按 Tab 键会生成 <div></div>。
  • 可以使用数字后缀来生成多个相同的标签。如输入 p*3，按 Tab 键会生成：
1
2
3
<p></p>
<p></p>
<p></p>

2. 嵌套标签

  • 使用 > 符号表示父子嵌套关系。例如输入 ul>li，按 Tab 键会生成：
1
2
3
<ul>
    <li></li>
</ul>
  • 若要生成多层嵌套，如 div>ul>li，会生成：
1
2
3
4
5
<div>
    <ul>
        <li></li>
    </ul>
</div>

3. 兄弟标签

使用 + 符号表示兄弟关系。例如输入 div+p，按 Tab 键会生成：

1
2
<div></div>
<p></p>

4. 分组

使用括号 () 进行分组。例如输入 (div>p)+(ul>li)，会生成：

1
2
3
4
5
6
<div>
    <p></p>
</div>
<ul>
    <li></li>
</ul>

5. 属性设置

  • 使用 [] 来设置标签的属性。例如输入 a[href="https://www.example.com"]，按 Tab 键会生成：
1
<a href="https://www.example.com"></a>
  • 可以同时设置多个属性，如 input[type="text"][name="username"]，会生成：
1
<input type="text" name="username">

6. 类名和 ID 设置

  • 使用 . 来设置类名，# 来设置 ID。例如输入 div.class1#id1，按 Tab 键会生成：
1
<div class="class1" id="id1"></div>

7. 内容填充

使用 {} 来填充标签内容。例如输入 p{这是段落内容}，按 Tab 键会生成：

1
<p>这是段落内容</p>

8. 编号

使用 $ 进行编号。例如输入 ul>li.item$*3，按 Tab 键会生成：

1
2
3
4
5
ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

（三）CSS 中的 Emmet 语法

1. 属性缩写

  • 许多 CSS 属性都有对应的缩写。例如输入 w100，按 Tab 键会生成 width: 100px;。
  • 常见的缩写还有 h100（height: 100px;）、fs16（font-size: 16px;）等。

2. 颜色缩写

输入 c#f00，按 Tab 键会生成 color: #f00;。

二、CSS 知识深入

（一）CSS 复合选择器

1. 复合选择器概述

复合选择器由两个或多个基础选择器组合而成，能够更精准、高效地选择目标元素，提升样式设置的灵活性和针对性。

2. 后代选择器

  • 定义：用于选择某个元素的所有后代元素，包括子元素、孙元素等。
  • 语法：选择器 1 选择器 2 {样式声明}，中间用空格分隔。
  • 示例：ul li { color: red; } 会将 <ul> 标签内所有 <li> 标签的文本颜色设置为红色。
  • 特点：不限制嵌套层级，只要是后代关系即可匹配。

3. 子选择器

  • 定义：只选择某个元素的直接子元素，即仅匹配下一级的子元素。
  • 语法：选择器 1 > 选择器 2 {样式声明}，使用 > 符号分隔。
  • 示例：div > p { font-size: 16px; } 只会选择 <div> 标签的直接子元素 <p> 并设置字体大小。
  • 特点：只作用于直接子元素，不影响孙元素等更深层级的元素。

4. 并集选择器

  • 定义：用于同时选择多个不同的元素，为它们统一设置相同的样式。
  • 语法：选择器 1, 选择器 2 {样式声明}，使用逗号分隔。
  • 示例：h1, p { margin: 0; } 会将 <h1> 标签和 <p> 标签的外边距都设置为 0。
  • 特点：可以将多个不同类型的选择器组合在一起，提高代码的复用性。

5. 伪类选择器

  • 定义：用于选择元素的特定状态或位置，常见于链接、表单元素等。
  • 常见伪类选择器及用法
    • 链接伪类选择器
      • :link：用于选择未访问的链接，设置其默认样式。
      • :visited：用于选择已访问过的链接，设置其样式。
      • :hover：用于选择鼠标悬停在元素上时的状态，常用于实现交互效果。
      • :active：用于选择元素被激活（如鼠标按下但未松开）时的状态。
      • 注意事项：为了确保样式的正确显示，链接伪类选择器的声明顺序一般为 :link、:visited、:hover、:active，即遵循 LVHA 原则。
    • 其他伪类选择器
      • :focus：用于选择获得焦点的表单元素，如输入框获得焦点时可以改变其样式。

（二）CSS 元素显示模式

1. 显示模式分类

  • 块级元素
    • 常见标签：<div>、<p>、<h1> - <h6>、<ul>、<ol>、<li> 等。
    • 特点：独占一行，宽度默认是父元素的 100%；可以设置宽度和高度；可以包含其他块级元素和行内元素，但 <p> 标签不能包含其他块级元素。
  • 行内元素
    • 常见标签：<a>、<span>、<em>、<strong>、<i>、<u>、<s> 等。
    • 特点：不会独占一行，多个行内元素可以在同一行显示；宽度和高度由内容决定，不能直接设置宽度和高度；只能包含文本或其他行内元素。
  • 行内块元素
    • 常见标签：<img>、<input>、<textarea>、<select> 等。
    • 特点：多个行内块元素可以在同一行显示；可以设置宽度和高度；在同一行显示时，元素之间会有一定的空白间隙。

2. 显示模式转换

  • 使用 display 属性：可以通过设置 `

    1
    2
    3
    .test {
      display: block;
    }

    属性的值来改变元素的显示模式。

    • display: block;：将元素转换为块级元素。
    • display: inline;：将元素转换为行内元素。
    • display: inline-block;：将元素转换为行内块元素。

（三）CSS 背景属性

1. 背景颜色

  • 属性：background-color
  • 取值：可以使用预定义的颜色名称（如 red、blue 等）、十六进制颜色值（如 #ff0000）、RGB 颜色值（如 rgb(255, 0, 0)）或 RGBA 颜色值（支持透明度，如 rgba(255, 0, 0, 0.5)）。

2. 背景图片

  • 属性：background-image
  • 取值：使用 url() 函数指定图片的路径，如 background-image: url('image.jpg');。

3. 背景平铺

  • 属性：background-repeat
  • 取值
    • repeat：默认值，背景图片在水平和垂直方向都平铺。
    • no-repeat：背景图片不平铺。
    • repeat-x：背景图片在水平方向平铺。
    • repeat-y：背景图片在垂直方向平铺。

4. 背景位置

  • 属性：background-position
  • 取值
    • 方位名词：如 left top、center center、right bottom 等，分别表示左上角、居中、右下角等位置。
    • 精确数值：可以使用像素值或百分比来指定背景图片的位置，如 background-position: 20px 30px; 或 background-position: 50% 50%;。

5. 背景固定

  • 属性：background-attachment
  • 取值
    • scroll：默认值，背景图片随页面滚动而滚动。
    • fixed：背景图片固定在页面上，不随页面滚动而滚动。

6. 背景复合属性

  • 属性：background
  • 语法：background: 颜色 图片地址 平铺方式 固定方式 位置;，各属性值之间用空格分隔，且顺序可以任意调整。例如：background: #f00 url('image.jpg') no-repeat fixed center top;

三、总结回顾

（一）Emmet 语法总结

Emmet 语法通过简洁的缩写规则，大大提高了 HTML 和 CSS 代码的编写效率。在 HTML 中可以方便地生成标签、设置属性、嵌套元素等；在 CSS 中能快速输入属性缩写和颜色值。

（二）CSS 知识总结

  1. 复合选择器：后代选择器、子选择器、并集选择器和伪类选择器为精准选择元素提供了强大的工具，根据不同的需求合理使用可以优化样式代码。
  2. 元素显示模式：了解块级元素、行内元素和行内块元素的特点，并掌握通过 display 属性进行显示模式转换，是实现页面布局的基础。
  3. 背景属性：背景颜色、背景图片、背景平铺、背景位置和背景固定等属性可以为页面元素添加丰富的背景效果，复合属性的使用能简化代码书写。

四、涉及单词汇总及翻译

英文单词 中文翻译
Emmet syntax Emmet 语法
ancestor selector 后代选择器
child selector 子选择器
union selector 并集选择器
pseudo-class selector 伪类选择器
block-level element 块级元素
inline element 行内元素
inline-block element 行内块元素
display mode 显示模式
background color 背景颜色
background image 背景图片
background repeat 背景平铺
background position 背景位置
background attachment 背景固定
background shorthand property 背景复合属性
link pseudo-class 链接伪类
hover 悬停
active 激活
focus 焦点
abbreviation 缩写
nest 嵌套
sibling 兄弟
grouping 分组
attribute 属性
class name 类名
ID 标识符
content filling 内容填充
numbering 编号

五、相关参考

B 站 pink 老师视频