1. 认识CSS
CSS是Cascading Style Sheets的缩写,中文翻译为层叠式样式表。CSS2 规范于1998 年02 月通过W3C 的审核与推荐。HTML,XHTML,XML等标记语言都可以使用CSS来制作排版样本。
2. HTML设计网页版面的不足
使用传统HTML控制标记来设计网页,在排版方面先天上就远不及层叠式样式表,因为HTML并非完全着眼于网页排版的功能上。而对于XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标签和属性废弃不用,如<font>,<center>,color,background,bgcolor
等。也就是说对于XHTML而言,其排版和显示功能比HTML更弱。所以,使用XHTML来设计网页更需要搭配CSS排版样本。
3. CSS的特点
- HTML排版时的缺点
设置麻烦,修改麻烦,功能严重不足 - CSS样式排版的优点
排版属性功能相对完整,排版文件可以独立存在,可以共用排版文件 - CSS样式排版的分类
内联样式表,内部样式表,外部样式表 - CSS排版专用标记 :
<div>
和<span>
<div>
是块级元素,浏览器会在其前后显示折行,与CSS配合使用可对大的内容块设置样式属性,另一个常见的用途是文档布局。<span>
是内联元素,可用作文本的容器,容器大小与文本相当,不会显示折行,与CSS配合使用可用于为部分文本设置样式属性。
4. CSS的排版样式
1. 内联样式表 :
格式:
<标记名称 style="属性1:属性值1;属性2:属性值2>...</标记名称>"
实例 :
<p style="text-align:center;color:red;font-size=20px">排版样式</p>
2. 内部样式表:
内部样式表中所有的样式定义必须在<style>...</style>
之间,而<style>...</style>
又必须在<head>...</head>
之间。
内部样式表和外部样式表在功能上都可分为三种 :
- 标记定义型
- class定义型
- id定义型
(1). 标记定义型的格式
<head>
<style type="text/css">
标记名称{
属性1:属性值1;
属性2:属性值2
}
标记名称{
属性1:属性值1;
属性2:属性值2
}
</style>
</head>
<body>
<标记名称>...</标记名称>
</body>
(2). class定义型的格式
<head>
<style type="text/css">
.定义名称{
属性1:属性值1;
属性2:属性值2
}
.定义名称1,.定义名称2{
属性1:属性值1;
属性2:属性值2
}
</style>
</head>
<body>
<标记名称 class="定义名称">...</标记名称>
</body>
(3). id定义型的格式
<head>
<style type="text/css">
#定义名称{
属性1:属性值1;
属性2:属性值2
}
#定义名称1,#定义名称2{
属性1:属性值1;
属性2:属性值2
}
</style>
</head>
<body>
<标记名称 id="定义名称">...</标记名称>
</body>
3. 外部样式表:
外部样式表需要在后缀为.css的文件中定义样式,如
标记名称{
属性1:属性值1;
属性2:属性值2
}
.定义名称{
属性1:属性值1;
属性2:属性值2
}
外部样式表可使用link链入,也可使用import导进到html文件中
在<head>...</head>
之间使用<link>
,格式 :
<head>
<link rel="stylesheet" type="text/css" href="URL"/>
</head>
在<style>...</style>
之间使用import, 格式 :
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
5. 样式表层叠
规则一,CSS规定范围越小优先级越高,因此内联(或称行内)样式表、内部样式表和外部样式表排版定义的优先级由高到低为
行内 > id定义型 > class定义型 > 标记定义型
规则二,相同优先级,靠后的样式会覆盖前面的样式。
所有的样式会根据以上两条规则层叠于一个新的虚拟样式表中。