第5章__css样式规则.pptVIP

东方 博宜 网页设计 ADOBE DREAMWEAVER 目 录 页面制作入门 页面制作提高 动感页面 页面实战 多媒体网页设计——HTML ADOBE DREAMWEAVER 东方 博宜 多媒体网页设计——HTML ADOBE DREAMWEAVER 第5章 css规则 CSS样式表的写法规则 行内CSS、嵌入式CSS和外联式CSS 选择器及其写法 CSS属性 使用CSS样式表编辑页面 css规则 CSS样式表的写法规则 什么是CSS样式表 CSS样式表(Cascading Style Sheet )是一种对网页进行美化修饰的一种标记性语言。Cascading的意思是“小瀑布，瀑布状的”，读者不妨就把CSS形象地理解为“瀑布一样的样式表”。 CSS的优点： 1、较HTML更标准化，属性更多表现形式很少受限 2、表现和结构分离，便于维护 css规则 CSS样式表的写法规则 CSS基本的规则写法 CSS样式表有属于自己的写法规则。一个标准的CSS写法如下： 选择器 { 属性：值 } 例如： body { margin: 10px; padding: 20px; } 注：多个属性之间用 “ ; ” 隔开。 行内CSS、嵌入式CSS和外联式CSS css规则 行内CSS 直接插入CSS样式表文件 body style=“padding:0 ; spacing:4” 嵌入式CSS style type=“text/css” .wenzhi{…..} /style span class=wenzi…../span 行内CSS、嵌入式CSS和外联式CSS css规则 外联式CSS 在创建网站的工程时，整站包含了很多不同的子页面，设计者希望一个CSS样式表可同时利用与不同。 link rel=“shortuct” type=“tesx/css” style typle=“text/css” !-- @import url(“”);--或者!-- @import “”;-- /style link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，js等等，而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。 css规则 选择器类型 1、类选择器定义 2、标签选择器定义 3、ID选择器定义 4、链接样式定义 选择器及其写法 css规则 类选择器定义方法 选择器名称前加点的方式定义 例如： . text {color : #ff0066 ;font-size:12px ;} — 类选择器的调用 用HMTL标签的class属性调用 例如： span class=“text14px大小的字体/span 选择器及其写法 css规则 标签选择器定义方法 HTML单标签定义 例如： h1{ font-size:12px } HTML多标签定义 例如： p,li,td{ font-size:12px } HTML子标签定义 例如： li strong { font-style : italic } 何为标签，就是HTML中的一些固定标签这里其实是重定义标签，修改这些标签的默认值 选择器及其写法 css规则 ID选择器定义方法 — 选择器名称前加“#”方式定义 例如： #block01 { margin:10px } — ID选择器调用 在HTML中用ID属性调用 例如： div id=“block01/div — ID同样可定义子标签定义 例如： #block01 p { font-size : 14px } 选择器及其写法 css规则 链接样式定义方法 CSS中用四个伪类定义链接样式： a:link、a:visited、a:hover，a : active 分别为：默认链接状态、链接访问后状态、鼠标指上状态、鼠标点击释放之间状态 例如： a:link{text-decoration : none ;color : #c00 ;}a:visited {text-decoration : none ;color : #c30 ;}a:hover {text-decoration : underline ;color : #f60 ;}a:active {text-decoration : none ;c