网页设计与制作5-CSS样式表.pptVIP

网页设计与制作 5 HTML-CSS样式表 CSS样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 ；CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面；没有修改到的属性按默认情况显示 在Dreamweaver中添加CSS 菜单窗口CSS样式 在CSS面板中单击“新建CSS规则”按钮，添加新的CSS样式 CSS样式的定义 CSS样式可以定义在三种不同位置： 嵌入在HTML标签中 eg. p style=“color:maroon” 在当前html文件的head区域中定义 eg. ……. style p {color:maroon} /style …… CSS样式定义 在外部.css文件中定义 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存 Eg.在example.css中： p{ color:maroon} 在需要使用此样式的html文件的head区域中加入对此外部css样式文件的链接 head link rel=stylesheet type=text/css“ ref=“example.css” /head CSS样式的定义 CSS定义的格式： CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 若设置多个属性，则之间用分号隔开 selector {property1: value; property2: value} Eg. p { color: #ff0000; } Eg. .mystyle{color:#ff0000; font-size:16px;font-family:Arial, Helvetica, sans-serif;} CSS样式的分类 类样式/自定义样式 选择器名称前面带有”.” eg. .mystyle 引用时在html元素标签中 设置class属性为选择器名 eg. img src=“…” alt=“…” class=“mystyle” 重新定义特定标签样式，例如 h1 选择器名称前面没有”.” eg. h1 高级样式使用ID或伪类选择器定义样式表 伪类选择器 eg. a:visited {color:#FF0000} id 选择器 派生选择器 CSS样式的分类 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式 例如专门给某个层定义样式 ……. #div1 {color:#ff0000;left:187px; top:58px; width:34px; height:54px;} …… div id=“div1” …… CSS样式的分类 派生选择器 通过依据元素在其位置的上下文关系来定义样式 #Div1 img {border: thin solid #FF0000;} 指定在id为Div1的html元素中的图片样式，并不影响其他区域图片样式 .mystyle img{……} 指定在使用了mystle样式的html元素内部的图片样式 td h1表示在单元个中的标题一 td .mystyle 表示如果在单元格中使用mystyle样式则有效，其他html元素若使用mystyle样式则无效 CSS样式举例 A.title:link { FONT-SIZE: 12px; COLOR: #1733a0; TEXT-DECORATION: none} A.title:visited { FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: none} A.title:hover { FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: underline} A.title:active { FONT-SIZE: 12px; COLOR: #008000; TEXT-DECORATION: none} 使用：a href=“#” class=“title”网上书斋/a .title A:link { FONT-SIZE: 12px; COLOR: #1733a0; TEXT-DECORATION: none} .title A:visited { FONT-SIZE: 12px; COLOR: #666666; TEXT-DECORATION: none} .title A:hover { FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECO