CSS小结
最近再次读了《精通CSS 高级Web标准解决方案》,有了项目经验以及一些踩过的坑让我对CSS的理解更为深刻一些,借此机会将原文更新一下,以此来记录我的理解之路。(づ ̄ 3 ̄)づ
1.基本概念
1.什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
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 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于<head>标签内部)
- 内联样式(在 HTML 元素内部)
- !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;)
注意:
- ID选择器只能用一次。
- ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
- 类名的第一个字符不能使用数字!它无法在 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上下文有关,它有以下集中分类
- 选择一个祖先的所有子孙节点,例如 div p{…}
- 选择一个父元素的所有直属节点,例如 div > p{…}
- 选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
- 选择某一个元素的所有同胞节点,例如 span ~ a{…}
- 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)
要解决以上问题,我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
这个计算叫做“I-C-E”计算公式,
- I——Id;
- C——Class;
- 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 浮动
浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现得就像浮动框不存在一样。但是,框的文本内容会受到浮动元素的影响,会移动以留出空间。
在此强调一点:它的设计初衷是为了解决文字的环绕效果,所以在设计时勿忘初心(⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄)
其中最为重要的便是浮动的清除,下次再说吧♪(^∇^*)