文本描述
样式表 统一网站风格、制作基本特效主要内容 一、样式表(CSS)的基本概念
二、CSS与HTML文档的结合方法
三、CSS属性的理解与应用
四、CSS样式的单位
五、CSS样式在网页中的应用
六、CSS的高级应用一、CSS的基本概念 1、编写CSS样式的方法
使用CSS编辑器
如Dreamweaver、Frontpage等都会自带CSS编辑器。
使用超文本编辑器
如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表;
记事本一、CSS的基本概念 2、基本语法 选择符{属性: 值} 选择符{属性1: 值1; 属性2: 值2 ;……} 单一选择符的复合样式声明应该用“;”隔开,为便于阅读也可以分行写 几乎所有的HTML标记符形式都可以作为选择符 <HEAD
<TITLECSS例子</TITLE
<STYLE TYPE=“text/css”
H1{ font-size:x-large; color:red}
H2{ font-size:large; color:blue}
</STYLE
</HEAD 5-1.htm H1{ font-size:x-large; color:red}
H2{ font-size:large; color:blue}一、CSS的基本概念 3、CSS样式的组合、继承和关联性
样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。
-例如:段落元素p、单元格元素td和类c1可以使用相同样式: p,td,.c1{font-size:12pt;font-family:黑体;color:red} 5-2.htm一、CSS的基本概念 样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承,见P119 <HEAD
<TITLECSS例子</TITLE
<style
<!--
p{color:red;font-size:20px;font-family:华文仿宋, Comic Sans MS}
b{text-decoration:underline}
--
</style
</HEAD 5-3.htm一、CSS的基本概念 样式表的关联性:
样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。。
例如: p b{font-size:12pt;font-family:黑体;color:red} b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性 5-4.htm一、CSS的基本概念 4、注释
CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/一、CSS的基本概念 5、选择符
样式表的基本语法形式:
selector{property1:value1;property2:value2;…} 需要应用的样式的内容 样式的属性 样式的属性的值 Select的五种合法的类别:HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素 P119选择符的类别 HTML标记符
应用比较多,注意继承性、组合性和关联性(P119)的应用。
用户定义的类选择符
可以使用任何名称命名类。
<body里所有的元素都可以定义“类”。
语法如下: selector.classname{property1:value1;property2:value2;…}
.classname{property1:value1;property2:value2;…} 例5-5.htm 1、 两种定义形式的区别?
2、在标签中使用类选择符样式的使用方式如何?选择符的类别 ID选择符
应用的形式基本与类选择符类似,定义时用“#”替代”.”。
因此应用时一般选取其中的一种。见P120例子。
虚类和虚元素
在html的页面元素中没有这种属性,故称其为虚类,仅在IE5.0以上的浏览器版本才支持虚类选择符。
语法如下: 页面元素名:元素虚属性名{样式表内容}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 。。。以上简介无排版格式,详细内容请下载查看