CSS小结

最近再次读了《精通CSS 高级Web标准解决方案》，有了项目经验以及一些踩过的坑让我对CSS的理解更为深刻一些，借此机会将原文更新一下，以此来记录我的理解之路。(づ￣ 3￣)づ　　　　

1.基本概念

1.什么是 CSS?

  1. CSS 指层叠样式表 (Cascading Style Sheets)
  2. 样式定义如何显示 HTML 元素
  3. 样式通常存储在样式表中
  4. 把样式添加到 HTML 中，是为了解决内容与表现分离的问题
  5. 外部样式表可以极大提高工作效率
  6. 外部样式表通常存储在 CSS 文件中
  7. 多个样式定义可层叠为一

2.如何插入样式表

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head>

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

</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

2.内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样:

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

3.内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

4.多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

5.多重样式将层叠为一个——层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于<head>标签内部）
  4. 内联样式（在 HTML 元素内部）
  5. !important的用户样式

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

Remark提示:如果你使用了外部文件的样式在<head>中也定义了该样式，则内部样式表会取代外部文件的样式。

2.重点概念

2.1 选择器

选择器通常是您需要改变样式的 HTML 元素（标签）。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

用来去找到需要设置样式的元素。

2.1.1 常用选择器

1.元素选择器（类型选择器或简单选择器）：

p {color: black;}

2.后代选择器

选择特定元素或元素组的所有后代，由两个选择器之间的空格表示：

blockquote p {padding-left: 2em;}

3.ID选择器与类选择器

用于查找具有制定ID或类名的元素，ID选择器由#开头，类选择器由一个点号表示。

#intro {font-weight: bold;}
.date-posted (color: #ccc;)

注意：

  1. ID选择器只能用一次。
  2. ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
  3. 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

4.伪类

常用的伪类有：（链接伪类，只能用于锚元素）:link,:visited；（动态伪类，理论上可以应用于任何元素）:hover,:active,:focus

通过把伪类连接在一起，可以创建为复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

a:visited:hover {color： olive;}

2.1.2 通用选择器

他的作用就像是通配符，匹配所有可用的元素，由*表示，在与其他选择器结合使用时，可以用来对某个元素的所有后代应用样式，或跳过若干级后代。

* {
    padding:  0;
    margin: 0;
}

2.1.3 高级选择器

1. 子代选择器与相邻同胞选择器

a. 子选择器用于选择元素的直接后代（后代选择器是选择元素的所有后代）。

#nav>li{
    background: url(folder.png) no-repeat left top;
}

id="nav" 的直接后代<li>都被套用图标。

b. 相邻同胞选择器用于定位同一个父元素下某个元素之后的元素

h2 + p {
    font-size: 1.4em;
}

上述代码将紧挨h2的p元素字体大小设置为1.4em。

注意：IE7中如果父元素与子元素之间有HTML注释，就会有问题。

2. 属性选择器

可以根据某个属性是否存在或属性的值来寻找元素

<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronnym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>

acronym[title] {
    border-bottom: 1px dotted #999;
}

提醒：在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。

2.1.4 特殊的选择器格式

多标签选择器一般和html上下文有关，它有以下集中分类

  1. 选择一个祖先的所有子孙节点，例如 div p{…}
  2. 选择一个父元素的所有直属节点，例如 div > p{…}
  3. 选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
  4. 选择某一个元素的所有同胞节点，例如 span ~ a{…}
  5. 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）

要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

　　这个计算叫做“I-C-E”计算公式，

  1. I——Id；
  1. C——Class；
  1. E——Element；

　　即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

　　下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对：

CSS选择器表达式

特指度计算结果

p

1

p.large

11

P#large

101

div p#large

102

div p#large ul.list

113

div p#large ul.list li

114

　　还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。

　　哪个的计算结果大，浏览器就会以哪个为优先。

2.1.5 简版规则

　　如果你嫌上面的计算过于复杂，有一个简版规则。它只有三个规则，这三个规则能覆盖大多数情况，而且比较好记。

　　规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；

　　规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的）；　

　　规则三，设置的样式高于继承的样式，不用考虑特指度。

　　其实，大部分情况下，你通过这个简版的规则，即可判断选择器的优先级。

2.2 盒式模型

基本概念在此不赘述，如有疑问请自行谷歌（=W=），在此说一些比较特别的点。

外边距叠加

当两个或更多垂直外边距相遇时，它们会形成一个外边距。这个外边距的高度等于两个叠加的外边距的高度中的较大者。

外边距甚至可以与本身发生叠加，但是只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框值之间的外边距不会叠加。

2.3 定位概述

2.3.1 可视化格式模型

CSS中有3种基本的定位机制：普通流、浮动和绝对定位。默认所有框都在普通流中定位。

块级框从上到下一个一个地垂直排列，框之间的处置距离由框的垂直外边距计算出来，但是行内距的垂直内边距、边框和外边距不影响行内框的高度，除非去设置行高。

2.3.2 相对定位

对一个元素进行相对定位，它将出现在相对于元素在文档流中的初始位置上。

2.3.3 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。

它的位置是相对于距离它最近的那个已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置是相对于初始包含块的。可能是画布或是HTML元素。

可以通过设置z-index属性来控制这些框的叠放次序，值越高，框在栈中的位置就越高。

2.3.4 浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如果浮动的元素后面有一个文档流中元素，那么这个元素的框会表现得就像浮动框不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。

在此强调一点：它的设计初衷是为了解决文字的环绕效果，所以在设计时勿忘初心（⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）

其中最为重要的便是浮动的清除，下次再说吧♪(^∇^*)

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/nanchen/p/4788138.html