1、什么是CSS
1.1、CSS的基本概念
1.2、CSS的特点
2、CSS的类型与基本写法
2.1、CSS的类型
2.2、CSS的基本写法
2.3、CSS的冲突
3、CSS的属性和值
3.1、字体属性
3.1.1、字体族科
3.1.2、字体大小
3.1.3、字体风格
3.1.4、字体加粗
3.2、文本属性
3.2.1、字母间隔
3.2.2、文字修饰
3.2.3、文字排列
3.2.4、文本缩进
3.2.5、行间距
3.3、颜色和背景属性
3.3.1、颜色
3.3.2、背景颜色
3.3.3、背景图像
3.3.4、背景图像重复
3.3.5、背景图像位置
3.4、边框属性
3.5、鼠标光标属性
3.6、定位属性
3.7、区块属性
3.8、列表属性
4、CSS滤镜
4.1、Alpha属性－－设置透明层次
4.2、Blur 滤镜－－模糊效果
4.3、FlipH、FlipV 滤镜－－水平垂直翻转
4.4、Gray滤镜－－灰度
4.5、Invert滤镜－－反转
4.6、Xray滤镜－－X射线
4.7、Wave滤镜－－波纹
posted @
2007-10-07 22:21 CoderDream 阅读(133) |
评论 (0) |
编辑 收藏
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 @
2007-10-07 22:10 CoderDream 阅读(195) |
评论 (0) |
编辑 收藏