通过阅读和学习书籍《CSS设计指南》总结
《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社
本书网站:http://www.stylinwithcss.com
强烈推荐!!深入浅出,精简,适合入门!!
CSS工作原理
2.1 剖析CSS规则
规则实际上就是一条完整的CSS指令。规则声明了要修改的元素和要应用给该元素的样式。
2.1.1 为文档添加样式的三种方法
有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在<style>
标签里(嵌入样式)和写在单独的CSS样式表中(链接样式)。
行内样式:行内样式是写在特定HTML标签的style属性里,其作用非常有限。行内样式只能影响它所在的标签,而且总会覆盖嵌入样式和链接样式。
嵌入样式:嵌入的CSS样式是放在HTML文档的head元素中,嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表的样式,但会被行内样式覆盖。
链接样式:在创建包含多个页面的网站时,需要把样式集中在一个单独的文件里,这个文件就叫样式表。样式表其实就是一个扩展名为.css的文本文件。可以在任意多个HTML页面中链接同一个样式表文件,每个页面中只需加入类似下面的这一行代码即可:
<link href="style.css" rel="stylesheet" type="text/css" />
链接样式的作用范围可以是整个网站。只要使用标签把样式表链接到每个页面,相应的页面就可以使用其中的样式。随后,只是修改了样式表中的样式,改动就会在所有被选中的元素上体现出来,无论这个元素在哪个页面里。这样,既可以做到全站页面外观统一,又便于整站样式更新。
除了以上三种为页面添加样式的方法,还有一种在样式表链接其他样式表的方法,那就应用@import
指令(是一种at规则):
@import url(css/style2.css)
需要注意,@import
指令必须出现在样式表中其他样式之前,否则@import
引用的样式表不会被加载。
2.1.2 CSS规则命名惯例
CSS规则分两部分,即选择符和声明。声明又由两部分组成,即属性和值。声明包含在一对花括号内。
p {
color:red;}
p {
color:red; font-size:12px; font-weight:bold;}
h1,h2,h3 {
color:blue; font-weight:bold;}
2.2 上下文选择符
上下文选择符的格式如下:
标签1 标签2{
声明}
其中,标签2就是我们选择的目标,而且只有在标签1 是其祖先元素(不一定是父元素)的情况下才会被选中。
上下文选择符,严格来讲(也就是CS