一起来读《CSS权威指南》-基础知识
发布在文艺的前端er2015年3月30日view:3187CSS前端开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
本书将分作几个部分进行学习,第一部分为前四章,所讲内容均为CSS的最基础的东西,为本质内容。后续会继续更新余下部分。好了,直接上干货,真的是有点干啊^_^

一、 CSS和文档

层叠样式表(Caccading Style Sheets,CSS)的功能非常强大,可以影响一个或一组文档的表现。下面重点了解一下CSS中的基本术语,即元素。

元素(element)是文档结构的基础,如P、table、div等。在CSS中,每个元素生成一个框,即盒模型,对文档的表现起作用。在CSS中,元素通常有两种形式:替换和非替换。在CSS2.1以上还使用了另外两种基本元素类型:块级元素和行内元素。
1. 替换元素
替换元素是指用来替换元素内容的部分并非由文档内容直接表示,例如<img src="example.jpg" />.实际上,img没有具体内容,如果不使用src属性指向一个图像,则这个元素没有任何意义。类似的还有imput元素。
2. 非替换元素
非替换元素的内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示,例如<span>hi there</span>就是一个非替换元素。段落、标题、表单元格、列表和HTML中的几乎所有元素都是非替换元素。
3. 块级元素
块级元素生成一个元素框,(默认地)填充其父元素的内容区,旁边不能有其他元素。例如p、div。
4. 行内元素
行内元素在一个文本行内生成元素框,而不会打断这行文本。行内元素最好的例子就是a元素。

二、选择器

元素选择器:文档的元素就是最基本的选择器。
选择器分组,例如h2,p {color: gray}.其中的逗号告诉浏览器,规则中包含两个不同的选择器;
统配选择器,显示为一个*号,这个选择器可以与任何元素匹配。例如要让一个文档中的每一个元素都为红色,规则为* {color: red}

类选择器:要应用样式而不考虑具体涉及的元素,最常用的方法就是使用类选择器。例如,你可能希望只在整个段落是警告时才显示为粗体文本:p.warning {font_weight: bold;},选择器现在回匹配class属性包含warning的所有p元素,但是其他任何类型的元素都不匹配,不论是否有此class属性。

ID选择器:在某些方面,ID选择器类似与类选择器,不过也有一些重要的差别。首先,ID选择器前面有一个#号,第二个区别就是ID选择器不引用class属性的值。

属性选择器:例如,要选择有class属性的所有h1元素,使其文本为银色,可以写作:h1[class] {color: silver;}

使用文档结构:这是CSS确定和应用样式的唯一途径。包含以下几个部分:
- 后代选择器
例如:你只希望对从h1元素继承的那些em元素应用样式,可以写作:h1 em {color: gray;},这个规则会把作为h1元素后代的em元素的文本变成灰色,其他em文本则不会被这个规则选中。
- 选择子元素
例如:你想选择只作为一个h1元素子元素(不是后代元素)的strong元素,可以使用子子结合符(>):h1 > strong {color: red;},这个规则会把第一个h1下面出现的strong元素变为红色,但是第二个出现的strong元素不受影响。
- 选择相邻兄弟元素
例如:要去选择紧接在一个h1元素后出现的段落的上边距,可以写作:h1 + p{margin: 0;},这个选择器读作“选择紧接在一个h1元素后出现的所有段落,h1要与p元素有共同的父元素”。

伪类和伪元素
- 伪类选择器
例如:最常用的就是链接伪类,即去掉a标签上的默认样式,点击前、点击后均显示一种样式,可写作:a:link,a:visited,a:hover,a:active {text-decoration:none; color:gray;}
- 伪元素选择器
设置首字母样式:p:first-letter {color: red},这个规则会把每一段的第一个字母变成红色;
设置第一行的样式:p:first-line {color: purple;},这个规则让一个文档中第一段的第一行变成紫色;
设置之前和之后元素的样式:h2:before {content : "{}"; color: silver;},这个规则会在每个h2元素前加一对银色中括号。

三、结构和层叠

特殊性
选择器的特殊性由选择器本身的组件决定,特殊性值表述为4个部分,为0,0,0,0.一个选择器的具体特殊性如下确定:
- 内联样式特殊性最高,为1,0,0,0.
- 对于选择器中给定的各个ID属性值,加0,1,0,0.
- 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0.
- 对于选择器中给定的各个元素和伪元素,加0,0,0,1.
- 结合符和通配符选择器对特殊性没有任何贡献。
假设一个em元素上同时匹配两条规则,则通过计算,匹配特殊性最高规则进行应用。
上述原则记住一个英文单词ICE(id,class,element),优先级由高到低。

继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。例如,向一个h1元素应用一个颜色,那么这个颜色将被应用到h1中的所有文本,甚至应用到该h1的子元素中的文本。

层叠
试想一下如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢?浏览器如何解决这个冲突?这就要涉及到层叠这个核心概念。
CSS2.1的层叠规则相当简单:
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器;
- 按照显式权重对应用到该元素的所有声明排序:标志!important>无标志!important的;一般情况下,创作人员样式>读者样式>用户代理的默认样式;
- 按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素;
- 按照出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重越大;如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后,即主样式表中权重更大。

四、值和单位

这一部分主要是理解绝对长度单位和相对长度单位。
1. 绝对长度单位
pt(点)是一个标准印刷度量单位。如果文本的首字母设置为12点,这就是1英寸的1/6高。
2. 相对长度单位
em举例:假设一个h1的字体大小为24像素,一个h2元素的字体大小为18像素,如果将这两个元素的左边距都设置为1em,那么他们的左边距就分别为24像素、18像素;
px是最常用的,例如做声明font-size: 18px;Web浏览器总会在显示器上使用实际像素。

评论
发表评论
3年前

我正在看CSS权威指南

3年前

请问什么是创作人员样式,什么是读者样式,

4年前

是不是还有一种可变元素?

4年前

@小泼墨 现在页面上需要设置padding-top通常是从行内元素和块级元素进行考虑的,考虑替换元素和非替换元素是没有意义的。

4年前

能不能说一下替换元素和非替换元素对padding-top属性的支持啊?

4年前
赞了此文章!
4年前
赞了此文章!
4年前
赞了此文章!
WRITTEN BY
yaoyiyao
自学前端,正在实习中
TA的新浪微博
PUBLISHED IN
文艺的前端er

学前端不久,感觉需要写点东西,加深自己对各方面的理解,同时也可以分享给大家。

我的收藏