网页CSS布局与设计教材

1、网页CSS布局与设计l 什么是Web标准l web表现层技术，结构，表现，行为l CSS布局与table布局的区别l 传统的table布局VS.CSS布局l css+div编写工具选择第1章 Web标准与css布局概述l 使用CSS编辑器n如Dreamweaver、Frontpage等都会自带CSS编辑器。 l 使用超文本编辑器n如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表；n记事本CSS+divCSS+div编写工具选择编写工具选择l HTML基础，选择合适的doctype，选择合适的标签l Css的概念l 使用css控制页面l 体验css第2章HTML与CSS基

2、础l CSS(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。 CSS 是 1996 由 W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML 语言更好的适应页面的美工设 计。它以 HTML 语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者 可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS 的引入引发了网页设计一个又一个的新高潮。使用 CSS 设计的优秀页面层出不穷。l 和 HTML 类似，CSS 也是由 W3C 组织

3、负责制定和发布的。1996 年 12 月发布了 CSS 1.0 规范，1998 年发 5 月布 了 2.0 规范。目前的有两个新版本正处于工作状态，即 2.1 版和 3.0 版。CSSCSS的概念的概念l 行内样式n对标记使用style属性n正文内容1n正文内容2n正文内容3使用使用csscss控制页面控制页面l 内嵌样式n用声明，写在中pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:25px;紫色、粗体、下划线、25px的效果1紫色、粗体、下划线、25px的效果2使用使用CSSCSS控制页面控制页面l 链

4、接样式l 独立css代码文件l 页面：css标题1 紫色、粗体、下划线、25px的效果1 css标题2 紫色、粗体、下划线、25px的效果2使用使用csscss控制页面控制页面Css文件：h2color:#0000ff;pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:20px;使用使用csscss控制页面控制页面l 导入样式 import url(1.2.css);使用使用CSSCSS控制页面控制页面l 从高到低：行内样式、链接式、内嵌式、导入式 各种优先级问题各种优先级问题l Css选择器l 选择器声明l

5、 css的继承第3章Css的基本语法标记选择器：标记选择器： h1 color: red; font-size: 25px; 选择器 属性 值 属性 值 CSSCSS选择器选择器CSSCSS选择器选择器类别选择器：类别选择器： .class color: red; font-size: 25px; 类别选择器 属性 值 属性 值 CSSCSS选择器选择器ID 选择器：选择器： # id color: red; font-size: 25px; ID 选择器 属性 值 属性 值 l 子类选择器np.onecolor:redn实例： .one color:red; p.two color:gree

6、n; .one可以用于各种标签；而.two只能用于p标签。l 后代选择器ndiv pcolor:#00FF00n例子：nn我是一个兵。n高级选择器高级选择器l p,h1,.onecolor:redl 伪类选择器l a:link;hover;visited;active 或者：a.one:link;a#two:link 高级选择器高级选择器l 集体声明l 嵌套选择器选择器声明选择器声明l 所有的 CSS 语句都是基于各个标签之间的继承关系的，为了更好的理解继承关系，首先从 html 文件的组织结构 入手CSSCSS的继承的继承l Css文字样式l css段落文字l 图片样式l 图片的对齐l 图片

7、的混排第4章用Css设置丰富的文字和图片效果l 字体：p font-family: 黑体,Arial,Times New Roman,Helvetica, sans-serifl 文字大小：font-sizel 文字颜色：colorl 文字粗细：HTML: ; CSS: font-weight l 斜体：font-style: italic；l 下划线、顶划线、删除线：text-decoration:line-throughl 英文字母大小写：text-transform:capitalizeCssCss文字样式文字样式l 水平对齐：text-align: left; right; cente

8、r; justify;l 垂直对齐：vertical-align: top; bottom; middle; (注：对块级元素等不起作用)l 行间距：line-height: 8pt;(绝对数值) 1.5em; (相对数值）l 字间距：letter-spacing:2pt; 1.5em;csscss段落文字段落文字l 图片边框nHTML: n例4.1nimgnborder-style:dotted;dashed;solid;double;groove;ridge;nborder-color:#ff9900;nborder-width:5px;图片样式图片样式l 图片缩放l 图片的对齐n横向对齐

9、：n不能直接设置图片的text-align，而是通过设置其父元素的该属性实现。n竖直对齐：nVertical-align属性l 图文混排图片样式图片样式l 5.1 5.1 用背景色给页面用背景色给页面分块分块l 5.2 5.2 背景图片重复背景图片重复 background-repeatl 5.3 5.3 背景图片位置背景图片位置 background-position: 30px (em %)l 5.4 5.4 固定背景图片固定背景图片 background-attachment:fixedl 注：writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是

10、上-下、右-左。第5章用Css设置网页中的背景l 控制表格l 隔行变色l 日历l CSS与表单l 文字一样的按钮第6章用Css设置表格与表单的样式l 丰富的超链接特效l 鼠标特效第7章用Css设置页面和浏览器的元素l 项目列表l 无需表格的菜单第8章用Css制作实用的菜单l 标记与标记l 盒子模型l 元素定位第9章理解css定位与div布局l 块级元素，其包围元素自动换行。中间可包含l 行内元素，他的前后不会换行。中间不能包含标记与标记与标记标记l 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间l 可以通过调整盒子的边框和距离等参数，来调节盒子的位置l 一个盒子模型由content

11、(内容)、padding(间隙)、 border(边框)、 margin(间隔)这四个部分组成l 一 个 盒 子 的 实 际 宽 度 （ 高 度 ） 是 由content+padding+border+margin组成的l 在CSS中可以通过设定width和height的值来控制content的大小l 技术背景：在浏览器中，width和height的值都是width+padding或者height+padding的值，因此在实际做网页时需要特别注意。另外在页面具体排版时，如果块中包含子块，情况会比较复杂。盒子模型盒子模型l 一般用于分离元素，border的外围即为元素的最外围，因此计算元素的实

12、际的宽和高时，将border纳入l border属性：color、width、stylel width即border的粗细程度，可以设定为thin、medium、thick和具体值。默认值为medium，一般的浏览器都将其解析为2px宽l style属性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等l 注：对于groove、inset、outset和ridge这几种值，IE支持不理想，不推荐使用borderborderl 如果希望在某段文字结束后加上虚线用于分割，而不是用border将这段话框起来，可以通过单

13、独设置border-bottom来完成l 注意：在特定情况下给元素设置background-color背景色时，IE作用的区域为content+padding，而firefox则是content+padding+borderborderborder.cellborder:10px dashed #000000;text-align:center;background-color:#e799f8;l padding用于控制content与border之间的距离l 技术背景：在浏览器中如果使用width或是height属性指定了父块的宽或高，由于width或height值中包含padding，co

14、ntent会受到padding的挤压。在网页设计中，也可以利用这一点实现许多效果。在CSS排版中需要同时设置4个方向的padding值时，可以将4个语句合成到一起PaddingPadding.outsidepadding:10px 30px 50px 100px /*同时设置，顺时针同时设置，顺时针*/l margin：指元素与元素之间的距离l 两个块并排(行内元素)MarginMarginspan1span2margin-rightmargin-leftmargin-right+margin-leftl 两个块并排（块级元素）MarginMargindiv1div2div1的margin-b

15、ottomdiv2的margin-top两者中较大者margin-bottoml 父子关系：当一个块包含在另一个块中间时，将形成典型的父子关系。其中子块的margin将以父块的content为参考MarginMargin父div 子div margin子div父div contentl 当将margin设置为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上l 行内元素MarginMarginspan.leftmargin-right:30px;background-color:#a9d6ff;span.rightmargin-left:-53px;/* 设置为负数设置为负数

16、*/background-color:#eeb0b0;l 用CSS方法对页面中块元素进行定位float 、position、z-indexl float：left、right、none（默认值）。当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。l 块son1浮动到最左端的位置是父块的padding-left加上自己的margin-left，而不是父块的边界border元素的定位元素的定位.son1padding:10px;/* 子块子块son1的的padding */margin:5px;/* 子块子块son1的的margin */background-color:#70ba

17、ff;border:1px dashed #111111;float:left;/* 块块son1左浮动左浮动 *l 将son1的margin设置为负数，子块能浮动到的最左端依然是父块的padding-left加上这个负数元素的定位元素的定位.son1padding:10px;/* 子块子块son1的的padding */margin:5px 0px 0px -35px;/* 负数负数margin */background-color:#70baff;border:1px dashed #111111;float:left;/* 块块son1左浮动左浮动 *父块的padding 子块的marg

18、in子块float:leftl 经验之谈：除了margin-left和margin-right，margin-top与margin-bottom也都可以设置为负数。类似将margin设置为负数的方法在实际排版中十分常见，也可以很好的利用，制作出各式各样的页面版式元素的定位元素的定位l position：指定块的位置，即块相对于父块的位置和相对于它自身应该在的位置l position:static(默认)、absolute、relative和fixedl static:表示块保持在原本应该在的位置，即该值没有任何移动效果l absolute:表示绝对位置，设置为absolute时，子块已经不再从

19、属于父块，其左边框相对于页面左边的距离为20px，这个距离已经不是相对父块的左边框的距离了l 技术背景：top、right、bottom和left这4个CSS属性，它们都是配合pasition属性使用的，表示的是块的各个边界离页面边框（当position设置为absolute）的距离，或各个边界离原来位置（当position设为relative）的距离PositionPositionPositionPosition#blockbackground-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute; /*

20、 absolute绝对定位绝对定位 */left:20px; /* 块的左边框离页面左边界块的左边框离页面左边界20px */top:40px; /* 块的上边框离页面上边界块的上边框离页面上边界40px */l top、right、bottom和left这4个属性不但可以设置为绝对像素，还可以设置为百分数l 经验之谈：鉴于浏览器之间的差异，建议在设计时只设置left和right这两个属性中的一个，以及top和bottom这两个属性中的一个PositionPositionl 一个父块包含两个子块的情况，首先将其中一个子块的position属性设置为absolute，此时块1不再属于父块#fat

21、her，子块2称为父块中的第1个子块PositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute绝对定位绝对定位 */left:30px;top:35px;l 如果将两个子块的position同时设置为absolute，这时两个子块都不再从属于父块，都相对于页面定位l 技术背景：之所以块2位于块1上方，是因为CSS默认后加入到页面中的元素会覆盖之前的元素，在页面中一层层往上写PositionPositionPositionP

22、osition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute绝对定位绝对定位 */left:30px;top:35px;#block2background-color:#ffbd76;border:1px dashed #000000;padding:10px;position:absolute;/* absolute绝对定位绝对定位 */left:50px;top:60px;l position设置为relative时，子块是相对于其父块来

23、进行定位的，同样配合top、right、bottom和left这4个属性l 如果希望子块的宽度仅仅为其内容加上自己的padding值，可以将它的float属性设置为left，或者指定其宽度widthPositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位相对定位 */left:15px;/* 子块的左边框距离它原来的位置子块的左边框距离它原来的位置15px */top:10%;l 将其中一个块的position设

24、置为relativePositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位相对定位 */left:15px;/* 子块的左边框距离它原来的位置子块的左边框距离它原来的位置15px */top:10%;l 同时设置两个子块的position属性为relativePositionPosition#block1background-color:#fff0ac;border:1px dashed #000000;pad

25、ding:10px;position:relative;/* relative相对定位相对定位 */left:15px;/* 子块子块1的左边框距离它原来的位置的左边框距离它原来的位置15px */top:30px;/* 子块子块1的左边框距离它原来的位置的左边框距离它原来的位置30px */#block2background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位相对定位 */left:10px;/* 子块子块2的左边框距离它原来的位置的左边框距离它原来的位置

26、10px */top:20px;/* 子块子块2的上边框距离它原来的位置的上边框距离它原来的位置15px */l z-index属性用于调整定位时重叠块的上下位置，垂直于页面方向为z轴，z-index值大的页面位于其值小的上方l 当块被设置了position属性时，该值便可设置各块之间的重叠高低关系。默认z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系Z Z-index-index空间位置空间位置#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:abso

27、lute;left:20px;top:30px;z-index:1;/* 高低值高低值1 */#block2background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:absolute;left:40px;top:50px;z-index:0;/* 高低值高低值0 */#block3background-color:#c7ff9d;border:1px dashed #000000;padding:10px;position:absolute;left:60px;top:70px;z-index:-1;/* 高低值高低值-1 */l 了解什么