CSS+DIV入门教程PPT_2010更新版
时间：2025-04-19
CSS+DIV使用教育程
第五章 样式表
统一网站风格、制作基本特效
CSS+DIV使用教育程
主要内容 一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、CSS样式在网页中的应用 六、CSS的高级应用
CSS样式表
CSS+DIV使用教育程
一、CSS的基本概念 1、编写CSS样式的方法
使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器
如Dreamweaver、Frontpage等超文本编辑器均可编 辑样式表； 记事本
CSS样式表
CSS+DIV使用教育程
一、CSS的基本概念单一选择符的复合 2、基本语法 样式声明应该用 “;”隔开，为便于 阅读也可以分行写 <HEAD> 选择符{属性: 值} 。 <TITLE>CSS例子</TITLE> <STYLE TYPE=“text/css”> H1{ font-size:x-large; color:red} 选择符{属性1: 值1; 属性2: 值2 ;……} H1{ font-size:x-large; color:red} 几乎所有的HTML H2{ font-size:large; color:blue} H2{ font-size:large; color:blue} 标记符形式都可以 </STYLE> 作为选择符。 </HEAD>
5-1.htm
CSS样式表
CSS+DIV使用教育程
一、CSS的基本概念 3、CSS样式的组合、继承和关联性
样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。-例如：段落元素p、单元格元素td和类c1可以使用
相同样式：p,td,.c1{font-size:12pt;font-family:黑体;color:red}
5-2.htm CSS样式表 5
CSS+DIV使用教育程
一、CSS的基本概念 样式的继承：若子元素未定义，则它将继承上级元素的 样式的定义。但存在少数属性不能继承，见P119。<HEAD> <TITLE>CSS例子</TITLE> <style> <!-p{color:red;font-size:20px;font-family:"华文仿宋", "Comic Sans MS"} b{text-decoration:underline} --> </style> </HEAD>5-3.htm CSS样式表 6
CSS+DIV使用教育程
一、CSS的基本概念 样式表的关联性： – 样式表的关联性指在某些样式定义中，可以定义某 样式仅在某个特定元素范围内才有效。。 – 例如：p b{font-size:12pt;font-family:黑体;color:red}
b元素仅在p元素作用范 围内会套用上述的样式 设定。 而在其他地方 不具有这些属性。5-4.htm CSS样式表 7
CSS+DIV使用教育程
一、CSS的基本概念 4、注释
CSS文字的注释形式与C语言类似。p{font-size:12pt} /*P标签的样式定义*/
CSS样式表
CSS+DIV使用教育程
一、CSS的基本概念 5、选择符
样式表的基本语法形式：selector{property1:value1; property2:value2;…} 需要应用的 样式的内容 样式的属性 样式的属性 的值
Select的五种合法的类别：HTML标记符、用户定义的类 Class、用户定义的ID、虚类和虚元素 P119
CSS样式表
CSS+DIV使用教育程
选择符的类别HTML标记符应用比较多，注意继承性、组合性和关联性(P119)的 应用。 1、 用户定义的类选择符 两种定义形式的区 别？ 可以使用任何名称命名类。 2、在标签中使用类选择 <body>里
所有的元素都可以定义“类”。 符样式的使用方式如何 语法如下： ? selector.classname{property1:value1; property2:value2;…} .classname{property1:value1; property2:value2;…}
例5-5.htm
CSS样式表
CSS+DIV使用教育程
选择符的类别ID选择符应用的形式基本与类选择符类似，定义时用“#”替 代”.”。 因此应用时一般选取其中的一种。见P120例子。
虚类和虚元素在html的页面元素中没有这种属性，故称其为虚类，仅 在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下： 页面元素名：元素虚属性名{样式表内容}
CSS样式表
CSS+DIV使用教育程
a:link {color: #000000}
a:visited {color: #cccccc}a:hover {color: #000000; font-style:italic} a:active {color: #aaaaaa}
:link {color: #000000} :visited {color: #cccccc} :hover {color: #000000; font-style:italic} :active {color: #aaaaaa}
例5-6.htm
CSS样式表
CSS+DIV使用教育程
二、CSS与HTML文档的结合方法 HTML与样式表有多种结合方法 – 内联样式：在<head>标记符内定义 – 外联样式 使用<link>标记符链接到外部的样式文件 使用CSS的@import标记符来导入样式文件 – 在HTML标签中直接加入样式表的定义。
CSS样式表
CSS+DIV使用教育程
二、CSS与HTML文档的结合方法 内联样式：在<head>标记符内定义，在本网页内起作 用。<head>
<style type="text/css“ media=“screen”><!-body{ color:green }
--></style> </head>
CSS样式表
CSS+DIV使用教育程
二、CSS与HTML文档的结合方法 外联样式：使用<link>标记符链接到外部的样式文件， 凡链接的网页都起作用
– 1、定义外部样式文件，用记事本或者 Dreamweaver,编辑完后文件扩展名应为”.css”;– 2、建立HTML网页文档； – 3、在网页文档中使用<link>标签将前面的样式表 文档链接到网页中。<head> <link rel=“stylesheet” href=“hr.css” type=“text/css”> </head>例5-7.htm CSS样式表 15
hr.css
CSS+DIV使用教育程
二、CSS与HTML文档的结合方法 外联样式：使用@import导入外部的样式文件，凡在 导入该样式表的网页都起作用
– 1、定义外部样式文件，用记 …… 此处隐藏：956字，全部文档内容请下载后查看。喜欢就下载吧 ……
CSS+DIV入门教程PPT_2010更新版.doc
将本文的Word文档下载到电脑
