CSS工做原理

时间 2019-12-21

标签 css 原理栏目 CSS 繁體版

原文原文链接

文档流

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

元素

显示元素

块级元素
相互堆叠在一块儿沿页面向下排列，每一个元素分别占一行。块级元素盒子会扩展到与父元素同宽，全部块级元素的父元素都是body，而它的宽度默认与浏览器的窗口同样宽（固然有少许边距）。html
行内元素
相互并列，只有在空间不足以并列的状况下才会折到下一行显示。行内元素盒子会“收缩包裹”其内容，而且会尽量包紧。html5

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

可替换元素
可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素通常有内在尺寸，因此具备widht和height，能够设定。浏览器

好比：<img src="logo.png">，没有指定img的width和height，就按照内在尺寸显示，也能够经过设置width和height来显示图片。字体

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

文档添加样式的三种方法

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

<div style="font-size: 12px; color: red;">inline css styling</div>

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

<head>
    <style type="text/css">
        div {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

连接样式
将样式表文件引到当前文档中，好比：orm

<link rel="stylesheet" type="text/css" href="style.css">

样式表中连接其余样式
@import url(css/style2.css)
@import指令必须出如今样式表中其余样式以前，不然@import引用的样式表不会被加载。

CSS命名惯例

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

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属性都必须只能用一次。

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

<div id="nav" class="logo "></div>

#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样式。
1. 连接伪类
2. 连接还未点击
visited 连接已经点击过
hover 鼠标悬停在连接上
active 连接正在被点击
```
a:link {color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}
```
1. :focus伪类
  表单中的文本字段获取焦点时
```
input:focus {border: 1px solid red;}
```
1. :target伪类
  若是用户点击一个指向页面中其余元素的连接，则那个元素就是目标（target），能够用:target伪类选中它。
例如：用户点击连接转向ID为more的元素时，为该元素添加红色背景。
```
<a href="#more">more information</a>
<p id="more">This is the information</p>
```
```
#more:target {background: red;}
```
结构化伪类
结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用CSS样式。
1. :first-child 和 :last-child
  :first-child表明一组同胞元素中的第一个元素，而:last-child则表明最后一个。
2. :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伪元素
可用于在特定元素前面和后面添加特殊内容。

<p class="age">18</p>

.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表示彻底透明