认识CSS
CSS的英文全名是 Cascading Style Sheets,中文可翻译为串接式排版样式,并且 CSS2规范也于 1998 年 02 月通过 W3C 的审核与推荐,所以 CSS 并不是专为 XHTML 所设计的,CSS 还可以被其他标记语言拿来制作排版样本,如 HTML,XML 文件都可以应用 CSS,来美化网页的设计,大家如果学会 CSS,在HTML,XHTML,XML 文件中都可以使用.
传统 HTML 设计网页版面的缺点
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对 XHTML 而言更是如此,因为 XHTML 有意将原先HTML中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等等,所以对 XHTML 文件而言,其排版与显示的功能比 HTML 文件更弱,所以使用 XHTML 来设计网页更需要搭配 CSS 排版样本.
CSS的特点
HTML 排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS 样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS 样式排版的分类:
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式表（在 HTML 元素内部）
外部样式表:
外部样式表相对于内部引用和内联引用来说是高效的是节省宽带的.
外部样式表是W3C推荐使用的.
外部样式表是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).
<head>
<link rel="stylesheet" type="text/css" href="http://www.xxxxx.com/style.css" />
</head>
内部样式表
使用style标签直接把CSS文件中的内容加载到HTML文档内部.位于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样式直接作用在HTML标签中.
内联样式表(直接在HTML标签中使用)虽然是一种快捷的方式,但是不利于以后的统一修改和表现的一致性,所以不提倡使用
<p style="font-size: 10px; color: #FFFFFF;">
使用CSS内联引用表现段落.
</p>
CSS 规定,范围越小,优先级越高.由小到大排列:
内联样式表
内部样式表
外部样式表
