4.CSS基础
【要点:CSS的基本概念;CSS的语法结构;CSS的样式属性;盒子模型】
4.1 CSS基础
CSS(Cascading Style Sheet)层叠样式表、级联样式表。是纯文本的,文件扩展名.css。CSS是一种描述性的文本,用于增强或控制网页的样式,并允许将样式信息与网页内容分离。HTML是标识页面结构的标记语言。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能,使HTML变得越来越杂乱,页面也越来越臃肿。CSS应运而生。CSS已经为大多数浏览器所支持。
1、CSS的历史
1994年,哈坤·利提出最初建议。一个样式可以继承。层叠的方式能够灵活加入自己的设计。
1996年底,初稿完成,12月,CSS规范的第一个版本出版。
1998年5月出版CSS规范的第二版。
2、CSS的特点
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它,可以实现修改一个小的样式来更新与之相关的所有页面元素。
1)丰富的样式定义
提供了丰富的文档样式外观,以及设置文本和背景属性的能力,允许为任何元素创建边框、元素边框与其他元素间的距离、元素边框与元素内容间的距离,允许随意改变文本的显示与修饰方式,以及其他页面效果。
2)易于使用和修改
可将样式定义在HTML元素的style属性中,或文档的head部分,或声明在一个专门的CSS文件中,供页面引用。
3)多页面应用
单独存放在CSS文件中的样式,可以用于多个页面中。实现多个页面风格的统一。
4)层叠
层叠就是对一个元素多次设置同一个样式,将使用最后一次设置的属性值。
后来定义的样式将对前面的样式设置进行重写。最终看到的效果,是最后设置的样式效果。
5)页面压缩
HTML文档中大量或重复的元素文字样式,会产生大量的HTML标签,使页面文件的大小增加。将样式的声明单独放到CSS样式表中,可大大地减小页面的体积,使加载页面的时间大大减少。
3、CSS的优势
1)Web页面样式与结构分离
2)页面下载时间更快
3)省开发和维护成本
4)令人满意的版面样式控制
5)轻松创建与编辑
6)兼顾打印和Web页面设计
7)较好地控制元素在Web页面中的位置
8)有利于搜索引擎的搜索
4.2 使用CSS
4.2.1 语法结构
1、CSS的语法结构由选择符、样式属性、样式值三部分组成。
基本语法:
选择符 {
样式属性:样式值;
样式属性:样式值;
……
}
选择符(selector):指出这组样式编码所要针对的对象,可以是一个HTML标签,也可以是定义了特定class或id的标签。浏览器将对CSS选择符进行严格解析,每一组样式均会被应用到对应的对象上。
属性(property):是CSS样式控制的核心,CSS提供了丰富的样式属性,如颜色、大小、定位和浮动方式等。
值(value):是指属性的值,有两种形式,一种是指定范围的值,如float属性,只可使用left、right和none三种值。另一种为数值,如width能够使用0-9999px,或者其他单位来指定。
如:body{ background-color: black }
示例1:
body {
font-size:12px;
color:green;
}
示例2:
h1 {
color:green;
}
示例3:
h1 {
text-align:center;
padding-top:70px;
color:#805231;
font-family:"黑体";
font-weight:bold;
}
2、CSS属性值value的单位
CSS中的属性值必须给一个准备的单位。除0值外,其他值都必须紧跟单位,不要在数值与单位之间加空格。
在写CSS的时候最常用的长度单位是px(像素),经常看到的还有em,pt等等,其实CSS中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm。
1)px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。如,windows所使用的分辨率一般是96像素/英寸。而MAC所使用的分辨率一般是72像素/英寸。
2)em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
3)pt:点(Point),绝对长度单位。
4)ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
5)pc:派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。
6)in:英寸(Inch),绝对长度单位。
7)mm:毫米(Millimeter),绝对长度单位。
8)cm:厘米(Centimeter),绝对长度单位。
其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
容器的大小经常用px做单位;
字体大小(font-size)很多人用px做单位,其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。但是,现在用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了。新版本IE7,IE8都已经支持整个网页的缩放功能。
百分比单位
百分比是一个特殊的长度单位,它也是一个相对长度单位,一般指定元素本身相对于父级元素的大小。
img {
width:50%;
height:70%
}
3、颜色表示法
#rrggbb
#rgb
rgb(r,g,b) 0-255
rgb(r%, g%, b%) 0-100
4.2.2 在网页中添加CSS的方法
1、内嵌样式表
将样式定义代码作为属性直接定义在HTML元素中。
特点:直观、方便。与HTML页面结构强耦合,使得样式表与页面结构无法分离,不利于网页的维护。
如:<font style="font-size:12px; color:#f00">要显示的内容</font>
对应于传统的方法:<font size="12px" color="#f00">要显示的内容</font>
如:<table style="color:red; margin-right:200px">……</table>
2、内部样式表
将CSS样式声明放在HTML页面代码的head元素中,样式表由style元素进行存放。
如:
<head>
<style type="text/css">
div {
border:solid 1px #c00;
}
</style>
</head>
如:
<head>
<style type="text/css">
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
style元素并不限制个数。
3、链接外部样式表
将CSS样式声明的代码单独存放在扩展名为.css的文件中,然后在页面中通过link元素将该文件链接到页面中。
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
rel属性表示指定链接到样式表,type表示样式表类型,href指定样式表所在的位置。
这时,一个样式表可以应用于多个页面。当改变这个样式表文件时,所有页面的样式都随之改变。不仅可以减少工作量,且有利于以后的修改、编辑,浏览时也可避免重复下载代码。
4、导入外部样式表
同链接外部样式表类似,都是将样式表单独存放,然后在页面中引入该样式表文件。导入外部样式表将外部样式表在style元素中使用@import语句导入页面中。
<head>
<style type="text/css">
@import "test.css";
</style>
</head>
link元素属于HTML级,在解析网页时加载link标签所链接的源文件。
@import属于CSS级,在解析网页时不会顾及这个元素的内容,执行时才去导入所需外部样式表,此时会异步请求CSS文件。
以上4种方式,可以在一个网页中混用。在显示网页时,先检查有没有内嵌样式表,有就优先执行;没有时,再看有没有内部样式表,再看外部样式表。
4.3 定义选择符
选择符决定了样式将应用于哪些元素。简单的选择符可以对给定类型的所有元素进行格式化,复杂的选择符可以根据元素的class或id、上下文、状态等应用格式化规则。
4.3.1 按照名称选择元素
按HTML标签名进行选择,如:
<style type=”text/css”>
p { font-size:16px; color:red; }
</style>
指定类型的所有元素(这里是标记p)都将被格式化。
◎4-1按标签名定义选择符.html
4.3.2按id名和class名进行选择
如果已经在页面元素中标识了id或class属性,那么就可以在选择器定义中使用,从而对被标识的元素进行格式化。
<style type="text/css">
#idname{样式属性:属性值;样式属性:属性值;......}
.classname{样式属性:属性值;样式属性:属性值;......}
</style>
或者
<style type="text/css">
HTML标签.classname1{样式属性:属性值;样式属性:属性值;......}
HTML标签.classname2{样式属性:属性值;样式属性:属性值;......}
</style>
说明:可以单独使用classname和idname选择器,也可以与其他选择器标准一起使用。如,“.news{color:red;}”会影响所有标记中定义的class="news"类的元素,而“h1.news{color:red;}”只影响属性中定义了class="news"类的h1元素。
◎4-2按类与ID定义选择符.html
4.3.3 按上下文进行选择
在CSS中,可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素就是包含所当前关心元素(希望样式影响的元素)的任何元素,父元素就是直接包含当前所关心元素的元素。
基本语法:
祖先元素 [祖先元素…] 显示元素{属性名:属性值;…}
说明:祖先元素是希望样式化的元素的祖先元素的名称,上面程序中是“#divdemo”;如果还需要继续指定后续的祖先元素,则元素名中加空格;最后是最终希望格式化影响的元素名,也可以是id或class名,如:
#divdemo #p1 { font-size:26px; color:#FF0066; }
#divdemo .p1 { font-size:26px; color:#FF0066; }
◎4-3按上下文定义选择符.html
4.3.4 指定元素组
多个元素使用同样的样式规则,可以组合使用选择器。如:
h1,h2,div{color:#FF0066;}
这里规定了标记h1、h2和div的color都是同样的颜色。组合选择其中的元素名中间要用“,”隔开。
4.4 CSS语法基础
网页设计中常用的CSS属性
文字或元素的颜色 color 背景颜色 background-color
背景图像 background-image 字体 font-family
文字大小 font-size 列表样式 list
鼠标样式 cursor 边框样式 border
内补白 padding 外边距 margin
4.4.1 字体属性
1、字体(font-family)
基本语法:font-family:”字体1”, ”字体1”, ”字体1”,…
说明:相当于HTML标签中的font-face属性。如果在font-family属性中定义了不止一种字体,则浏览器会按由前向后的顺序选用字体。也就是说,当浏览器不支持第一种字体时,会采用第二种字体,以此类推。如果浏览器不支持定义的所有字体,则会采用默认字体。同时注意,必须用双引号引住任何包含空格的字体名。
例:font-family:”方正姚体”, ”宋体”, ”幼圆”;
◎4-4font-family.html
2、字号(font-size)
基本语法:font-size:字号大小;
说明:font-size取值范围如下:绝对大小xx-small、x-small、small、medium、large、x-large、xx-large;相对大小smaller、larger;长度值或百分比。
例:font-size:16px;
◎4-5font-size绝对大小.html
◎4-6font-size相对大小.html
3、字体风格(font-style)
基本语法:font-style:字体风格;
说明:font-style取值包含:normal(正常值)、italic(斜体)、oblique(偏斜体)。
例:font-style:oblique;
◎4-7font-style.html
4、加粗字体(font-weight)
基本语法:font-weight:字体粗细值;
说明:font-weight取值包含:normal、bold、bolder、lighter、number。Number的取值为100-900,正常字体相当于400,粗体相当于700。
例:font-weight:bolder;
◎4-8font-weight.html
5、变体属性(font-variant)
基本语法:font-variant:属性值;
说明:取值包含normal或small-caps(英文显示为小型的大写字母字体)。
例:font-variant:small-caps;
◎4-9font- variant.html
6、文字修饰(text-decoration)
基本语法:text- decoration:属性值;
说明:取值包含none(默认值)、underline(添加下划线)、overline(添加上划线)、line-through(添加删除线)、blink(闪烁文字效果)。
例:text-decoration:underline;
◎4-10font-decoration.html
◎4-11综合字体属性.html
4.4.2 段落属性
属性说明属性说明
word-spacing 单词间隔 letter-spacing 字母间隔
text-transform 大小写转换 line-height 文本行高
text-align 水平对齐 vertical-align 垂直对齐
text-indent 文本缩进 white-space: 文本空格
◎4-12text-indent.html
◎4-13letter-spacing.html
◎4-14line-height.html
◎4-15line-height.html
◎4-16text-transform.html
4.4.3 背景和颜色属性
属性说明属性说明
background-color 背景颜色 background-image:url(xxx) 背景图像
background -repeat 背景重复方式 background-position 背景位置
background -attachment 背景附件
基本语法:
1、背景颜色属性
background-color : 颜色值;
颜色 | 英文写法 | 颜色 | 英文写法 | 颜色 | 英文写法 | 颜色 | 英文写法 |
黑 | black | 红 | red | 紫 | purple | 青绿 | lime |
白 | white | 绿 | green | 橄榄绿 | olive | 茶色 | maroon |
灰 | gray | 蓝 | blue | 深蓝 | navy | 墨绿 | teal |
银灰 | silver | 黄 | yellow | 水蓝 | aqua | 紫红 | fuchsia |
◎4-17background-color.html
2、背景图片属性
background-image : url(xxx)|none;
xxx为背景图像文件路径
none表示不加载图像
◎4-18background-image.html
3、背景附件属性
background–attachment:scroll|fixed|inherit
背景附件属性用来设置背景图片是否随着滚动条的移到一起移动。
scroll (默认值)背景图像会随着页面其余部分的滚动而移动
fixed 背景图片固定在页面上不动,不随着滚动条的移动而移动。
inherit 从父元素继承该属性的设置值
◎4-19background-attachment.html
4、背景图片重复属性,用来设置背景图片的重复显示方式。
background-repeat : repeat|repeat-x|repeat-y|no-repeat;
repeat 背景图片在水平和垂直方向上平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺
◎4-20background-repeat.html
5、背景图片位置属性
在网页当中插入背景图片时,插入位置是位于网页的左上角,可通过background-position属性来改变图片的插入位置。
background-position:x y
x y代表插入位置的百分比、长度或关键字,取值如下:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos 像素为单位
如果只规定了一个x,则y的取值为center或50%
默认值是0% 0%。
◎4-21background-position.html
例:background-color:#333333;
background-image:url(bg.gif);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center center;
通常也可以简单地设置背景为background:颜色 图像 重复;
如:background : #ff0000 url(smily.gif) repeat-x;
4.4.4美化网页与超链接的设置
1、设置网页链接属性
CSS允许按照超链接的状态来设置网页链接文字的效果。
语法 | 说 明 |
a:link | 未链接时超链接文字的样式 |
a:visited | 已链接过的超链接文字的样式 |
a:active | 当鼠标单击超链接后,超链接文字所显示的样式 |
a:hover | 当鼠标移到超链接文字上方时,超链接文字所显示的样式 |
a: | 在此属性内设置样式时,上述4种属性将同时引用此值 |
◎4-22网页链接属性.html
2、设置滚动条属性
滚动条的区域划分
语法 | 说 明 |
scrollbar-face-color | 设置A区域的颜色 |
scrollbar-shadow-color | 设置A区域的阴影颜色 |
scrollbar-highlight-color | 设置A区域的边框颜色 |
scrollbar-3dlight-color | 设置A区域的3D光影 |
scrollbar-darkshadow-color | 设置A区域的3D阴影 |
scrollbar-track-color | 设置B区域滚动条轨道的颜色 |
scrollbar-arrow-color | 设置A区域内小三角形的颜色 |
◎4-23滚动条属性.html
3、设置光标属性
属性值 | 说明 | 属性值 | 说明 |
auto | 默认值 | w-resize | 向左改变大小(west) |
wait | 等待/沙漏 | ne-resize | 向右上改变大小(north east) |
help | 帮助 | nw-resize | 向左上改变大小(north west) |
no-drop | 无法释放 | se-resize | 向右下改变大小(south east) |
text | 文字/编辑 | sw-resize | 向左下改变大小(south west) |
move | 可移动对象 | not-allowed | 禁止 |
n-resize | 向上改变大小(north) | Progress | 处理中 |
s-resize | 向下改变大小(south) | Default | 系统默认 |
e-resize | 向右改变大小(east) | url(‘光标文件地址’) | 用户自定义 |
◎4-24光标属性.html
4.5 盒子模型
4.5.1 盒子模型
CCS中,将样式应用在每一个元素上,都以一个假想的盒子模型来看待。简单地说,就是将每一个元素都当作一个长方形的盒子,盒子里面的内容到盒子边框之间的距离为填充(padding),盒子本身有边框(border),盒子边框外和其他盒子之间的间距是边界(margin)。盒子中的元素是内容(content)。
padding、border和margin都分为“上、右、下、左”四个方向,既可以分别定义,也可以统一定义。当使用CSS定义盒子的width和height时,定义的并不是盒子的总区域(包含content、padding、border和margin),实际上定义的是内容区域(content)的width和height。为了计算盒子所占的实际区域,必须加上padding、border和margin。
实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
实际宽度=左边界margin-left+左边框border-left+左填充padding-left+内容宽度width+右填充padding-right+右边框border-right+右边界margin-right
实际高度=上边界+上边框+上填充+内容高度+下填充+下边框+下边界
实际高度=上边界margin-top+上边框border-top+上填充padding-top+内容高度height+下填充padding-bottom+下边框border-bottom +下边界margin-bottom
4.5.2设置边界margin
基本语法:margin:长度单位|百分比|auto
◎4-25 margin.html
4.5.3设置边框border
1、边框样式属性border-style
基本语法:border-style:样式值
border-top-style:样式值
border-right-style:样式值
border-bottom-style:样式值
border-left-style:样式值
说明:border-style是一个复合属性,它的值有4种设置方法,其他4个都是单个边框的样式属性,只能取一个值。
设置1个值,表示4条边框的样式均使用同一个值;
设置2个值,表示上下边框使用第一个值,左右边框使用第二个值;
设置3个值,表示上边框使用第一个值,左右边框使用第二个值,下边框使用第三个值;
设置4个值,表示上、右、下、左边框依次使用四个值。
属性值 | 说明 | 属性值 | 说明 |
none | 默认值,不显示边框 | groove | 凹型线 |
dotted | 点线 | ridge | 凸型线 |
dashed | 虚线 | inset | 嵌入式 |
solid | 实线 | outset | 嵌出式 |
double | 双直线 |
|
|
◎4-26 border-style.html
2、边框宽度属性border-width
基本语法:border-width:宽度值|thin|medium|thick
border-top-width:宽度值|thin|medium|thick
border-right-width:宽度值|thin|medium|thick
border-bottom-width:宽度值|thin|medium|thick
border-left-width:宽度值|thin|medium|thick
说明:thin、medium、thick分别表示细、中等、粗。
border-width设置方法和border-style一样,它的值也有4种设置方法,其他4个都是单个边框的样式属性,只能取一个值。
◎4-27 border-width.html
3、边框颜色属性border-color
基本语法:border-color:颜色值|RGB值
border-top- color:颜色值|RGB值
border-right- color:颜色值|RGB值
border-bottom- color:颜色值|RGB值
border-left- color:颜色值|RGB值
◎4-28 border-color.html
4、边框属性的综合设置
基本语法:border:边框宽度|边框样式|边框颜色
border-top:边框宽度|边框样式|边框颜色
border-right:边框宽度|边框样式|边框颜色
border-bottom:边框宽度|边框样式|边框颜色
border-left:边框宽度|边框样式|边框颜色
说明:每个属性都是一个复合属性,都可以同时设置边框的宽度、样式和颜色,每个属性值中间用空格隔开。Border可以同时设置4条边框的属性,其他只能设置单边框的属性。
◎4-29 border.html
4.5.4设置填充padding
基本语法:padding:长度|百分比
padding-top:长度|百分比
padding-right:长度|百分比
padding-bottom:长度|百分比
padding-left:长度|百分比
说明:长度值要加单位,百分比是相对于上级元素宽度的,不允许用负数。
◎4-30 padding.html
4.6 列表样式
4.6.1 列表样式list-style-type
list-style-type属性可用于设置列表的符号或编号,通常会搭配<ol>或<ul>标签使用。
基本语法:list-style-type:属性值
属性值 | 说明 | 属性值 | 说明 |
disc | 黑圆点 | lower-roman | 小写罗马数字 |
circle | 空心圆 | upper-roman | 大写罗马数字 |
square | 黑方块 | lower-alpha | 小写英文字母 |
decimal | 数字 | upper-alpha | 大写英文字母 |
None | 不显示符号或编号 |
|
|
◎4-31 list-style-type.html
4.6.2 图像列表list-style-image
list-style-image属性可把列表符号设置为图片。
基本语法:list-style-image:url|none
说明:url是指定要加载的图片的路径;none是指不使用图片式列表符号。
◎4-32 list-style-image.html
4.6.3 列表符号的缩进list-style-position
list-style-position属性设置每个列表项目的符号是否缩进。
基本语法:list-style-position:inside|outside
说明:inside表示符号要缩进,outside表示符号不缩进。
◎4-33 list-style-position.html
第5章 DIV+CSS布局定位基础
【要点:元素的定位方式;DIV+CSS布局的常见类型与方法】
5.1 div标签与span标签
5.1.1 div概述
过去常用语<table>标签进行定位,但是这种方法的工作量很大,增加了大量的额外代码,并使后期的修改与维护很困难。CSS的出现,使得网页布局有了新方法。利用CSS属性,可以精确地设置元素的位置,还能将定位的元素叠放在一起。当使用CSS布局时,主要把它用在div标签上。<div>和</div>之间相当于一个容器,可以放置段落、表格、图片等等各种HTML元素。
div是用来为HTML文档内大块的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性同div标签的属性或使用CSS来控制。
基本语法:
<div style=”position:xxx; left:xxx; top:xxx; width:xxx; height:xxx; background-color:#xxxxxx; float:xxx; clear:xxx; z-index:xxx”>…</div>
说明:position属性,用于定义div的定位方式;
left和top属性,用于定义div的位置,还有right和bottom两个属性;
width和height属性,用于定义div的宽度和高度;
float属性,用于定义div的浮动位置;
clear属性,用于设置是否允许在某个元素的周围有浮动元素,它和浮动属性是一对相对立的属性,浮动属性用来设置某个元素的浮动位置,而清除属性则要去掉某个位置的浮动元素;
z-index属性,用于设置区域的上下层关系,让区域显示更多层次的效果,相当于三维空间的z坐标,z-index越大,区域在堆中的位置越高。
◎5-1 div.html
◎5-2 div.html
5.1.2 div与span的区别
span与div的区别在于,div是一个块级元素,可以包含段落、标题、表格,甚至章节、摘要、备注等。而span是行级元素,它的前后不会换行,它没有结构的意义,纯粹是应用样式,当其它行内元素都不适合时,可以使用span。
div对象是一个大的块状内容,如一大段文本、一个导航区域、一个页脚区域等显示为块状的内容。而span的用途是对行内元素进行结构编码以方便样式设计,如需要对一段文本中,需要改变其中一段文本的颜色,可以将这一小部分文本使用span对象进行样式设计,不会改变这一整段文本的显示方式。
◎5-3 span.html
◎5-4 div-span.html
◎5-5 div-span
5.1.3 表格布局与CSS布局的区别
div+CSS布局比表格布局节省页面代码,代码结构清晰明了,开发速度快,布局更清爽。
CSS的优势:
缩减页面代码量,提高浏览速度;
网页结构清晰,易被搜索引擎搜索到;
缩短修改和维护的时间;
样式控制能力与排版能力强;
易于编写;
可将表现与内容分离。
表格布局带来的问题:
格式数据混入内容中,使文件无谓增大;
修改与维护极为耗时;
保持整个网站的视觉一致性很难;
降低了对残疾人、手机及PDA终端用户的浏览亲和力。
◎5-6 表格布局.html
◎5-7 CSS布局.html
5.2 盒子的浮动与定位
CSS为浮动和定位提供了一些属性,利用这些属性可以完成列式布局。定位的思想是允许定义元素相对于正常位置应该出现的位置,或相对于父元素、另一个元素及浏览器窗口本身的的位置。浮动属性在元素定位时非常重要,不但可以对整个版式进行规划,也可以对一些基本元素进行排列。
5.2.1 浮动
在标准流中,一个块级元素在水平方向上会自动伸展,直到包含它的元素的边界,而在竖直方向上和其他元素依次排列,不能并排。使用浮动方式后,块级元素的表现会有所不同。
基本语法:
float : none|left|right;
说明:none是默认值,表示对象不浮动;
left表示对象浮在左边;
right表示对象浮在右边;
CSS允许任何元素浮动,不论是图像、段落、列表,不论先前元素是什么状态,浮动后都成为块级元素。
浮动有一系列控制它的规则:
浮动元素的外边缘不会超过其父元素的内边缘;
浮动元素不会互相重叠;
浮动元素不会上下浮动。
如果float取值为none或没有设置浮动时,不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示。
◎5-8 没有设置浮动属性的div.html
◎5-9 一个设为左浮动,一个不设置浮动的div.html
◎5-10 两个都设为左浮动的div.html
◎5-11 两个都设为右浮动的div.html
◎5-12 浮动属性应用.html
5.2.2 定位
定位允许用户精确定位元素出现的相对位置,可以相对于它通常出现的位置、其上级元素、另一个元素,以及浏览器窗口本身。每个显示的元素都可以用定位的方法来描述。
基本语法:position:static|absolute|fixed|relative
说明:static表示采用默认值,无定位,遵循HTML定位规则;relative表示采用相对定位,对象不可层叠,依据left、fight、top、bottom等属性设置在正常文档流中的偏移位置。absolute表示采用绝对定位,将对象从文档流中拖出,通过width、height、left、fight、top、bottom等属性进行绝对定位,而其层叠通过z-index属性定义;fixed表示固定定位,使元素固定在屏幕某个位置,其包含块是可视区域本身,它不随滚动条而滚动。
1、absolute
在几种定位方法中使用最广泛,能精确地将元素放置在想要的位置上。同一个位置上有几个元素时,只会显示最上面的元素,z-index属性对应一个垂直于屏幕向上的方向,z-index越大,元素越靠上。
◎5-13 absolute.html
2、fixed
固定定位和绝对定位非常类似,不过固定定位的容器不会随着滚动条的拖动而变化位置。在几种定位方法中使用最广泛,能精确地将元素放置在想要的位置上。同一个位置上有几个元素时,只会显示最上面的元素,z-index属性对应一个垂直于屏幕向上的方向,z-index越大,元素越靠上。
◎5-14 fixed.html
3、relative
相对定位和其他定位相似,也是独立出来浮在上面。相对定位的top、bottom、left、right属性参照对象是其父容器的4条边,而不是浏览器窗口。相对定位的容器浮上来后,其所占的位置仍然保留,后面的无定位容器不会挤上来。
◎5-15 relative.html
5.2.3 z-index空间位置
z-index是设置对象的层叠顺序的样式。此样式只对position属性为relative或absolute的对象有效。
基本语法:z-index:auto|数字
说明:auto遵从其父对象的定位。数字必须是无单位的整数值,可以取负值。z-index值较大的元素将叠加在值较小的元素之上。对于未指定此属的定位对象,z-index值为正数的对象会在其之上,而值为负数的对象在其之下。
◎5-16 z-index.html
5.2.4 清除属性clear
clear属性规定了元素的哪一侧不允许包含其他浮动元素。
基本语法:clear:none|both|left|right
说明:none默认值,允许两边都可以有浮动对象;both两边都不允许有浮动对象;left不允许左边有浮动对象;right不允许右边有浮动对象。
◎5-17 clear.html
5.3 CSS布局理念
CSS排版是一种很新的理念。首先,要将页面使用div整体划分为几个板块,然后对各个板块进行CSS定位,最后在各个板块中添加相应的内容。
5.3.1 将页面用div分块
在进行CSS页面布局时,首先要有一个整体的规划,包括整个页面分成哪几个模块,各个模板之间的父子关系等。以简单的框架为例,页面由banner、content(主体内容)、links(菜单导航)和footer(脚注)几个部分组成,各部分分别用自己的id来标识。
<div id=”container”>container
<div id=”banner”>banner</div>
<div id=”content”>content</div>
<div id=”links”>links</div>
<div id=”footer”>footer</div>
</div>
◎5-18 将页面用div分块.html
5.3.2 设计各块的位置
考虑整体的页面布局类型,单栏、双栏、三栏。
5.3.3 用CSS定位
对各个板块进行定位,实现对页面的整体规划,然后再往各个板块中添加内容。
◎5-19用CSS定位.html
5.4 常见的布局类型
5.4.1 使用CSS定位单行单列固定宽度
◎5-20单行单列固定宽度.html
5.4.2 一列自适应
自适应布局是网页设计中常见和一种布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度或高度值,是一种非常灵活的布局形式,对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。
◎5-21一列自适应.html
5.4.3 两列固定宽度
两列固定宽度的布局用到两个div,为它们设置宽度,并采用浮动方式,一左一右在水平方向排列。
◎5-22两列固定宽度.html
5.4.4 两列宽度自适应
布局用到两个div,为它们设置百分比宽度,并采用浮动方式,一左一右在水平方向排列。
◎5-23两列宽度自适应.html
5.4.5三列浮动中间宽度自适应
布局用到三个div,为左右两列设置固定宽度,并采用绝对定位方式。
◎5-24三列浮动中间宽度自适应.html