lbp的blog

纸上得来终觉浅，绝知此事要躬行

0%

css备忘

发表于 更新于 分类于 ，

学习备忘css，包括:

  • css 属性值语法, 能够看懂理解 MDN 文档的 formal syntax
  • css 伪类,伪元素的理解 内容比较多, 可以参考左侧目录

css 规范的制定

css2 之后,css 工作组意识到已经不能够将所有的规则塞到一个规范里面, 因此将css打散到不同的规范当中
对于已经在 2.1 中存在的特性, 版本号升级到3, 一些新增加的版本号从1开始

ALL STANDARDS AND DRAFTS

CSS Working Group Editor Drafts

CSS 参考-MDN

css 属性值语法

  在使用css时总是被它属性的灵活性所困扰, 比如: ‘padding’: 可以设置 1-3 个值, ‘border’: 的三个值可以任意交换顺序.这种灵活性总是给我一种混乱感, 在写 css 时,总是让我怀疑自己 写的程序, 因为我不知道自己写的是否符合规范.待页面呈现在我的面前时, 我会发现: 哦, 貌似没有什么问题 . 但是我不知道为什么这样写也可以, 或者说这是我试验猜测而得到

  这种 试验-验证 多了,总是让人对自己产生怀疑. 所以, 才使我 研究 css语法, 有法所依, 消除猜测

  本章节会列举属性值语法所用到符号. 以及一个以 padding 为例, 对属性值语法 的解读

基础数据类型 <>

基本数据类型使用 < > 括起来, 比如 <length> <percentage>

成分组合

单管道符号 |

  • 只需一个值出现
    css里面有很多使用 | 描述的属性,比如 text-align , float
    float
    text-align

    双管道符号 ||

  • 一个或者多个值必须出现
  • 顺序任意
    border 就是典型的使用 || 描述的属性
    border

    双与符号 &&

  • 值必须出现
  • 顺序任意
    比如下面的 box-show
    box-shadow

    中括号 []

  • 中括号里面内容作为一个单独的组
    已padding 为例,表示: 由 length 或者 percentage 组成的成分, 出现 1-4 次
    padding

    相邻值

  • 给定的值必须出现
  • 必须按照给定的顺序

    成分累加

    问号 ?

  • 零次或者一次

    星号 *

  • 零次或者多次

    井号 #

  • 一次或者多次, 需要逗号

    加号 +

  • 一次或者多次, 无需逗号

    {A}

  • 出现大括号中内容的次数

    {A,B}

  • 出现 A-B 次(含A,B)

    {A,}

  • 至少出现A次, 没有上限

    叹号 !

  • 修饰在 [] 后面, 表示该组是必须的, 并且产生一个成分值

    总结

    总结

    padding 为例的解读

    padding
  • | 表示 可以使用 length 或者 percentage 基本数据类型
  • {1, 4} 表示 前面的组可以出现 1-4 次

从语法规范上看我们可以设置 padding 可能的值就比较明了, 有法可依

参考

理解 CSS 属性值语法 – Smashing Magazine
CSS Values and Units Module Level 3

css 选择器

w3c-css选择器

组合选择器

后代选择器 A B

1
div p

可以选择div元素的所有后代p元素

如果A和B之前没有空格，代表如下意思：

1
2
3
<div class="A B">
    
</div>

子代选择器 A > B

1
div > p

选择div元素的所有子代p元素

相邻兄弟选择器 A + B

A 和 B是同一级相邻元素，选中B元素

通用兄弟选择器 A ~ B

A 和 B是同一级，B位于A的后面，选中所有B元素

伪类

css 伪类是添加到 选择器 的 关键字 用来指定要选择元素的特殊状态
使用 : 开头

伪类和伪元素的来源

In CSS 2.1, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4 (see [HTML4]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it.

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

出自: 5 Selectors

从上面的摘抄可以看出, 伪类最初的引入目的: 是为了应对一些特殊的情况: permit formatting based on information that lies outside the document tree

个人理解: 伪类可以认为是一种特殊的选择器
基于用户行为的(:hover, :active, :focus …)
基于元素状态的(:enabled, :disabled, :checked, :indeterminate)
基于元素结构的(:first-child :last-child :nth-child :nth-last-child :first-of-type :last-of-type :nth-of-type :nth-last-type :only-type)

伪元素

个人理解: 伪元素存在的目的是为了保证 html 的语义化, css用来添加一些样式上的表现内容, html 上一些非正式东西可以使用伪元素

常用伪元素

::after ::before

  • 作为被选中元素的 子元素
  • 被添加的伪元素是 行内元素