css+div一周教案.docVIP

第一周 第一周1-2节课 课次名称：DIV+CSS网页布局 1.关于HTML和XHTML HTML和XHTML都是由W3C组织（全球万维网联盟）制定的，它们是同一种标签语言的不同阶段。HTML标准较宽松，易混乱，不符合标准化的发展趋势；XHTML是HTML的“严谨版”，对格式要求更规范。 主要区别： （1）在XHTML中标记名称和属性名称必须小写； （2）在XHTML中标记必须严格嵌套； （3）在XHTML中标记必须封闭； （4）在XHTML中空元素的标记也必须封闭； （5）在XHTML中属性值用双引号括起来； （6）在XHTML中属性值必须用完整形式； 2.文档类型 因为存在着HTML和XHTML的区别，所以在创建文件之初就应该选择对应的文档类型。 现在一般使用XHTML文档类型，包括“严格类型”和“过渡（transitional）类型”两种，其中“过渡类型”能兼容以前版本定义而在新版本已经废弃的标签和属性，一般建议使用“过渡类型”。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 以上语句声明了使用过渡类型文档。 3.语言编码 meta http-equiv=Content-Type content=text/html; charset= gb2312 / 它标示文档的语言编码，这里的gb2312告诉浏览器，本文档采用简体中文gb2312编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管采用哪种编码，包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码html是一种标签语言，标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。 head{...}/head body{...}/body div{...}/div span{...}/span p{...}/p ...... 单一的标签： img src= / br / ....... 按xhtml规范，标签必须用小写。 h2{ font-family:宋体; font-size:10pt; color:red; } CSS的基本思想就是首先指定对什么“对象”进行设置，然后指定对此对象的那个方面的“属性”进行设置，最后给出该设置的“值”。的怪CSS样式表由3个基本部分组成，即：对象（标签名称）、属性和属性值。 6.初试牛刀-Hello，Class !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleHello Class/title style type=”text/css” p{ color:blue; font-family: Arial,宋体sans-serif； font-size:10pt; } /style /head body h2Hello, Class!/h2 pWelcome to my class/p pI hope you succeed/p /body /htmlp{ color:blue; } （2）类别选择器 自定义选择器名称，选择器前缀用点号，在标签内使用时用”class=xxx”。如： .red{ color:red;font-size:20px; } 但在HTML标签内要声明使用了哪种类别选择器，如 p class=”red”class 选择器/p 可以将一个类别选择器用于多个标签内，也可在同一标签内使用多个类别选择器，用空格分开即可。 （3）ID选择器 用法与类别选择器相同，但只能在HTML页面中使用一次。如： #green{ color:#009900; font-size:30px; } p id=”green”ID选择器/p ID选择器前缀用#，在标签内使用时用”id=xxx” 8. 在HTML中引入CSS的方法 （1）行内样式 直接对HTML标签使用style属性，如： p style=”color:#990000;font-size:12pt;font-style:italic;”正文内容/p 只对当前标签有效，维护成本高，网页容易过胖，不建议使用。 （2）内嵌式 将CSS样式写在