CSS.docx
- 文档编号:27803309
- 上传时间:2023-07-05
- 格式:DOCX
- 页数:11
- 大小:21.51KB
CSS.docx
《CSS.docx》由会员分享,可在线阅读,更多相关《CSS.docx(11页珍藏版)》请在冰豆网上搜索。
CSS
CSS(CascadingStyleSheets)简介
当初一帮技术人员想出HTML,主要侧重于定义内容,比如
表示一个段落,
表示标题,而并没有过多设计HTML的排版和界面效果。
随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。
为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。
直到CSS出现。
CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。
可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。
CSS的英文是CascadingStyleSheets,中文可以翻译成串联式样式表。
由于允许同时控制多重页面的样式和布局,CSS可以称得上WEB设计领域的一个突破。
作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中。
如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
样式表允许以多种方式规定样式信息。
样式可以规定在单个的HTML元素中,在HTML页的头元素中,或在一个外部的CSS文件中。
甚至可以在同一个HTML文档内部引用多个外部样式表。
CSS按其位置可以分成三种:
内嵌样式(InlineStyle)
内部样式表(InternalStyleSheet)
外部样式表(ExternalStyleSheet)
--------------------------------------------------------------------------------
内嵌样式(InlineStyle)
InlineStyle是写在Tag里面的。
内嵌样式只对所在的Tag有效。
20pt;color: red">这个Style定义里面的文字是20pt字体,字体颜色是红色。
orange;font-family: impact">Stylesheets: TheTooloftheWebDesignGods yellow;font-family: courier">Amazeyourfriends! Squashyourenemies! 内部样式表(InternalStyleSheet) 内部样式表是写在HTML的
内部样式表只对所在的网页有效。
H1.mylayout{border-width:
1;border:
solid;text-align:
center;color:
red}
这个标题没有使用Style。
内部样式表(InternalSytleSheet)要用到Style这个Tag,写法如下:
......
TYPE="text/css"属性和注释标签。
TYPE="text/css"设定采用MIME类型,这样以来,不支持CSS的浏览器可以忽略样式表。
注释标签(
--and-->)更为重要。
有些老的浏览器(如MAC机用的IE2.0)即使在设定了TYPE="text/css"属性时也不能忽略样式表继续执行下面的命令,而且还会显示样式表的代码。
而使用注释标签则可以避免发生这种情况。
外部样式表(ExternalStyleSheet)
如果很多网页需要用到同样的样式(Styles),用什么方法呢?
将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
你可以将多个HTML文件都链接到一个中心样式表文件。
这个外部的样式表文件将设定你所有网页的规则。
如果你改变样式表文件中的额某一细节,所有页面都会随之改变。
如果你维护的站点很大,则这项功能绝对会有其用武之地。
比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css。
文件内容如下:
H1.mylayout{border-width:
1;border:
solid;text-align:
center;color:
red}
然后你建立一个网页,代码如下:
这个标题没有使用Style。
使用外部(Extenal)样式表,相对于内嵌(Inline)和内部式(Internal)的,有以下优点:
样式代码可以复用。
一个外部CSS文件,可以被很多网页共用。
便于修改。
如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。
提高网页显示的速度。
如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。
串联(Cascading)
CSS第一个字母,是Cascading,意为串联。
它是指不同来源的样式(Styles)可以合在一起,形成一种样式。
Cascading的顺序是:
浏览器缺省(browserdefault)(优先级最低)
外部样式表(ExtenalStyleSheet)
内部样式表(InternalStyleSheet)
内嵌样式表(InlineStyle)(优先级最高)
样式(Styles)的优先级依次是内嵌(inline),内部(internal),外部(external),浏览器缺省(browser
default)。
假设内嵌(Inline)样式中有font-size:
30pt,
而内部(Internal)样式中有font-size:
12pt,那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。
举例:
现在我们就开始制作css样式表。
打开你最喜欢的HTML编辑器生成基本的网页:
Stylesheets:
TheTooloftheWebDesignGods
Amazeyourfriends!
Squashyourenemies!
很好。
现在,让我们给它加一些样式表。
只需在最初的和
标签之间插入以下代码:--H1{color:
green;font-size:
37px;font-family:
impact}
P{text-indent:
1cm;background:
yellow;font-family:
courier}-->
输入样式表
输入外部样式表的方法同链接的方法类似。
不同之处在于链接法不能同其它方法结合使用,但输入法则可以。
例:
--@importurl(company.css);H1{color:
orange;font-family:
impact}-->
Stylesheets:
TheTooloftheWebDesignGods
Amazeyourfriends!
Squashyourenemies!
而其中输入的company.css文件内容如下:
H1{color:
green;font-family:
times}P{background:
yellow;font-family:
courier}
在本例中,浏览器首先输入company.css的规则(@import必须打头),然后加入移植的规则从而为这个网页产生规则集合。
请注意,对于H1在外部样式表文件和植入的样式表中都设定了规则。
在两者冲突的情况下,浏览器应执行哪一项规则呢?
植入的规则此时将占上风。
所以文字显示效果如下:
输入样式表的灵活性可以使你输入无数多个样式表,并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。
css分类及其它技巧
我们已经学习了所有的css样式表基本语法。
下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.分类我先前已经讲过所有的HTML标签都可以用作选择,并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢?
比如,你想让主体文字的1段用绿色显示,第2段用紫色显示,而第3段用灰色显示,你能做到吗?
这种情况下分类将发挥作用。
你可以将段落P分成3种不同的类别,每一类应用不同的样式表说明。
这些规则(不论是植入的还是外部样式表文件)将以以下方式显示:
P.first{color:
green}P.second{color:
purple}P.third{color:
gray}
你的HTML代码如下:
你可以给类别起任何一种名字,但不要忘了在样式表规则中类别名称前点
你还可以生成不加任何HTML标签的分类:
.first{color:
green}
这种方式更加灵活,因为现在我们可以将CLASS=first用于任何HTML标签,并应用到网页
中,而设定的文字将以绿色显示。将利用样式表制作的产品放到不同的浏览器和平台上进行测试是非常有必要的。
这是避免令人不愉快的结果的唯一办法
文字样式
字模系列就是CSS中称呼一种字体的名称属性。
其基本语法如下:
H2{font-family:
helvetica,impact,sans-serif}
这里是Web浏览器阐释样式表的规则:
首先在列表中寻找字体的名称(helvetica),如果在该计算机中安装了这种字体,就使用它。
如果没有安装,则移向下一种字体(impact),如果这种字体也没有安装,则移向第3种字体(sans-serif)。
sans-serif字体参数是浏览器可以依据的最后一种参数,它告诉浏览器使用任何一种缺省sans-serif字体(或许就是Arial)。
文字变形(text-transform)
这项属性可以使你轻而易举地控制字母大写。
基本代码:
B{text-transform:
uppercase}
以下为所有可用的参数:
uppercase使所有字母大写显示,例:
Thissentenceservesasanexample.
lowercase使所有字母小写显示,例:
Thissentenceservesasanexample.
capitalize使每个单词的第1个字母大写显示,例:
Thissentenceservesasanexample.
none使所有继承的文字变形参数被忽略,文字将以正常形式显示。
例:
Thissentenceservesasanexample.
文字修饰(text-decoration)
文字修饰(text-decoration)。
其基本语法如下:
B{text-decoration:
underline}
大部分的选项使得文字变得难以阅读:
underline给文字下划线,例:
thesewords.
overline给文字上划线,例:
thesewords.
line-through给文字划出删除线,例:
thesewords.
blink是你在恶梦中常常看到的--文字在闪烁,例:
thesewords.
可能不支持
none使得上述效果都不会发生。
背景色
在传统的网页设计中,为了在某一要素后面加上背景色,你必须先在要素周围生成表格单元,然后在表格单元中添加颜色。
利用CSS添加背景色则相当容易。
利用CSS在网页要素后面加入固定的背景色及图象。
P.yellow{background-color:
#FFFF66}
背景图象
你可以很轻松地将GIF或JPEG图象加到一个要素后面:
B{background-image:
url(background.gif)}
该规则将背景图象加到整个段落之后。
你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。
当你设定一个背景图象时,最好能指定一种背景色。
这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。
而且它将透过背景图象上的透明色区显示出来。
控制背景图象
你不仅可以将图象放在要素后面,你还可以精确地控制背景图象的各项设置。
你可以决定是否及如何将其平铺,背景图象应该滚动还是保持固定,及将其放在什么位置。
朋友,这是真的!
背景重复(background-repeat)
背景图象通常是平铺在背景上的,对吗?
错。
利用这项CSS属性,你可以控制是否将其平铺。
P{background-repeat:
no-repeat;background-image:
url(/webmonkey/98/15/stuff3a/background.gif)}
上述规则应用于整个段落。
我们以前用过的GIF图象出现在文字后面,但由于我们应用了不重复图象(no-repeat)规则,所以该图象不会重复平铺在整个段落后面,它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺,你可以使用repeat-x将其水平平铺,用repaet-y将其垂直平铺。
而repeat参数值则将图象从水平和垂直两个方向平铺。
固定背景(background-attachment)
在HTML中,背景图象通常会随页面的滚动而一起滚动。
但利用CSS的固定背景(background)属性,你可以建立不滚动的背景图象,页面滚动时,背景图象可以保持固定。
BODY{background-attachment:
fixed;background-image:
url(/webmonkey/98/15/stuff3a/background.gif)}
这里是一个例子,你可以看到页面滚动时,背景仍保持固定。
(注意:
Communicator不支持这项属性,IE可以。
)
该属性只用于页面背景,即
标签内设定的背景图象。其参数有两种选择:
scroll指背景图象随文字内容一起滚动,即通常所见的方式。
fixed指文字滚动时,背景图象保持固定。
背景定位(background-position)
你可以设定将背景插在什么位置显示。
P{background-position:
centerbottom;background-image:
url(background.gif)}
当上述CSS规则应用于本段文字时,背景图象将在本段的中下部开始显示并向右平铺。
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。
css绝对定位
定位(左边和顶部)
css定位属性将是网虫们打开幸福之门的钥匙:
H4{position:
absolute;left:
100px;top:
43px}
这项CSS规则让浏览器将
的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。
注意这里唯一设置了的是左边和顶部,也就是说,文字将从左到右,从上到下载入浏览器窗口。
左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。
设定这些距离时,你可以使用所学过的各种长度单位或比例值。
使用比例值时,比例值指的是相对于母体要素的尺寸。
你可以定位什么呢?
任何东西!
段落、单词、GIF和JPEG图象、QUICKTIME电影等等
css叠放文字和图象
下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。
它不是通过设定边距负值或采用更小的行高来实现,而是通过.css:
.....
z-index
当你定位多个要素并将其重叠时,你可以使用z-index来设定哪一个要素应出现在最上层。
H2{position:
relative;left:
10px;top:
0px;z-index:
10}H1{position:
relative;left:
33px;top:
-35px;z-index:
1}
由于
文字的z-index参数值更高,所以它显示在文字的上面。
(IE4在MAC机上执行这一项时会出问题,它会将
放在最上面。
该参数值使用纯整数。
z-index用于绝对定位或相对定位了的要素。
你也可以给图象设定z-index。
(对于Communicator,最好将标签包在或 ) 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。