WebUnit03--HTML标记语言.ppt

方法4--使用ID选择符 id属性 ID属性用于定义一个元素的独特的样式。ID值可以关联一个标准的标记，也可以用于任何标记。 一般形式 [标记]#id选择符{属性名:属性值;属性名:属性值……} 例如 #location-table { border:0px; cellspacing:0px; cellpadding:0px; } #help-table { border-left:1px solid #0163A2; border-bottom:1px solid #0163A2; border-top:1px solid #0163A2; border-right:1px solid #0163A2; cellspacing:5px; cellpadding:px; font-family:宋体; font-size: 12px; color:#FF0000; line-height:150%; } #foot-table { margin-top:15px; height:65px; font-family:宋体; font-size:12px; color:#FFFFFF; text-align:center; line-height:150%; background-color:#d0d0cf; } 举例 上述id设定用于每一个页面中的当前位置、帮助信息以及版权页角的设定。在每一个页面中，这是一样的 页面设计效果 使用id选择符和class选择符的不同 class属性值为一个用户自定义的样式类，一个用户自定义的样式类可以在多个标记中使用 id属性，用于标识一个标记，在一个HTML文档中，不能有相同的id号。这就如标记的name属性，不能重名，这可以从DOM模型来很容易理解，通过getElementById 方法可以访问id所识别的对象。 在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。 在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。 样式（.css）文件 样式（.css）文件 如果要将这些样式应用到其他HTML文档中，应该使用样式文件。即，将这些样式定义存储在一个扩展名为.css的样式文件中，css文件可以是一个标准的HTML文件，只不过body…/body为空。 使用css文件 link type=text/css rel=stylesheet href=mystyle.css 重点难点 文件命名要规范，例如：通用的样式文件mycommon.css,关于表格的样式定义文件mytable.css 样式名要规范，便于阅读 要在文档中引用外部样式，这个（在头部）必须有！ 将某文件连接包含进来，属性”rel”是“关联”的类型 举例1—定义通用样式文件mycommon.css 文件名mycommon.css 包含页面中常用的标记样式类定义，包括：a标记、各种文本样式定义 网页文件 html head meta http-equiv=Content-Language content=zh-cn meta http-equiv=Content-Type content=text/html; charset=gb2312 link rel=stylesheet type=text/css href=mycommon.css /head body p class=txtwarning使用CSS样式类的好处：/p p（1）内容与显示的分离/p /body /html 举例2—定义关于table的样式文件mytable.css 文件名mytable.css 包含在表格中使用的表格标记、单元格标记、单元格内容、单元格文本等各类样式 表格样式的使用 span标记 span元素不同于一般的HTML元素，它没有自己的显示内容和显示特性。引入 span标记的目的是：定义一个行内区域，可以给这个区域一个id属性，结合CSS，对该区域设定特定的样式，以得到需要的显示效果。也可以使span标记的区域响应鼠标或键盘事件，制作菜单、树形结构目录、列表框及下拉列表框项目。 span在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。和div标记相比，span在CSS定义中属于一个行内元素，而div是块级元素 span举例—span标记区的访问方法 html head meta http-equ