程序员

CSS MDN文档阅读笔记-CSS介绍

2018-11-29  本文已影响9人  梧上擎天

因为公司前端需要救火队员，所以临危受命，摆正心态，阅读第一手资料，从MDN文档入手。

定义

CSS： (Cascading Style Sheets) 是用来样式化和排版你的网页的，是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等

CSS是如何工作的？

当浏览器显示文档时，它分为两个阶段处理文档：

  1. 浏览器将HTML和 CSS 转化成 DOM。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

  2. 浏览器显示 DOM 的内容


CSS引用方式

CSS语法 (这部分需要动手练 + 随时查询文档)

CSS声明

如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它

CSS声明块

CSS 选择器和规则

如果链或组中的某个选择器无效，比如使用了未知的伪元素或伪类，整个组的选择器仍然是有效的，除了这个无效的将被忽略的选择器。

CSS 语句

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种
@-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
@charset 和 @import （元数据）
@media 或 @document （条件信息，又被称为嵌套语句，见下方。)
@font-face （描述性信息）

简写

比如 font ,background,padding,border,magin允许一行设置多个属性，使代码简洁。

/* 在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left。它们还有其他简写方式，例如给padding两个值，则第一个值表示top/bottom，第二个值表示left/right */
padding: 10px 15px 15px 5px;

等同于

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

再比如：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
等同于

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

选择器

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。

值包含的被空格分隔的取值列表里中的一个。

a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}
名称 组合器 选择
选择器组 A,B 匹配满足A（和/或）B的任意元素
后代选择器 A B 匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器 A > B 匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器 A + B 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器 A ~ B 匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） 
h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

CSS数值与单位

数值

像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下：

也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口尺寸。

百分比

针对父元素的百分比

颜色

函数

每当你看到一个名字后跟着括号,括号里包含用逗号分隔的一个或多个值,那么你所使用的就是一个函数。例如:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

层叠和继承

层叠性 ： 就近原则

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

  1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
  2. 样式不冲突，不会层叠
  3. 贡献值
    关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 重要的 ∞ 无穷大

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

继承性： 子承父业

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS为处理继承提供了四种特殊的通用属性值：

注意: initial 和 unset 不被IE支持。

上一篇下一篇

猜你喜欢

热点阅读