商务网站设计I6.4.3CSS的选择符.ppt

* html head title简单表格布局/title /head body topmargin=0 table width=400 border=0 align=center cellpadding=0 cellspacing=0 tr td height=20 valign=top bgcolor=#cccccc font color=#0000ffstrong顶部/strong/font /td /tr tr td table width=100% border=0 cellpadding=0 cellspacing=0 tr td width=25% height=120 valign=top bgcolor=#eeeeee font color=#ff0000列表/font /td td width=75% height=120 valign=top bgcolor=#f7f7f7 font color=#ff0000内容/font /td /tr /table /td /tr tr td height=20 valign=top bgcolor=#cccccc font color=#0000ffstrong底部/strong/font /td /tr /table /body /html * html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleXHTML+CSS简单布局/title style type=text/css *{margin:0px; padding:0px;} #all{width:400px; margin:0px auto; color:#f00; } #top,#bt{height:20px; background-color:#ccc; color:#00f; font-weight:bold;} #list{width:25%; height:120px; float:left; background-color:#eee;} #content{width:75%; height:120px; background-color:#f7f7f7;} /style /head body div id=all div id=top顶部/div div id=mid div id=list列表/div div id=content 内容/div /div div id=bt底部/div /div /body /html * 专家点拨：表格虽然不提倡用作布局，但并不代表XHTML将排斥表格的使用，只是在需要显示表格型数据的时候使用表格标签，即把表格用于合适的地方，不滥用，保持结构的清晰。 6.3.1 CSS的插入形式 语法解释: （1）style标记：用来说明所要定义的样式。 （2）type=＂text/css＂：说明这是一段CSS样式表代码。 （3）!--与--标记：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。该标记的加入就是为了防止一些不支持CSS的浏览器，将style与/style之间的CSS代码当成普通的字符串显示在网页中。 （4）选择符：即样式的名称，可以选用HTML标记的所有名称。 6.3.1 CSS的插入形式 如将上面的mystyle.css文件直接定义在页面中的代码如下： head …… style type=text/css !— hr {color: sienna} p {margin-left: 20px} body {background-image: url(images/back40.gif)} -- /style …… /head 6.3.1 CSS的插入形式 3．导入外部样式表 导入外部样式表是指在内部样式表的style区域内导入一个外部样式表，导入时需要用@import做声明，该声明可放在head标记外也可以放在head标记内，但根据语法规则，一般都是放在head标记内，其语法格式如下： head style type=”text/css” @import url（外部样式表文件地址）； ……… /stytle … /head 6.3.1 CSS的插入形式 语法解释： import语句后面的“；”是不可省略的，样式表地址可以是绝对地址，也