HTML+CSS结合,基础讲解ppt课件

HTML+CSS基础讲解,1,大纲,此次内容XHTML部分了解常用的XHTML标签页面中标签的使用场景，如何优化结构CSS部分基础语法类、伪类的使用重载、继承,2,XHTML部分,3,XHTML规范,XHTML有三种规范1、XHTML1.0TransitionalXHTML1.0Transitional包含HTML4.01的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML开发者更容易的接受并使用XHTML。2、XHTML1.0StrictXHTML1.0Strict就是严格版本的XHTML了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS控制页面的显示而不是使用，bgcolor之类的标记或属性。3、XHTML1.0FramesetXHTML1.0Frameset用于把文档分割成几个桢以显示不同的内容。（XHTML1.0Transitional和Strict页面不允许包含标记）。,4,XHTML写法,一个合法的XHTML页面必须再起其他内容出现前包含XHTMLDOCTYPE定义。XHTML1.0TransitionalXHTML1.0StrictXHTML1.0Frameset,5,XHTML写法,1、标记必须指定一个默认的命名空间。例如一个XHTML1.0Transitional页面应该有如下声明：,2、所有的标记以及属性名称必须为小写字母,3、属性值必须书写于一对引号内,4、所有非空的标记必须成对出现,6,XHTML写法,8、属性值中空格的处理：首尾空格被忽略，中间的多个空格被当成一个处理,9、和标记的内容必须被包围在CDATA段中,6、属性不可以简写,7、使用id属性，而不是name属性,5、标记不可以重叠,7,XHTML结构,标题,8,XHTML结构,9,常用HTML标签集,标头标签h1,h2,h3,h4,h5块状标签：div,span,label,table,form,fieldset,ol,ul内容标签：p,i,em,br,strong,10,HTML页面中标签的使用,标头标签h1,h2,h3,h4,h5示例：主标题h1副主标题h2副标题h3副标题h4P标签,11,HTML页面中标签的使用,块状标签：div,span,label,table,form,fieldset,ol,ul示例：div块外层的DIV嵌套一个divDiv中的段落,12,HTML页面中标签的使用,内容标签：p,i,em,br,strong示例：这是一段普通的文本，用来测试各种不同样式。以下是文字的样式这一条是用来测试斜体这个用来测试粗体em标签,13,1、页面就是文档2、结构要清晰3、结构要完整,页面中标签的使用,14,文档结构图,15,理想的XHTML文档结构应当包含：1、有且唯一含有H12、若干个H2、H3、H43、内容使用P等标签来形成段落4、使用DIV划分内容区域块5、结构完整,文档结构文档,16,CSS部分,17,CSS指层叠样式表(CascadingStyleSheets)采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。为什么要引入CSS技术？,CSS介绍,把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一,18,CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selectordeclaration1;declaration2;.declarationN选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性，每个属性有一个值。属性和值被冒号分开。selectorproperty:value提示：请使用花括号来包围声明。,CSS语法,19,CSS语法,提示,用法基本原理同类、类派生选择器，但与类不同的是，ID在页面中是唯一的，不可重复指定。,26,继承、重写,根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。通过CSS继承，子元素将继承最高级元素所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。,27,继承、重写,CSS可以把之前定义的样式，以重写的形式将旧样式强制转换成新的样式。,提示：重写只对相同的属性有效，不同的属性依旧使用的是继承的方式显示。,28,框模型概述,内边距、边框和外边距都是可选的，默认值是零。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。,29,框模型概述,在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。,提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。,30,总结,XHTML的注意点：所有的XHTML元素都必须被正确地嵌套，XHTML必须拥有良好的结构，所有的标签必须小写，并且所有的XHTM