[PPT模板]03CSS+DIV.ppt

Overview 动态网站开发与设计 3.1 什么是CSS和DIV 进行Web开发要遵循一定的标准，Web标准是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为3个方面： 结构化标准：XHTML和XML； 表现标准：CSS； 行为标准：对象模型（如W3C DOM）和ECMAScript等。 CSS是Cascading Style Sheets（层叠样式表）的缩写，是用于控制网页样式并允许将样式信息同网页内容分离的一种标记性语言。在网页设计中，XHTML负责组织网页的结构和内容，CSS负责决定页面的表现形式。W3C于1996年12月发布了CSS1.0规范，1998年5月发布了CSS 2.0规范。目前最新版本是CSS3.0版。 W3C并不强制要求软件厂商的产品必须符合其规范，所以目前流行的浏览器都没有完全符合CSS的规范，这给网页设计师带来了浏览器兼容的问题。但是CSS可实现对网页的外观和排版的精确控制，可对多个元素统一设置，可取代XHTML表格样式的布局。CSS布局与XHTML相结合能帮助设计师分离外观与结构，便于页面的修改，便于页面风格的统一，减少网页的体积，使站点的访问及维护更加容易，极大地提高了工作效率。 在Web标准中，除了用CSS控制内容的表现方式外，还用DIV作为容纳内容的基本单元。 DIV是不含任何语义的标记，用来在其中放置任何网页元素，是个块级容器。 页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。可以通过调节盒子的边框和距离等参数，来调节盒子的位置。DIV当然也是盒子。 DIV+CSS布局就是用DIV将页面分块，用CSS设计各块的位置大小以及相互关系，在页面的各大DIV中插入作为各个栏目框的小DIV。DIV+CSS布局符合W3C标准，目前已成为网页布局的主流。 CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。 CSS定义的基本语法格式为： 选择符{规则列表} 选择符是指要使用该样式的对象，它指定了对哪些网页元素进行设置。CSS选择符主要有XHTML标记选择符、CLASS选择符、ID选择符和伪类选择符等四种。它可以是一个或多个XHTML标记、ClASS选择符或ID选择符，如果为多个则使用逗号“,”进行分隔。 规则列表是由一个或多个属性定义语句组成的样式规则，各语句间使用分号“;”进行分隔。 属性定义语句的语法格式为：“属性名：属性值”，例如： h3{font-family:隶书;color:blue} h2,h3{ font-family:宋体;color:red } myfont{font-size:20pt} #myfont{font-size:20pt} 在XHTML中引入CSS文件，使得CSS描述作用于XHTML中的内容，产生设计者的设计效果。在XHTML中引入CSS的方法有 4种： 1、行内式 2、嵌入式 3、导入式 4、链接式 3.1.2 在XHTML中使用CSS的方法（2） 1、行内式 这种方式可以直接在HTML标记中定义该标记的显示样式，并且该样式定义只能用于这个标记。其语法格式为： 标记名 style=“样式属性名1：属性值1； 样式属性名2：属性值2；…… 如：p style= font-family:宋体;color:red; font-size:10pt 在XHTML1.1中，W3C不建议使用行内式，因为将来可能不予支持。 2、嵌入式 这种方式通过style标记来定义样式，其语法格式为： style type= text/css !-- 选择符1, 选择符2, ……{样式属性名1：属性值1； 样式属性名2：属性值2；……} …… -- /style 其中使用了XHTML注释标记!--……--，是为了当有浏览器不支持CSS语句时，遇到该语句段就会忽略该段内容。 3、导入式 为了让多个页面文件可以共享CSS样式定义，我们可以将CSS语句段编写为单独的一个CSS文件，然后将它嵌入到页面文件中。其语法格式为： style type= text/css !-- @i