小萝莉的游乐园

本文介绍的是CSS世界中务必了解的专业术语，包括属性、值、关键词、变量、长度单位、功能符、属性值、生命、声明块、规则或规则集、选择器、关系选择器、@规则以及CSS世界中的“未定义行为”。

案例：

.vacabulary{
    height: 99px;
    color: transparent;
}

1. 属性

例如上面案例中的高度和颜色就是CSS世界的属性，CSS属性就是魔法师。

2. 值

CSS的各种属性值就是魔法师的魔法技能。
在CSS世界中，值得分类十分广泛，比较常用的有：

  • 整数值，如z-index:1中，1属于,同时也属于
  • 数值，如line-height：1.5中的1.5
  • 百分比值，如padding：50%中的50%
  • 长度值，如99px
  • 颜色值，如#999

此外，还有字符串值、位置值等类型。在CSS3新世界中，还有角度值、频率值、时间值等类型。

3. 关键词

4. 变量

CSS中目前可以称为变量的比较有效，CSS3中的currentColor就是变量，非常有用：currentColor-CSS3超高校级好用CSS变量;

以及阮一峰老师的自定义CSS变量教程：
CSS 变量教程

5. 长度单位

CSS中的单位有时间单位（如s、ms）,还有角度单位（如deg、rad等），但最常见的还是长度单位。长度单位分为：

  • 绝对长度单位：彼此固定，不会因为其他元素的尺寸变化而变化。主要有px、cm、mm、Q、in、pc、pt(eg:除px外，其他基本不用)
  • 相对长度单位：指定相对于另一长度的长度。主要有em、ex、ch、rem、%和可视区百分比长度单位 vm、vh、vmin、vmax

注意：

  • 2%属于数值，这里的%不是长度单位
  • “值”里面的<length和长度单位的关系：<numberre>+长度单位=<length>;

6. 功能符

值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url)、元素属性值、计算（calc）和过渡效果等，如rgba (0,0,0,0)、url(“css-world.png”)、attr(“herf”)、scale(-1)

7. 属性值

属性冒号后面的内容统一称为属性值

8. 声明

属性名+属性值

9. 声明块

声明块就是花括号{}包裹的一系列声明

10. 规则或规则集

出现了选择器，而且后面跟着声明块，如本文最上面的案例。

11. 选择器

用来瞄准目标元素的东西。

  • 类选择器：如.umbrella
  • ID选择器：如#id
  • 属性 选择器：如[attribute] [target] 选择带有 target 属性所有元素
  • 伪类选择器：一般前面有一个：
  • 伪元素选择器：有两个冒号的原则，::selection ::selection 选择被用户选取的元素部分。

这里放上更详细的介绍：CSS 选择器参考手册

12. 关系选择器

根据与其他元素的关系选择元素的选择器，常见的有：

  • 后代选择器 空格连接
  • 相邻后代选择器 >连接
  • 兄弟选择器 ~连接 （注意：是当前元素后面所有的的合规则的那个同父的兄弟元素）
  • 相邻兄弟选择器： +连接 （注意：仅仅选择当前元素相邻的那一个同父元素的合规则的兄弟元素。且适用于IE7以上版本）

13. @规则

指的是以@字符开头的一些规则，例如@media、@font-face、@page或@support

现实世界中，法律约束我们的行为，如果越界，就叫违法；在CSS世界中，有Web标准约束元素的行为，如果越界就称为bug。不过不可能面面俱到，法律会有法律空白，在CSS世界也会有”未定义行为”。
例如以下这个案例：FireFox mousedown干掉:active实例页面

HTML：

正常情况：
<a href="javascript:" class="active-btn">按下</a>
包含JS：
<a href="javascript:" id="button" class="active-btn">按下</a>

CSS：

.active-btn {
    display: inline-block; 
    background-color: #cd0000;
}

.active-btn:active {
    background-color: #ae0000;
}

JavaScript：

var button = document.getElementById("button");

if (button.addEventListener) {
    button.addEventListener("mousedown", function(event) {
    // 此处省略N行
    event.preventDefault();    
    });
}

现象描述：在FireFox浏览器中，点击“正常情况按钮”会出现按钮点击样式，但点击“包含js的按钮”，则不会有按钮点击样式CSS未定义行为

原因分析：因为规范上并没有对这种场景的具体描述，所以FireFox认为：active发生在mousedown事件之后。（IE/Chrome反之认为）

像这种规范估计不到的细枝末节的实现，就称之“未定义行为”

本文内容我对张鑫旭老师《CSS世界》一书第二章的学习笔记，感谢张鑫旭老师，也感谢阅读本文的你给我的鼓励!

作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！

 Previous

CSS