学选—cha5样式表布局

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS样式表,*,1,页面的基本制作流程,1、分析效果图,给效果图分区，如头部、内容和底部,2、切图,3、制成HTML页面,目录,1、元素定位基础知识,2、定位属性及其应用,3、页面的背景设定,4、浮动及清除浮动,5、ul和li,6、CSS的容器属性,7、CSS的布局,1、元素定位基础知识,（1）块元素,（2）内联元素,（3）浮动属性的应用,html中元素是可以被分为块状元素和内联元素，块状元素的默认display属性为block，内联元素默认display属性为inline。,（1）块元素（block element）,块元素（例如div、p、form、table等元素）一般是,其他元素（包括块和内联元素）的容器元素,在没有任何布局属性作用时，默认排列方式为,换行排列。,可以将块元素想象成box。,剪贴文摘和网页布局模式的联系。,实例：,block.html,定义了类div1和类div2,观察div1和div2的相对位置,特点：,总是在新行上开始；,高度，行高以及顶和底边距都可控制；,宽度缺省是它的容器的,100%,，除非设定一个宽度。,（2）内联元素（inline element）,内联元素（例如a、img、span、input等元素）只能容纳文本或其他内联元素。,在没有任何布局属性作用时，默认排列方式为同行排列。,实例：,inline.html,定义了类span1和类span2,观察span1和span2的相对位置,特点：,和其他元素都在一行上,高，行高及顶和底边距不可改变；,宽度就是它的文字或图片的宽度，不可改变。,两类元素的划分,块元素(block element), address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线, isindex - input prompt menu - 菜单列表 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容） noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表（无序列表）,内联元素(inline element) a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框, kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量,块和内联元素的混合默认排列,当页面中既有块又有内联时，由于块元素不允许任何元素排列在其两边，所以每当遇到块元素就会另起一行,实例：,blockAndInline.html,(3)可以通过浮动属性改变块的位置,浮动属性即CSS中的float属性，其值为auto、left、right。浮动属性不继承。,通过浮动属性可以改变原有块的位置。,实例：,block-float.html,2、定位属性及其应用,(1)、定位属性的内容,(2)、绝对定位,(3)、相对定位,(4)、固定定位,(1)、定位属性的内容position,定位模式（position属性）不可继承，其取值可以为：static、relative、absolute、fixed。,Static,：元素按普通方式即按照html的规则进行定位。,Relative,：元素保持原来的大小偏移一定的位置,Absolute,：元素从页面元素中被独立出来，利用,边偏移,进行定位。,Fixed,：元素从页面元素中独立出来，其位置相对于屏幕本身而不是文档本身。,边偏移属性,Top定义元素相对于其,父元素,上边线的距离,Right右.,Left左.,Botton.下.,(2)、绝对定位(position:absolute),绝对定位的元素的位置由边偏移属性确定,绝对定位使元素完全从文档中独立出来，因此该元素可能会覆盖其他元素或者被其他元素覆盖。,实例,(3)、相对定位,相对于该元素在HTML文档中的初始位置,如果一个元素进行相对定位，它将以它原本所在的位置为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动,注意：,使用相对定位时，元素仍然占据原来的空间，因此被看作普通流定位模型的一个特殊情况,另外，移动元素可能导致覆盖其它元素,实例,(4)、固定定位,是绝对定位的一个特殊情况,与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置,这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置,注意：IE6不支持此属性，IE7支持。,实例：,5-7fixed.html,3、页面的背景设定,背景图片：background-image:url(图片路径),默认排列方式为从左到右，从上到下的顺序全页面填充。,图片的重复方式：利用样式属性可以重新设定重复方式Background-repeat 。,Repeat：从左至右，从上至下重复,No-repeat：不重复，默认在左上角,Repeat-x：横行重复,Repeat-y：纵向重复,背景图片的位置：repeat-position（可以取负值）,left,Right,Top,Bottom,Center：图片的横行和纵向居中,若上述的两类对齐方式只设置一个值，则另一个默认为center。,实例,backgound.html,4、浮动及清除浮动,1、浮动属性含义,2、浮动,3、清除浮动,(1)、浮动属性含义,浮动属性：float，其取值如下,None：不浮动,Left：元素浮动在左侧,Right：元素浮动在右侧,相邻的浮动元素,固定元素和浮动元素,固定在前，浮动在后,固定在后，浮动在前,（在firefox和在IE中效果不同）,说明：,布局时经常并排排列几个元素，一般给这几个元素均设置所需的浮动属性。,（2）清除浮动,利用clear属性实现清除浮动：,取值none,Left：不允许左边有浮动元素,Right：右边不允许,Both：两边均不允许,5、ul和li,Ul和li是布局时常用的元素，对应的控制其表现的属性：,list-style-type;项目编号或符号的类型,list-style-image：项目符号的图片,list-style-position：,位置,Outside：项目符号放在文本之外,Inside：项目符号放在文本之内,list-sytle：综合设置li样式的属性。,实例纵向菜单,纵向菜单,.menu ,width: 150px;,border: 1px solid #CCFFCC;,.menu_title ,line-height: 2em;,color: #993333;,background-color: #99CC66;,text-align: center;,LiList-style-type:none;,Height:22px;,Text-align:center,Ulmargin: 0px;,padding: 0px;,纵向菜单,新闻,电影,足球,休闲,旅游,家居,垂直居中：定义li行高line-height:22px,横向菜单：利用float属性,横向菜单,新闻,电影,足球,休闲,旅游,家居,6、CSS的容器属性,在CSS中，所有的文档（包括块和内联元素）都会生成一个矩形框。,5-19 boxmoldel.html,填充出现在内容区域的周围，如果元素上添加背景，那么背景会应用于由内容和填充组成的区域,添加边框会在填充区域外加一条边线，线条可以有多种样式,空白边是透明的，用来控制元素之间的间隔,MARGIN-空白边宽度设置,包括下列属性,MARGIN-LEFT,MARGIN-RIGHT,MARGIN-TOP,MARGIN-BOTTOM,也可以使用复合属性：margin，,按上右下左的顺序,margin : auto,|,length,可以使用,长度值或百分数，也可以是,auto(由浏览器自动调整),#style1 margin-top:100px ,#style2 margin-left:100px ,#style3 margin-right:20%,#style4 margin-bottom:100pt ,Box Model,Ex:,container.htm,空白边叠加,当两个,垂直,的空白边相遇时，它们将形成一个空白边，其高度为两个空白边的最大值,当一个元素包含在另一元素中时，它们的顶/底空白边也会发生叠加,内容为空的元素(也没有边框和填充)，这时它的上下空白边就碰到一起，也要发生叠加,PADDING设置填充的宽度,使用方法与margin一样,#style1 padding-top:100px ,#style2 padding-left:100px ,#style3 padding-right:10%,#style4 padding-bottom:100pt ,#style5 padding:100pt ,Box Model,WIDTH,宽度,可以使用,长度值或百分数，也可以是,auto(由浏览器自动调整或保持该元素的原有大小，如图像),#style1 width:100px ,HEIGHT,高度,设置方法与width一样,#style1 height:100px ,Box Model,BORDER对于边界的设置，包括宽度、颜色、线条样式三种，使用方法相同：,border-color :,颜色值列表,设置各个边框的颜色，设置顺序和margin一样,也可以分别用四个属性： border-top-color， border-bottom-color， border-right-color， border-left-color,border-style : none,|,hidden,|,dotted,|,dashed,|,solid,|,double,|,groove,|,ridge,|,inset,|,outset,设置各个边框的线条样式,也可以分别用四个属性：border-top-style， border-bottom-style， border-left-style， border-right-style,#style1 border-color: blue green #1f1f1f blue;,#style2 border-color: blue;,#style3 border-top-color :blue; ,#style4 border-style : dotted;,Box Model,border-width : medium | thin | thick |,length,设置各个边框的宽度,也可以分别用四个属性： border-top-width，border-right-width，border-bottom-width，border-left-width,也可以使用border-top，border-right，border-bottom，border-left四个属性一次性地设置各个边的宽度、样式和颜色,这四个属性使用方法相同，如：,border-top : border-top-width border-top-style border-top-color,或使用一个复合属性设置所有属性值：,border :,border-width border-style border-color,#style1 ,border-bottom: 25px solid red; border-left: 25px solid yellow;,#style2 border-width: 1px thin 5px thick;,#style1 border-top-width :20px;,p border: thick double yellow; ,7、CSS中的布局,使用CSS布局技术可以完成页面整体布局，实现各种布局样式,CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵,基本布局方式有很多,按外观分，有单列布局、两列布局、三列布局等,按实现技术分，有基于自动空白边的布局、浮动布局等,按适应性分，有固定宽度布局、流式布局，弹性布局等,居中布局,单列居中设计，是最基础的布局方式,可以使用自动空白边方法，Ex:,centering-auto-margin.htm,可以使用相对定位和负空白边方法，Ex：,centering-negative-margin.htm,#wrapper ,width: 720px;,margin: 0 auto;,text-align: left;,#wrapper ,position: relative;,left: 50%;,width: 720px;,margin-left: -360px;,多列浮动布局,两列浮动布局,Ex：,2-col-fixed.htm,三列浮动布局,Ex:,3-col-fixed.htm,content div包含了两个div,clear:both #foot,#branding,#mainNav,#content,流式布局和弹性布局,流式布局,宽度用百分数进行设置,使整体布局随浏览器窗口的伸缩而伸缩,Ex:,3-col-liquid.htm,弹性布局,以em为单位设置宽度,在字号增加时，整个布局随之而扩大,Ex:,3-col-elastic.htm,混合布局,可以组合流式布局与弹性布局，以em设置宽度，以百分比设置最大宽度,在极端情况下都可以有较好的整体效果,Ex:,3-col-hybrid.htm,伪列(Faux),前面的例子中，导航和次要内容区都有一个浅灰色的背景，但如果正文比较长，导航和次要内容区域没有扩展到整个内容高度，它们的背景也不会拉长,伪列(Faux),为了使背景能随正文的大小自动延伸，需要使用伪列技术,固定宽度的伪列,创建背景图案条，然后设置成“,纵向平铺”（repeat-y）,Ex:,faux-3-col-fixed.htm,可变宽度的伪列,要使用背景图像的百分比定位方法,Ex:faux-3-col-liquid.htm,background: #fff url(images/bg-fixed.gif) repeat-y left top;,23%,23%,链接样式,在,CSS样式中，定义链接的各种状态,a:link,没有接触过的链接,用于定义了链接的常规状态。如果希望各种链接都相同，就只需要定义这种链接状态。这种链接状态是基本的,a:visited,访问过的链接,能清楚的判断已经访问过的链接,a:hover,鼠标放在链接上的状态,鼠标放到一个链接上，链接就会产生变化；当鼠标离开这个链接时，这种状态就消失,a:active,在链接上按下鼠标时的状态,注意选择器的顺序：,a:link, a:visited, a:hover, a:active,Ex:比较两种写法，,link.htm,a:link, a:visited text-decoration: none;,a:hover, a:active text-decoration:underline;,a:hover, a:active text-decoration:underline;,a:link, a:visited text-decoration: none;,由于层叠，:link,:visited样式覆盖:hover,:active样式，鼠标停留和激活样式就不起作用了,链接特效 5-32;5-33,在链接样式中应用background属性,使用图像创建下划线：,styled-underlines.htm,区别不同类型的链接：,external-links.htm,外部链接、内部链接、邮件链接，AIM即时消息协议等,根据链接的href属性值来区分,创建按钮效果的链接,使用display属性将链接显示为块级元素，然后应用背景，这样点击块中任意位置都会触发链接,Ex:,css-button.htm,，,3DButton.htm,a:link, a:visited ,text-decoration: none;,background: url(images/underline1.gif) repeat-x left bottom;,a:hover, a:active ,background-image: url(images/underline1-hover.gif);,ahref=mailto: ,background: url(images/email.png) no-repeat right top;,链接特效,已访问过的链接样式,创建一个背景图像，同时包含两种图样,根据链接状态改变背景图放置的位置，显示出两种不同的效果,Ex:,visited-links.htm,CSS工具提示(tooltip),使用span标签界定提示文本,对span应用样式,Ex:,css-tooltips.htm,li a ,display: block; text-decoration: none;.,background: #94B8E9 url(images/visited.gif) no-repeat left top;,li a:visited background-position: right top;,a.tooltip position: relative; ,a.tooltip span display: none;,a.tooltip:hover span ,display:block;,position:absolute;,top:1em; left:2em;,720px,150px,50px,500px,150px,560px,275px,245px,课堂提问,1）样式表的选择符分成哪几类？,2）若要设置水平分割线的样式为居中、红色，则如何定义？,3）下面定义了一个类mycls，请改错。,#mycls font-size=12px; color=red; text-align=center;,这个类应用到了P标签中：,