11高级网站构建:div和span

时间:2024-12-19 10:06:37

用<div>元素把属于一个逻辑部分的元素包围起来。可以用id属性为<div>提供一个唯一的标签。

<div>的作用:1.更深一步展示页面的基本逻辑结构(相当于一个逻辑容器)。2.用结构把样式应用到某一部分(相当于一个图形容器)。嵌套结构也是很常见的,可以在结构上添加结构(即<div>可以嵌套使用)。

width属性可以用来定义内容区的宽度。不能定义整个元素的宽度,只能定义内容区、补白、边框和边界的宽度,把这些全加起来就是整个元素的宽度。块元素的默认宽度是"auto",就是说会延伸到所有的空间。

text-align属性会影响一个元素中所有内联内容的对齐样式,text-align属性只能用于块元素,如果直接用于内联元素(如<img>)就没有作用了。元素中的块元素可以继承text-align属性。比如在书中的例子中,不是<div>直接影响标题和段落(这些都是块元素)中的文本对齐样式,而是标题和段落继承了text-align属性值“center”,使它们自己的内容居中了。

子孙选择符可以用来选择特定元素的子孙元素。XX(父元素)空一格 XX(子孙元素) ,如:div h2{color:  black;}表示选择<div>的子孙<h2>

只用一个数字代替相对值(比如em或%)来设置line-height,可以使得每个元素的行间距都基于自己的font-size。line-height: 1;

CSS的一些属性可以缩写。padding: 0px 20px 30px 10px;(上 右 下 左),margin也一样。border-width、border-style,border-color可以写在一起,比如:border: thin solid #007e7e;(顺序不限)。background-color、background-image、background-repeat可以写在一起,比如:background: white url(images/cocktail.gif) repeat-x;(顺序不限)。字体的属性可以缩写在一起font: font-style font-variant font-weight font-size/line-height font-family;(前3可选,并且位置随意)

<span>元素跟<div>工作方式一样,用来把内联内容分成不同的逻辑部分,而<div>则是把块级的内容分成不同的逻辑部分。

<a>元素跟别的元素不一样,它的样式随它的状态而改变。可以用伪类单独给每个状态设计样式。伪类和<a>元素一起最常用的是::link,用于未被访问的链接,:visited,用于已经访问的链接,:hover,用于停留状态。

叠层就是浏览器决定采用哪种样式的方法。