html 伪元素原理,CSS工作原理

文档流

文档流，就是HTML元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。

元素

显示元素

块级元素

相互堆叠在一起沿页面向下排列，每个元素分别占一行。块级元素盒子会扩展到与父元素同宽，所有块级元素的父元素都是body，而它的宽度默认与浏览器的窗口一样宽(当然有少量边距)。

行内元素

相互并列，只有在空间不足以并列的情况下才会折到下一行显示。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。

可替换元素和不可替换元素

可替换元素

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有widht和height，可以设定。

比如：，没有指定img的width和height，就按照内在尺寸显示，也可以通过设置width和height来显示图片。

不可替换元素

大多数元素是不可替换元素，即其内容直接表现给浏览器。

文档添加样式的三种方法

行内样式

行内样式是写在html标签上的style，比如：

inline css styling

嵌入样式

嵌入的css样式是防在html文档的head元素中，比如：

div {

font-size: 12px;

color: red;

}

链接样式

将样式表文件引到当前文档中，比如：

样式表中链接其他样式

@import url(css/style2.css)

@import指令必须出现在样式表中其他样式之前，否则@import引用的样式表不会被加载。

CSS命名惯例

CSS规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。

p {color: red;}

p：选择符

{color: red;}：声明

color：属性

red：值

对这个基本结构，有三种方法进行扩展：

多个声明包含在一条规则里

p {color: red; font-size: 12px; font-weight: bold;}

多个选择符组合在一起

h1, h2, h3 {color: red; font-weight: bold;}

多条规则应用给一个选择符

h1, h2, h3 {color: red; font-weight: bold;}

h3 {font-style: italic;}

特定元素选择符

上下文选择符：就是一组以空格分隔的标签名，用于选择作为指定祖先元素后代的标签。

article p {font-size: 14px;}

只有article后代的p元素才会应用后面的样式。

* *特殊的上下文选择符*

* 子选择符 >

标签1 > 标签2，标签2必须是标签1的子元素。 section > h2 {font-weight: bold;}

* 紧邻同胞选择符 +

标签1 + 标签2，标签2必须紧跟在其同胞标签1的后面。 h2 + p {font-size: 14px;}

* 一般同胞选择符 ~

标签1 ~ 标签2，标签2必须跟(不一定紧跟)在其同胞标签1后面。 h2 ~ a {color: red;}

* 通用选择符 \*

匹配任何一个元素。 * {margin: 0; padding: 0;}

ID和类选择符

同一个页面中的每一个id属性都必须只能用一次。

同一个页面中相同的类可以有多个，类的目的是为了标识一组具有相同特征的元素。

#nav {

width: 100%;

}

.logo {

width: 80px;

height: 80px;

}

属性选择符

属性名选择符

标签名[属性名]

选择任何带有属性名的标签名。img[title] {border: 1px solid green;}

属性值选择符

标签名[属性名="属性值"]

选择任何带有值为属性值的属性名的标签名。img[title="flower"] {border: 1px solid red;}

在html5中属性值的引号可加可不加

伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种：UI伪类和结构化伪类。

UI伪类

UI(User Interface，用户界面)伪类会在HTML元素处于某个状态时，为该元素应用CSS样式。

链接伪类

链接还未点击

visited 链接已经点击过

hover 鼠标悬停在链接上

active 链接正在被点击

a:link {color: red;}

a:visited {color: blue;}

a:hover {color: green;}

a:active {color: yellow;}

:focus伪类

表单中的文本字段获取焦点时

input:focus {border: 1px solid red;}

:target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标(target)，可以用:target伪类选中它。

例如：用户点击链接转向ID为more的元素时，为该元素添加红色背景。

more information

This is the information

#more:target {background: red;}

结构化伪类

结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用CSS样式。

:first-child 和 :last-child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。

:nth-child

:nth-child(n)， n代表一个数值，一组同胞元素中第n个元素。

伪元素

伪元素就是你的文档中若有实无的元素。

::first-letter

选中首字母

p::first-letter {font-size: 300%;}

::first-line

可以选中文本段落(一般情况下是段落)的第一行

p::first-line {font-variant: small-caps;}

::before 和 ::after伪元素

可用于在特定元素前面和后面添加特殊内容。

18

.age::before {content: "Age: ";}

.age::after {content: " years.";}

搜索引擎不会取得伪元素的信息(因为它在标记中并不存在)。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。

继承

CSS中的元素会继承其祖先元素中一部分CSS属性的值。

字体和文本样式是可以继承的。

层叠

层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。

浏览器层叠各个来源样式的顺序：

浏览器默认样式表

用户样式表

作者链接样式表(按照它们链接到页面的先后顺序)

作者嵌入样式

作者行内样式

层叠规则：

层叠规则一：找到应用给每个元素和属性的所有声明。

层叠规则二：按照顺序和权重排序。

层叠规则三：按特指度排序。

标记规则：

优先级顺序：ID、类、元素(标签)名

比如：

div .nav 特指度：0 1 1

div ul.nav .item 特指度：0 2 2

#nav li.item 特指度：1 1 1

div#nav li.item 特指度：1 1 2

比较时从特指度高向特指度低方向比较

层叠规则四：顺序决定权重。

如果两条规则都影响某元素的同一属性，而且它们的特指度也相同，则位置最靠下(或后声明)的规则胜出。

注：!import的优先级最高

规则声明

文本值

所有CSS的属性都有文本值。如：visibility属性有visible和hidden值。

数字值

数字值用于描述元素的各种长度。数字值主要分两类：绝对值和相对值。

绝对值

单位缩写

英寸

in

厘米

cm

毫米

mm

点

pt

皮卡

pc

像素

px

相对值

单位缩写

Em

em

Ex

ex

百分比

%

颜色值

1. 颜色名，如red

2. 十六进制颜色(#RRGGBB或#RGB)，如#ff803a

3. RGB颜色值(R， G， B)，如rgb(255, 255, 255)

4. RGB百分比值(R%，G％，B％)，如100%, 0%, 0%

5. HSL(色相，饱和度%，亮度%)，如HSL(0, 0%, 0%)

6. Alpha通道，1表示完全不透明，0表示完全透明