Web前端-HeadFirst笔记-CH10 span div 伪类

利用Div Span 可以构建重要的支撑架构，根据这些架构，就能用各种新颖、强大的方式为他们增加样式。

Div

逻辑区是指页面上有关联的一组元素。

div为块级元素创建逻辑划分，将页面划分为逻辑区/逻辑分组。

HTML格式：

在属于逻辑区的元素周围放置开始和结束标记。<div> 块元素 </div>

可以用id属性为div提供一个唯一的标签。<div id="id名">块元素</div>

CSS格式：

#id名{属性设置}

tips：

• width：只能指定内容区的宽度；
• 总宽度:左/右margin+border+左右padding+内容width；  
• 总宽度：默认是auto，允许内容conent填满所有的可用空间。
• 宽度：百分比，为元素所在容器宽度的一个百分比。
• 高度：一般默认auto。
• 行高：除开px，%，em。还可以设置为数字n，代表是自己字体大小的n倍，而不是父元素字体大小的多少倍。normal允许浏览器选择合适的行高，根据字体决定。

Span

针对内联字符和元素的逻辑分组。在CSS中统一分配样式。

html：说明内容，而非样式。
<em>:强调某些文字；
<strong>:强调某些内容；

tips：

• 内联元素的宽度设置：在元素定位之前，很难注意到宽度改变的效果。
• 内联元素的边距和边框：当四周都设置了内外边距，只会注意到左右边距的变化，上下边距会与其他内联元素重叠。CH11中更详细。
• 图像与其他的内联元素不同，图像宽度/内外编剧属性更像是块元素的属性。

伪类

链接的样式：称为伪类
a:link{color:green;}
a:visted{color:red;}
a:hover{color:yellow;}
a:focus{属性设置}--浏览器允许使用tab轮流访问页面上所有的链接。访问到某个链接时，此链接为焦点状态。
a:active{属性设置}--用户第一次单击一个链接时，就处于活动状态。

链接可以处于多种状态，按照规则的顺序来确定应用哪个样式，一般适当的顺序：link，visited,hover,focus,active.

伪类支持的元素有许多。如first-child指定元素中的第一个子元素，last-child指定最后一个子元素。