第2章 CSS(样式控制与页面布局).ppt

第2章 CSS(样式控制与页面布局).ppt

ID:48750663

大小:541.00 KB

页数:22页

时间:2020-01-21

第2章 CSS(样式控制与页面布局).ppt_第1页
第2章 CSS(样式控制与页面布局).ppt_第2页
第2章 CSS(样式控制与页面布局).ppt_第3页
第2章 CSS(样式控制与页面布局).ppt_第4页
第2章 CSS(样式控制与页面布局).ppt_第5页
资源描述:

《第2章 CSS(样式控制与页面布局).ppt》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、2.4CSS:样式控制与页面布局2.4.1网页布局与页面元素定位2.4.2CSS样式控制2.4.3页面布局2.4CSS:样式控制与页面布局样式style指元素在浏览器中呈现的形式。在XHTML中,使用style设置元素的样式,每个style内包含一个或多个属性,其一般形式为:style="属性名1:属性值1;属性名2:属性值2;……"属性名与属性值之间用冒号“:”分隔,如果一个样式中有多个属性,各属性之间用分号“;”隔开。

标记:分区标记2.4.1网页布局网页布局方式左对齐(默认情况下,网页布局为水平左对齐显示)居中满宽度显示网页水平居中显

2、示,宽度固定在body的style样式中,设置text-align属性为center。如果希望页面宽度固定,可以通过设置div的width属性实现,代码示例如下:

2.4.1网页布局网页满宽度显示,宽度随浏览器显示界面大小自动调整将固定宽度变为98%:

3、%;height:200px;">

2.4.1页面元素定位页面中的元素3种定位方式1.流布局(static)(默认是该方式)页面中的元素按照从左到右、从上到下的顺序显示,各元素之间不重叠。2.坐标绝对定位(absolute)元素显示在页中的位置由style样式的left、top、right、bottom以及z-index属性决定,具有相同z-index值的元素可以重叠,其效果就像多张透明纸按顺序重叠在一起一样。z-index值大的元素会覆盖z-index值小的元素内容。绝对定位元素的坐标位置是以它最近的具有position属

4、性的父容器作为参照物的。见HTMLPosition1.htm3.坐标相对定位relative方式在流布局中的坐标相对定位,元素在页中显示的位置由left、top以及z-index属性决定,具有相同z-index值的元素不重叠。见HTMLPosition2.htm2.4.2CSS样式控制CSSCascadingStyleSheets的缩写,称为级联样式表,也叫层叠式样式表。引入CSS的主要目的是为了将网页结构和表现分离。CSS定义样式的方式内联式嵌入式外部链接式2.4.2CSS样式控制—内联式内联式适用于单独控制某个元素样式的情况。优点:设置样式直观

5、、方便;缺点:大量修改某些元素的样式时,需要对各个元素逐一修改,非常烦琐。举例

第1章1.1第1章第1节1.2第1章第2节第2章

6、ue;">2.1第2章第1节2.2第2章第2节

2.4.2CSS样式控制----嵌入式嵌入式:在区定义的样式适用环境:适用于某个网页内的具有相同样式的元素。优点:当修改某些元素的样式时,只需要修改head部分的样式即可,该网页内的所有具有相同样式的元素会自动应用新的样式。2.4.2CSS样式控制----嵌入式举例无标题页

7、t/css">h1{font-size:30pt;color:Red;}h2{font-size:20pt;color:Blue;}

第1章

1.1第1章第1节

1.2第1章第2节

第2章

2.1第2章第1节

2.2第2章第2节

2.4.2CSS样式控制----外部链接式外部链接式适用环境:多个网页内具有相同样式的元素,这种方式将样式保存在一个或者多个单独的.css文件中,当需要

8、修改元素的样式时,只需要修改.css文件中的样式即可。优点:一旦修改了.css中的某个样式,凡是引用了指定.css文件的网

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签