[PPT模板]CSS+DIV_教程.ppt

Internet与网页设计 第五章 样式表 统一网站风格、制作基本特效 主要内容 一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、CSS样式在网页中的应用 六、CSS的高级应用 一、CSS的基本概念 1、编写CSS样式的方法 使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器 如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表； 记事本 一、CSS的基本概念 2、基本语法 一、CSS的基本概念 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式： 一、CSS的基本概念 样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见P119。 一、CSS的基本概念 样式表的关联性： 样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。 例如： 一、CSS的基本概念 4、注释 CSS文字的注释形式与C语言类似。 一、CSS的基本概念 5、选择符 样式表的基本语法形式： 选择符的类别 HTML标记符 应用比较多，注意继承性、组合性和关联性（P119）的应用。 用户定义的类选择符 可以使用任何名称命名类。 body里所有的元素都可以定义“类”。 语法如下： 选择符的类别 ID选择符 应用的形式基本与类选择符类似，定义时用“#”替代”.”。 因此应用时一般选取其中的一种。见P120例子。 虚类和虚元素 在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下： 二、CSS与HTML文档的结合方法 HTML与样式表有多种结合方法 内联样式：在head标记符内定义 外联样式 使用link标记符链接到外部的样式文件 使用CSS的@import标记符来导入样式文件 在HTML标签中直接加入样式表的定义。 二、CSS与HTML文档的结合方法 内联样式：在head标记符内定义，在本网页内起作用。 二、CSS与HTML文档的结合方法 外联样式：使用link标记符链接到外部的样式文件，凡链接的网页都起作用 1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”； 2、建立HTML网页文档； 3、在网页文档中使用link标签将前面的样式表文档链接到网页中。 二、CSS与HTML文档的结合方法 外联样式：使用@import导入外部的样式文件，凡在导入该样式表的网页都起作用 1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”； 2、建立HTML网页文档； 3、在网页文档中@import导入前面的样式表。 二、CSS与HTML文档的结合方法 在HTML标签中直接加入样式表的定义 若在个别标签需要作样式调整，可使用这种方式。 使用标签的“Style”属性来定义样式。 三、CSS属性的理解与应用 样式表的5类常用属性：详见P126 字体属性 P126：字体、字号、行距等。 颜色及背景属性 P127：背景颜色、背景图片等。 文本属性：P128 区块属性 P128：边框粗细等。 分级属性 P128：各组件的字距、行距、缩排等。 鼠标属性 P130：鼠标形状等。 详见帮助文件 字体属性 Font-family:指定文字的字体 H1{font-family:华文彩云} Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 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 区块属性 定义边界，取值为：长度|百分比|auto 上边界：margin-top；下边界：margin-bottom 左边界：margin-left：右边界