文档介绍：HTML语言与网页设计
——CSS技术
全有文档
1
学****目标
理解CSS技术在网页制作过程中所起的重要作用,掌握CSS样式定义的方法。
掌握三种在网页中使用CSS样式的方法,并对比各自的优劣。
理解各种CSS属性的含义,掌握常用属性的用法。
2
Part 1
CSS基础
3
什么是CSS
CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的方式设置网页格式。
4
演示——样式的作用
无样式
层叠样式表示例
5
无样式示例
假设现在要在网页中为所有的“标题1”标记符(H1)应用“居中”对齐方式和“楷体”字体那么如果使用HTML方式解决,则必须在每次出现该标记符时使用align=“center”属性,并将标题中文字用FONT标记符括起来以设置字体,如右所示:
代码:
<HTML>
<HEAD>
<TITLE>使用HTML方式〈/TITLE〉
〈/HEAD〉
〈BODY〉
<H1 align=center><FONT face="楷体_GB2312">一级标题</FONT></H1>
<P>...其他正文...</P>
<H1 align=center><FONT face="楷体_GB2312">一级标题</FONT></H1>
〈/BODY〉
〈/HTML〉
6
示例演示效果图
7
层叠样式表示例
代码如下:
<HTML>
<HEAD>
<TITLE>使用CSS方式〈/TITLE〉
<STYLE>
H1{text- align:center; font-family:楷体_GB2312}
</STYLE>
〈/HEAD〉
〈BODY〉
<H1>一级标题</H1>
<P>...其他正文...</P>
<H1 >一级标题<H1>
〈/BODY〉
〈/HTML〉
8
样式定义的语法
样式表项的组成:
Selector{property1:value1;property2:value2;property3:value3;……}
Selector定义样式作用的对象,property为CSS属性,value为属性对应的值。
9
样式定义的语法
H1 {text-align:center; font-family:黑体}
选择器
样式定义
样式属性
属性取值
10