CSS的英文全名是Cascading Style Sheets,中文即层叠式排版样式。XHTML, HTML和XML文件都可以应用CSS来美化网页的设计。
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上。CSS样式排版具有排版属性功能完整,排版文件可以独立存在、可以共用排版文件等特点。CSS排版的分类:行内排版样式、内嵌式排版样式、链接式排版样式(导入式排版样式):
行内排版样式
格式:<标记名称 style="属性1:属性1";属性2:属性2;>...</标记名称>
例如:<p style="font-size:20pt;color:red;text-align:center;font-weight:bold; background:green">排版样式</p>
<span></span>这个标记区域内限制的文字可以根据需要进行排版修改(更改颜色、文字背景、字体等等),它不具备换行功能。
<div></div>这个标记会让文字后面自动换行,同时修改的效果会占据整行。
内嵌式排版样式
该排版样式中所有的样式定义都必须在<style type="text/css">...</style>之间,而<style>...</style>又必须在<head>...</head>之间。
从功能上看可以分为三种:1. 标记定义型 2. class定义型 3. id定义型
标记定义型
<head>
<style type="text/css">
标记名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称>...</标记名称>
</body>
class定义型
<head>
<style type="text/css">
.定义名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称 class="定义名称">...</标记名称>
</body>
或
<head>
<style type="text/css">
.定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}
.定义名称1{属性3:属性值3;}
.定义名称2{属性3:属性值4;}
</style>
</head>
<body>
<标记名称 class="定义名称1">...</标记名称>
<标记名称 class="定义名称2">...</标记名称>
</body>
id定义型(与class定义型类似)
<head>
<style type="text/css">
#定义名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称 id="定义名称">...</标记名称>
</body>
优先级:行内定义型>id>class>标记定义型
外部排版样式
要达到只写一个css样式,供多个网页使用,则需要采用外部排版样式。
第一步,新建一个全部放css的文件,内容例如:
p{color:red;font-size:50px;font_weight:bold}
将文件命名为xxx.css
第二步,编写网页时,在<head>...</head>之间使用<link />(注意,这是个单标记)
<link rel="stylesheet" type="text/css" href="xxx.css" />
或
在编写网页时,在<head>...</head>之间使用import
<style type="text/css">
@import"xxx.css"
</style>