- 认识CSS
- 传统HTML设计网页版面的缺点
- CSS的特点
- 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>
div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又必须在<head>..</head>之间.
与其功能,又可以分为三种,
-
标记定义型
-
class定义型
- 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 规定,范围越小,优先级越高.
由小到大排列:
-
行内
-
class和id定义型
- 标记定义行
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>