文档介绍：CSS样式表的简单使用
P75~~P96
使用CSS样式制作动态网页
CSS基础
链接文字技术
3D文字
CSS滤镜
使用CSS样式制作动态网页
随着网页技术的日趋成熟和网络的进一步普及,人们对网页的要求已经不仅仅满足于在网络上发布信息。人们开始对网页的排版、格式和设计有了越来越高的要求,网页已经慢慢地一步步地接近了一种全新的艺术表现形式。
1996年底诞生了一种称为样式表(Style Sheets)的技术,全称应该是级联样式表(Cascading Style Sheets,简称CSS)。
样式是控制文本或文本区外观的一组格式属性,样式表则包括文档中的所有格式,而外部样式表则可同时控制若干篇文档的格式。
样式表可以定义HTML的标签格式,也可定义由Class属性标识的文本区域以及符合CSS规则的文本等。但是,级联样式表(CSS)的某些属性在不同浏览器中所显示的外观是不一样的。
作为HTML的扩充,CSS具有与HTML不同的语法,它可以嵌套在HTML里面为其所引用,从而对HTML中的各个元素的样式进行更加精确、更加全面的定义。
CSS基础
在建立样式表之前,应当了解一些 HTML 的基础知识。HTML 语言由标志和属性构成,CSS也是如此。
样式表的基本语法是:
HTML 标志{ 标志属性:属性值;标志属性:属性值;标志属性:属性值;……}
放置样式表有内联和外联等几种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。
这个方法必须把样式表信息包括在< style> 和< /style> 标记之间,为了使样式表在整个页面中产生作用,应把该组标记及其内容放在< HEAD> 和< /HEAD> 之间。
例如,要设置HTML 页面中所有 P 标题字显示为蓝色,其代码如下:
< HTML>
< HEAD>
< TITLE>This is a CSS samples< /TITLE>
< STYLE TYPE="text/css">
< !—
P{ color: blue }
-->
< /STYLE>
< /HEAD>
< BODY>
... 页面内容…
< /BODY>
< /HTML>
CSS基础
在使用样式表过程中,经常会有几个标志用到同一个属性,例如,要规定 HTML 页面中凡是粗体字、斜体字、1号标题字显示为红色,按照上面介绍的方法应书写为:
B { color: red}
I { color: red}
H1 { color: red}
显然这样书写十分麻烦,引进分组的概念会使其变得简洁明了,可以写成:
B,I,H1 {color: red}
用逗号分隔各个 HTML 标志,把三行代码合并成一行。
此外,同一个 HTML 标志,可能定义多种属性,例如,规定把H1标题定义为红色黑体字,带下划线,则应写为:
H1{
color: red;
text-decoration: underline;
font-family: " 黑体"
}
请看下面的一个典型定义:
A {color: blue}
使用这条定义,所有的链接都变成蓝色。
通常把所有的定义全包括在 STYLE 元素里面(即放到 HEAD 里面)。下面是一个简单的例子:
CSS基础
<HTML>
<HEAD>
<TITLE>CSS测试网页</TITLE>
<style type="text/css">
<!-
A {color: green}
P {
background-color:gray;
color:gold;
font-size: 18px;
}
-->
</STYLE>
</HEAD>
<BODY>
<P>《射雕英雄传》</P>
<P>金庸名著,经典作品。</P>
</BODY>
</HTML>
案例分析:
CSS基础
所有的链接都变成蓝色
利用css制作滚动字幕
html语言标签
<marquee>滚动的字</marquee>
案例:
使用“标签选择器”插入marquee标签
。
“标签选择器”
marquee标签,点击“插入”按钮。