浅谈MDN CSS

CSS：Cascading Style Sheets层叠样式表

CSS是一门指定文档该如何呈现给用户的语言。

---

为什么使用CSS？

1) 避免重复

2) 更容易维护

3) 为不同的目的，使用不同的样式而内容相同

---

浏览器展现一个文档必须要把文档内容和相应的样式信息结合起来展示，分为以下两个阶段：

1) 浏览器先将HTML和CSS转换成DOM结构。

2) 浏览器再把 DOM的内容展示出来。

---

样式的层叠：

1) 浏览器定义的默认样式。

2) 用户定义的样式。

3) 开发者定义的样式，可以有三种形式：

①　外链样式——定义在外部文件。

②　内联样式——在页面的头部定义。

③　行内样式——定义在特定的元素身上。

说明：

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式，作为网页的开发者只需要关注开发者样式。

CSS另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。这就意味着，开发者很难准确地预知页面最终在用户电脑上的显示效果。

---

伪类：

:link:visited:active:hover:focus:first-child:nth-child:nth-last-child:nth-of-type:first-of-type:last-of-type:empty:target:checked:enabled:disabled

---

创建可读性良好的 CSS：

添加空格、tab字符和换行等空白字符。

当很多元素具有相同的样式时，就需要定义一个选择器组，组内用逗号分隔。

---

font属性设置：

1) 使用系统内置的值来设置字号，如small,medium和large。

2) 使用相对父元素字号大小的值来设置，如：smaller,larger,150%或1.5em。

3) 指定一个实际的大小，如：15px。

一个比较容易实现的策略：给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。

font-varient: small-caps;指定文本为小型大写字母。

--

color属性设置：

1) 17种标准颜色名字（另有130 种其他颜色）

blackgray/greywhiteredlime(绿黄)silver(银)blue
yellow
orange
aqua（水绿）
fuchsia（紫红）
maroon（褐红）
green
purple
teal（兰绿）
olive（橄榄绿）
navy（海军蓝）
 

2) 使用代表红，绿，蓝三个颜色的16进制数字（3位 or 6位）

3) 使用代表红，绿，蓝三个颜色的RGB值（0-255或百分比）

---

内容设置：

1) 文本内容设置

CSS可以在元素的前后插入文本：在选择器的后面加上::before 或::after，通过content属性设置插入的文本内容（用引号括住的字符串）。

span::before {content: "Reference: ";}

2) 图片内容设置

CSS可以在元素的前后插入图片：在选择器的后面加上::before 或::after，通过将content属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

span::after{   content: url("images/img.png");}