chap5 样式表.pptVIP

Internet与网页设计 第五章 样式表 统一网站风格、制作基本特效 主要内容 一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、利用样式表编辑器编辑样式表 六、CSS的高级应用 一、CSS的基本概念 1、CSS简介 CSS是Cascading Style Sheet的缩写，即层叠式样式表。 CSS的优点 结构部分和表现部分各自独立，使数据处理更简单也更易维护。 页面代码量减少 语义结构清晰 实例：生查(zha)子.元夕 CSS table 一、CSS的基本概念 2、编写CSS样式的方法 使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器 如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表； 记事本 一、CSS的基本概念 3、基本语法 P169：包括选择符、属性和值 一、CSS的基本概念 注释 CSS文字的注释形式与C语言类似。 一、CSS的基本概念 4、选择符 P175 (1)通配选择符（请在书上补充） (2)类选择符 (3)标签选择符 (4)ID选择符 (5)包含选择符 (6)选择符分组 (1)通配选择符 写法是“*”，表示所有元素。例如 *{font-size:12px;} 说明： font-size属性表示字体的大小，px是像素 该样式实现的效果：页面中所有文本字体大小为12个像素。 （2）类选择符 用户定义的类选择符P175 可以使用任何名称命名类。 body里所有的元素都可以定义“类”。 语法如下： 类样式的使用：必须利用标签的class属性 例如：p class=“s1”……/p 注意：定义类样式的时候选择符必须以“.”开始，但在应用类样式的时候不需要”.” (3)标签选择符 P176 是指利用HTML标签作为名称的选择符。 例如：body、h1、h2、td、ul、li等 （4）ID选择符 ID选择符 P179 应用的形式基本与类选择符类似，定义时用“#”替代”.”。 因此应用时一般选取其中的一种。 (5)包含选择符P179 －样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。 例如： (6)选择符分组 －把具有相同声明定义的选择符组合在一起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式： 虚类和虚元素（伪类） 虚类和虚元素 在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下： 二、CSS属性的理解与应用 样式表的5类常用属性：详见P170 字体属性 ：字体、字号、行距等。 颜色及背景属性 ：背景颜色、背景图片等。 文本属性： 区块属性 ：边框粗细等。 分级属性 ：各组件的字距、行距、缩排等。 鼠标属性 ：鼠标形状等。 详见帮助文件 字体属性 Font-family:指定文字的字体 H1{font-family:华文彩云} Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 Font-weight Font：上述样式属性的综合表示法。 P{font: bold 16pt} 颜色及背景属性 Color:颜色 Background-color：指定背景颜色 H1{background-color:#000800} Background-image：指定Html组件的背景图片，值为url或none。 Body{background-image:url(image1.jpg)} 文本属性 Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink. Text-align：指定文字的对齐方式。值为：left,right,center,justify Line-height 区块属性 定义边界，取值为：长度|百分比|auto 上边界：margin-top；下边界：margin-bottom 左边界：margin-left：右边界：margin-right P.narrow { margin-right: 50% } 定义边框： Border-color Border-width Border-style 分级属性 List-style-type：指定项目符号或编号 允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | up