1、什么是CSS
1.1、CSS的基本概念 从总体来说，CSS 能够完成下列工作：
a、弥补 HTML 对网页格式化功能的不足，比如段落间距、行距等。
b、字体变化和大小；
c、页面格式的动态更新；
d、排版定位等。
1.2、CSS的特点
a、将格式和结构分离
b、以前所未有的能力控制页面布局
c、制作体积更小、下载更快的页面
d、将许多页面同时更新，比以前更快更容易
e、浏览器将成为更友好的界面
2、CSS的类型与基本写法
2.1、CSS的类型
CSS层叠样式表包含3种类型：
a、自定义CSS，相应的标记中出现“class"属性
如下代码：
.bg {
background-image: url(bg.gif);
}
在HTML中使用：
<body class="bg">
b、重定义标记的CSS
td {
color: #000099;
font-size: 9pt
}
c、CSS选择符
CSS 选择符为特殊的组合标记定义CSS，使用“ID”作为属性，以保证文档具有唯一可用的值。CSS选择符是一种特殊类型的样式，常用的有4种，分别为：
a:link、a:active、a:visited、a:hover
其中：
a:link：设定正常状态下链接文字的样式。
a:active：设定鼠标单击时链接的外观。
a:visited：设定访问过的链接外观。
a:hover：设定鼠标放置在链接文字之上时文字的外观。
如下代码：
a:link {
color: #FF3366;
font-family:"宋体";
text-decoration:none;
}
a:hover {
color: #FF6600;
font-family:"宋体";
text-decoration:underline;
}
a:visited {
color: #339900;
font-family:"宋体";
text-decoration:none;
}
2.2、CSS的基本写法
CSS的基本写法有3种：
1、在 HEAD 内实现，即<HEAD></HEAD>标记内：
文件范例：13-1.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-1.htm -->
<!-- 文件说明：CSS在<head>中的实现 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS在head中的实现</TITLE>
<Style Type="text/css">
<!--
body {
font-family: "黑体";
font-size: 12pt;
line-height: 16pt;
color: #FFFFFF;
background-color: #006699;
}
-->
</Style>
</HEAD>
<BODY>
主流的网页设计软件
<p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
2、在<BODY>内实现
使用下面的语法：
<h3 style="font-size:10pt">
这样的写法虽然直观，但是无法体现出CSS的优势，因此不推荐使用。
文件范例：13-2.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-2.htm -->
<!-- 文件说明：CSS在<body>中的实现 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS在body中的实现</TITLE>
</HEAD>
<BODY>
主流的网页设计软件
<p style="font-size:9pt;line-height:12pt;background-color:#FFCC00;font-family:宋体">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3、在文件外的调用
CSS 的定义既可以是在HTML文档内部，也可以单独成立文件，如下代码是将CSS样式链接到外部到style.css文件：
<link rel="stylesheet" href="style.css" type="text/css">
文件范例：13-3.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-3.htm -->
<!-- 文件说明：调用外部的CSS样式文件-->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>调用外部的CSS样式文件</TITLE>
<link href="13-3.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
主流的网页设计软件
<p class="t">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
文件范例：13-3.css
.t {
font-family: "宋体";
font-size: 9pt;
text-decoration: underline;
letter-spacing: 3px;
line-height: 12pt;
}
显示结果：
2.3、CSS的冲突
a、执行最近的
b、CSS样式优先级高于HTML样式
posted on 2007-10-07 22:10
CoderDream 阅读(2743)
评论(0) 编辑 收藏 所属分类:
CSS