Head First Html与CSS第十章div and span学习笔记

呜呜呜呜呜，真的好困好困，不能睡不能睡不能睡。。。

text-align：left/right/center；设置文本对齐方式，只能用于块元素（用于内联元素不起作用），块元素的所有内联元素都会对齐，不仅是文本，图像也会。而且text-align属性会继承。

一、div元素

利用div元素对html进行逻辑分区，将相关的元素归并在一起。很明显，div元素是个块元素，每个div元素指定一个id 属性赋予一个唯一标识符。

创建逻辑分区有助于标识主页内容，页眉，页脚。

可以用div元素将需要共同样式的元素归组。对逻辑分区div元素进行css样式指定 #标识名{     }

div元素可以嵌套，只要是有意义的，嵌套div元素为文件增加更多结构，有利于结构清晰和增加更多样式。将div元素理解成一个容器，同样，div元素可以属于一个或者多个类，不冲突。

 

二、子孙选择器

利用子孙选择器选择嵌套在其他元素（A)中的元素（B）：就是要为B规定样式，但是不是所有的B元素，而仅仅是A中的B元素

格式例子：div h2{..........} 所有div元素中的 h2元素。 #标识名 h2{  }某一指定标识名元素中的h2。 #elixirs blockquote h2{  }标识名为elixirs元素中长引用元素中的h2元素。

上述的子孙选择器是所有子孙，只要包含在A内部，儿子，孙子，曾孙子都是。要是只选直接的孩子（儿子）使用 ->.例如div->h2{..........} #elixirs blockquote->h2{  }.

三、span元素

span元素与div异曲同工，div是为块级元素划分逻辑分区，那么span元素就是为内联元素划分逻辑分区，然后指定样式。

步骤一样：先在html中划分出span元素，增加id属性或者class属性（要输添加的样式时针对多个span元素就用类，只针对一个就用id)；然后在css中指定span元素的样式，要是id就用  #标识名{  }  要是class就用   .类名{   }

四、链接：<a>元素

<a>元素有5种状态：未访问link，已访问visited，处于悬停hover，focus和active.

使用伪类根据不同状态来指定样式,例如：a:link{ color:green; }  注意，a和状态之间没有空格。

运用伪类: 例如伪类结合子孙选择器： #elixirs a:visited{    }.

注意编写的时候根据未访问link，已访问visited，处于悬停hover，focus和active的顺序，就会让链接表现出同时处于几种状态的样式。

五、层叠

1、浏览器优先作者的样式，然后是读者的样式（除非当属性声明后加一个 ！important；），然后是默认的样式。

2、如何确定一个元素使用哪个样式：收集所有的样式变（作者、读者，浏览器默认）；找到匹配的声明；看谁更特定；

使用 0 0 0方法：选择器包含id第一个（从左到右）加1；选择器包含类或伪类中间加1；选择器包含元素名最后一个加1；

例如：ol li p--003   h1.greentea--011   a:link--011  #elixirs h1--101