1.认识 CSS
2.传统 HTML 设计网页版面的缺点
3.CSS 的特点
4.CSS 的排版样式
13.1 认识CSS
CSS的英文全名是 Cascading Style Sheets,中文可翻译为串接式排版样式,并且 CSS2规范
也于 1998 年 02 月通过 W3C 的审核与推荐,所以 CSS 并不是专为 XHTML 所设计的,CSS 还
可以被其他标记语言拿来制作排版样本,如 HTML,XML 文件都可以应用 CSS,来美化网页的
设计,大家如果学会 CSS,在 HTML,XHTML,XML 文件中都可以使用.
13.2 传统 HTML 设计网页版面的缺点
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML
并非完全着眼在网页排版的功能上,而这对 XHTML 而言更是如此,因为 XHTML 有意将原先
HTML 中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等
等,所以对 XHTML 文件而言,其排版与显示的功能比 HTML 文件更弱,所以使用 XHTML 来
设计网页更需要搭配 CSS 排版样本.
13.3 CSS 的特点
HTML 排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS 样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS 样式排版的分类:
内行排版样式,,内嵌式排版样式,,链接式排版
13.4 CSS 的排版样式
行内排版样式:
格式:<标记名称 style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>
例 :<p style= ”font-size:20pt;color:red;text-align:center”>排版样式</p>
排版专用标记:<div>与<span>
这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果
没有一样,则<span> 与</span>该数据显示前后都不会跳行.
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
1. 标记定义型
2. class 定义型
3. id 定义型
标记定义型格式:
<head>
<style type=”text/css”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class 定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
id 定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值 2;}
#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
“行内”和”内嵌式”排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
1. 行内
2. class 和 id 定义型
3. 标记定义行
id 的优先级高于 class 级.
外部排版样式定义:
独立的样式排版:
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用 import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
CSS 行内排版内嵌式排版和外部排版样式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> p{ color:red; font-size: 40px; } .abc{color: green;} #def{color: orange;} </style> </head> <body> <p style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我是行内排版样式：格式:<标记名称 style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称></p> <div style="background: red">我DIV是一个区块,我要站一行</div><br/> <span style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我SPAN是内联，我不占一行</span> <!--排版专用标记:<div>与<span> 这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果 没有一样,则<span> 与</span>该数据显示前后都不会跳行. 内嵌式排版样本: 内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又 必须在<head>..</head>之间. 与其功能,又可以分为三种, 1. 标记定义型 2. class 定义型 3. id 定义型 --> <p id="def">我是id 定义型,我是使用一次的，我对应的是 #号定义的内容</p> <p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容</p> <p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容2</p> <p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容3</p> <Pre>“行内”和”内嵌式”排版定义的优先级: CSS 规定,范围越小,优先级越高. 由小到大排列: 1. 行内 2. class 和 id 定义型 3. 标记定义行 id 的优先级高于 class 级.</Pre> <!-- 外部排版样式定义: 独立的样式排版: 标记名称{属性 1:属性值 1;属性 2:属性值 2;} .定义名称{属性 1:属性值 1;属性 2:属性值 2;} 在<head>…</head>之间使用<link> 格式: <head> <link rel=”stylesheet” type=”text/css” href=URL /> </head> 在<head>…</head>之间使用 import 格式： <head> <style type="text/css"> @import "style.css" </style> </head> --> </body> </html>