css( div和span)——读书笔记
高级网站构建
将用div和span来构建一些严格的支持结构
一：div的用法
- <1> 把页面上相互关联的一组元素把它们装进一个<div>元素来添加结构，如果你知道哪个元素属于哪个部分，那么就可以添加些xhtml来标记这些结构。一般做法是用<div>开始和结束标记把属于一个逻辑部分的元素包围起来。如
- <div>.....</div>
- <2>把元素放进<div>里，就表明它们是同一组。表明一组意义——用id属性为<div>提供唯一的标签。如个猫<div>一个id"cats
- <div id="cats">
- <3>用<div>给页面添加更多结构的原因有很多。首先，你可能更深一步地展示一下你页面的基本逻辑结构。这样有助于别人理解网页，也有助于维护网页。第二，你可能经常需要用结构把样式应用到某一部分
- <4>在结构上添加结构 例如，有一个猫部分和一个够部分。两部分一起就是页面中逻辑上的“pets”部分
<二>：调整某内容部分宽度
设置元素的宽度用“width”属性（定义内容区的宽度）
<div>元素中的所有文本都嵌套在块元素中，但是现在它们的对齐样式都改变了。这是因为块元素继承了<div>的text-align属性。不是<div>直接影响标题和段落（这些都是块元素）中的文本对齐样式，而是标题和段落继承了text-align属性值“center” 使它们自己的内容居中
<三> 缩写css设置的一些属性如
这些指定补白的老办法 padding-0px: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; 缩写为; padding: 0px 20px 30px 10px;
↓上 右 下 左
如果补白和边界值都相等可以缩写为 padding: 20px;
边框的缩写比边界和补白更灵活，顺序可以随意选着 border: solid thin #007e7e; border: #007e7e solid thin
背景也可以缩写 background-color:white; background-image：url(images/cocktail.gif); background-repeat:repeat-x; 缩写为: background: white url(images/cocktail.gif) repeat-x;
二: span的用法
<span>元素与<div>工作方式一样， 用来把内联分成不同的逻辑部分，而<div>则是把块级的内容分成不同的逻辑部分
<span> 只是改变某些某些文字的样式，比如; 一个歌迷网站页面上专辑或艺术家名，就应该用<span>并且把<span>元素放进适当的类中组成一组，一起设计样式
<li><span class="cd">Buddha Bar</span>,<span class="artist">Claude Challe</span></li>
给<span>设计样式
.cd {
font-style: italic;
}
.artixt{
font-weight: bold;
}
三：<a>元素
<a>的特征
<a>元素与其他元素不一样，它的样式随它的状态而改变。如果一个链接从没被点击过，它有一种样式，如果被电击了，就有另外一种样式。如果鼠标停留在链接上，还会有另一种不同样式
利用不同的颜色来指定状态（未被访问， 以访问， 鼠标停留）样式
利用伪类：
a:link{
↓ 状态（未被访问） color: green;
}
应用伪类
用一个子孙选择符和一个伪类结合起来使用;
这是个选择符表明要选择所有未被访问的嵌套在id为“elixins”的元素里的<a>元素
#elixirs a:link{
color: #007e7e;
}
