第一章 CSS与文档
1.层叠(cascade)
2.块级元素
生成一个元素框
3.行内元素
HTML与XHTML中,块级元素不能嵌套在行内元素中;而CSS中,无限制。
4.结合CSS与HTML
link标记
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/>
为了成功加载一个外部样式表,link必须放在head中,但不能放在其他元素内部(如 title)
href属性的值为样式表的URL(相对或绝对均可)
media属性使用all,说明此样式表要应用于所有表现媒体
候选样式表(alternate style sheet):将rel的属性的值置为alternate stylesheet
如果为一个rel为stylesheet的link指定了标题(title),也就指定了该样式表要作为首选样式表。此样式表要优于候选样式表使用。
如果没有指定title,则其作为一个永久样式表。
style元素
可用其包含样式表
<style type="text/css">
@import指令
<style type="text/css">
@import url(styles.css);
/*@import comes first*/
h1{color:gray;}
</style>
用@import无法指定候选样式表,每个@import指令的样式表都会加载并使用。
其可以应用于一种或多种媒体,如
@import rul(sheet2.css) all;
@import rul(blueworld.css) screen;
@import指令要出现在样式表的开头。
CSS注释
/this is a css1 comment./
可以跨多行,但是不许嵌套
内联样式(inline style)
<p style="color:gray;">thank you.
</p>
一个内联style属性中只能放一个声明块,而不能放整个样式表。因此,不能放@import,也不能包含完整的规则。
第二章 选择器
1.规则结构
2.分组
选择器分组
h1,p{color:gray;}
声明分组
h1{
font:10px Arial;
color:gray;
background:aqua;
}
也结合选择器与声明的分组
3.类选择器与ID选择器
类选择器
多类选择器
<p class="urgent warning">when handing polution.....</p>
这两个词的顺序无关紧要
.warning{font-weight:bold;}
.urgent{font-style:italic;}
p.warning.urgent{background:silver;}
ID选择器
区别
ID选择器仅使用一次
与类选择器不同,ID选择器不允许结合使用,因为ID属性不允许有空格分割的词列表。
类似于类,还可以独立于元素来选择ID,如
#improtant{color:blue;}
与下列元素匹配
<h1 id="important">ok</h1>
<p id="important">ok</p>
4.属性选择器
简单属性选择
p[class]{color:blue;}
*[title]{font-weight:bold;}
a[href][title]{font-weight:bold;}
根据具体属性选择
plant[moon="1"]{font-weight:bold;}
<plant>venus</plant>
<plant moon="1">earth</plant>
<plant moon="2">mars</plant>
也可以把多个属性-值选择器链接在一起
注意:这种格式要求必须与属性值完全匹配!
根据部分属性值选择
<p class="urgent warning">ok</p>
想选择class属性包含warning的元素,可以:
p[class~="warning"]{font-weight:bold;}
*查阅 子串匹配属性选择器
特定属性选择类型
5.后代选择器
选择子元素/相邻兄弟元素
伪类与伪元素
伪类选择器
可以结合使用
伪元素选择器
第三章 结构与层叠
继承(inheritance)是从一个元素向其后代元素传递属性值所采用的的机制。确定应当向一个元素应用哪些值是,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程就称为层叠(cascade)
1.特殊性
声明与特殊性
如果多个规则与同一个元素匹配且有些声明相互冲突,在这种情况下特殊性非常重要。
通配选择器特殊性
通配选择器对一个选择器的特殊性没有贡献
ID与属性选择器的特殊性
ID选择器与指定id属性的属性选择器在特殊性上有不同
内联样式特殊性
第一个0是为内联样式声明保留的,它比所有其他声明的特殊性都高。
重要性
p.dark{
color:#333 !important;
background:white !important;}
!important总是放在声明的最后,即分号之前。
标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在其内部解决,而不会与非重要声明相混。如果一个重要声明与非重要声明冲突,胜出的总是重要声明。
2.继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。
不过,有些属性无法继承。
继承的值根本没有特殊性
因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gary要优先于继承值black,因为继承值根本没有特殊性,所以em元素显示为灰色而不是黑色。
3.层叠
层叠规则(CSS2.1)
按权重和来源排序
按特殊性排序
按顺序排序
根据层叠的第4条规则,认为元素style属性中指定的样式位于文档样式表的最后,即放在所有其他规则的后面,不过这一点没有实际意义,因为CSS2.1中内联样式声明的特殊性要高于所有样式表选择器。
*链接的LVHA顺序
4.非CSS表现提示
第四章 值和单位
1.数字
2.百分数
3.颜色
命名颜色
用RGB指定颜色
①函数式RGB颜色
②十六进制RGB颜色
4.长度单位
绝对长度单位
英寸in
厘米cm
毫米mm
点pt
派卡pc
相对长度单位
em简单理解为“倍”
ex
像素长度
em是最灵活的,可以随字体大小缩放
5.URL
CSS中,相对URL要相对于样式表本身,而不是相对于使用该样式表的HTML文档。
6.关键字
inherit关键字
7.CSS2关键字
角度值
角 deg
梯度 grad
弧度 rad
时间值
频率值
不能为负值