注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一粒玉米粒

玉米粒=琪琪=清清 ~.~ = ^.^

 
 
 

日志

 
 

CSS学习手册1  

2007-01-22 23:13:41|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

W3CThe World Wide Web Consortium)制定了代号为CougarHTML4.0版本以来,存在在Web页面中的动态效果首次被正式的承认了,W3C把动态超文本(Dynamic HTML)的实现分为了三个部分:脚本、支持动态效果的浏览器和CSS。前两者也许你经常用到,但CSS是什么或许你并不清楚,如果有过制作Web页面的经历,你可能听说过样式单或风格单,如果对此你亦无耳闻,不要紧,只要你想制作出具有更多新特性的Web页,本文将同样适合于你。(请使用IE4或IE5对CSS手册中的属性实例进行验证)

一、什么是CSS

CSSCascading Style Sheet的缩写,有些书上把它译为"层叠样式单""级联样式单"(下文简称"样式单"),在1997W3C颁布HTML4标准的同时也公布了有关样式单的第一个标准CSS1。样式单是对以前的HTML3.2以前的HTML版本)语法的一次重大革新,以前的HTML版本中,各种功能的实现是通过标记元素实现的,这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记,各种标记互相嵌套,就可以达到不同的效果,比如要在一段文字中把一部分文字变成红色,HTML3.2中应该是这样的:

这里显示红色字

而在样式单中,把某些标记(如上例中的"font"标记)属性化,利用样式单,上例可以变成:

这里显示红色字

这就是样式单的全部功能吗?远远不是!前面说过样式单是DHTML的一部分,建立样式单的真正意义在于把对象真正引入了HTML,使得可以使用脚本程序(如JavascriptVBScript)调用对象属性,并且可以改变对象属性,达到动态的目的,这在以前的HTML中是无法实现的,如果你使用过如VB等面向对象的编程工具,你会更快的发现,用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTML中各种繁琐的标记,使得各个标记的属性更具有一般性和通用性,并且样式单扩展了原先的标记功能,能够实现更多的效果,样式单甚至超越了Web页面的本身显示功能,而把样式扩展到多种媒体上,显示了难以抗拒的魅力。

样式单自从CSS1的版本之后,又在19985月发布了CSS2版本,样式单得到了更多的充实。Internet Explorer4Netscape Navigator4都宣传支持样式单,但从各方面来看IE4的效果都要超过NE4,这是因为IE4NE4Javascript文档模型(DOM)不同而造成的,从表面看,二者的模型区别不大,但实质上却是大相径庭,IE4的模型能够更加容易的把动态效果引入Web页面,虽然现在IE4的模型只有微软自己支持,但它却已被清楚的写入了W3CDHTML标准;而NE4的样式单并不能通过脚本调用对象的属性,说的不好听一点,它的样式单只是徒有其表罢了。(Netscape公司自己开发了一种样式单称作JSSS,它利用Javascript来定义样式,但是并没有得到W3C的承认。)

二、进一步了解样式单

Cascading Style Sheet中的Cascading"层叠"的意思,也就是说在同一个Web文档中可以有多个样式单存在,这些样式单根据所在的位置,拥有不同的优先级,优先级越高,就会被最后在显示时采用。从样式单插入的形式来看可以分为三种:

  • 内联式样式单:它利于现有的HTML标记,把特殊的样式加入到那些由标记控制的信息中,比如刚才的例子。

  • 嵌入式样式单:它和Javascript一样可以嵌入到HTML文件的头部中去(标记之间),使用 容器装载,例如:" ",这样会对页面中所有标记都起作用。

  • 外部式样式单:是一种保存在外部的样式单文件,外部文件以.CSS为扩展名,例如""

在应用时可以根据需要随意运用以上三种方式,但在实际中内联式样式单和嵌入式样式单使用得更多一些。

三、样式单的语法特征

样式单有自己独特的书写方法,掌握了它的语法特征,再了解它的各种属性,那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档:



 

Text goes here



我们可以用嵌入式样式单规定样式。




利用



其中.someclass代表类,#someID代表ID。类和ID也可以和元素标记合用,比如:

p.bigFont {……}

则表示必须在某个为bigFont类的P标记()才执行样式单,同样的也适合于ID
为了简化声明某些重复属性的标记,可以用","把不同的选择器隔开,表示它们都表示成相同的属性,如:

H1,H2 {color:red}
Div, p.mytext {
……}

有时我们还希望能够在特定的范围内使样式单生效:

p em {color:red}

元素标记间又空格隔开,表示在间的用红色表示。另外还可以利用"~"表示一个选择器后面紧跟另一个选择器,并且两边以"/"围住:

/ Selector1 ~ Selector2/ {……}

表示如果Selector2紧跟着Selector1则使用该样式单。

2、属性值的单位

在样式单中,属性的单位多为长度单位,包括px(象素)、pt(磅)、em(一种排版中的单位,1em12pt)、mm(毫米)、cm(厘米)、pc1pc12pt)、in(英寸),这些单位可以使用整数(如px)表示,也可以使用实数(如em)表示,并且元素中对数值还有继承(inherit)的关系比如:

body {font-size:12pt;text-indent:3em;}
H1 {font-size:15pt}

那么在显示中H1text-indent属性就不是36pt而是45pt

有的属性的单位甚至可以是负值,如margin,可以达到一些特殊的效果,如元素之间的重叠。另外还有一些其他的单位如角度,它的单位有deg(度)、grad(梯度)和rad(弧度);频率的单位,HzkHz,这些都是我们非常熟悉的。

3、注释及空格

样式单也有注释语句:可以用"/*……*/"作为注释标记,在浏览器中有一个对样式单的分析器,它负责对样式单的检查,分析器将忽略注释标记之间的内容。空格在样式单中是有效的,如果字符之间有超过一个空格存在,它将省略其余空格,而只保留一个,特别是在声明某些字体的时候,空格一定不能省略。

2 要注意的方面

首先,样式单是区分大小写的,所以要注意拼写;其次对于CSS2未声明的属性和方法,样式单的分析器会忽略它的存在,如:

H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}

其中"&"是样式单中没有的标号,第二行整个被分析器略过,第三行中的font-variant不是一个合法属性,也被略过("color:blue"有效)。

了解了以上规则,你就已经对样式单入门了,下面将详细介绍样式单的各种属性及属性值。

CSS属性:

1、媒体(Media)类型

样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕)。

声明一个媒体属性可以用@import@media引入:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

也可以在文档标记中引入媒体:

可以看出,@import@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用""分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。下面列出各种媒体类型:

SCREEN:指计算机屏幕。
PRINT:指用于打印机的不透明介质。
PROJECTION:指用于显示的项目。
BRAILLE:盲文系统,指有触觉效果的印刷品。
AURAL:指语音电子合成器。
TV:指电视类型的媒体。
HANDHELD:指手持式显示设备(小屏幕,单色)
ALL:适合于所有媒体。

2BOX模型(BOX Model)属性

什么是BOXCSSHTML中以……的部分称为BOX(容器),BOX有三类属性:paddingmarginborder

Margin属性:

Margin属性分为margin-topmargin-rightmargin-bottommargin-leftmargin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或automargin甚至可以设为负值,造成BOXBOX之间的重叠显示,关于margin的属性详见下表:

属性名称: 'margin-top''margin-right''margin-bottom''margin-left'
属性值:
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度

例如:

H1 { margin-top: 2em }
H2 { margin-right: 12.3% }

Margin还有一个快捷的书写方法,就是直接用margin属性,例如:

BODY { margin: 1em 2em 3em 2em}

等同于:

BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}

margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左",当然margin后面可以不足四个值,例如:

BODY { margin: 2em } /* 所有的margin都设为2em */
BODY { margin: 1em 2em } /*
上下margin1em,右左margin2em */
BODY { margin: 1em 2em 3em } /*
margin1em,右左margin2em,下margin3em*/

Padding属性:

Padding属性用来描述BOX的边框和内容之间插入多少空间,和margin属性类似,它也分为上右下左和一个快捷方式padding,关于padding的属性详见下表:

属性名称: 'padding-top''padding-right''padding-bottom''padding-left' 'padding'
属性值:
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度

例如:

BLOCKQUOTE { padding-top: 0.3em }

padding属性和margin类似此处略去。

Border属性:

平时我们在查看HTML文档时,看到一段文字,并不会把它当作一个BOX,实际上BOX是有边框的,只是平时不显示出来罢了,而border属性就是用来描述BOX边框的。Border属性分为border-widthborder-colorborder-style,而这些属性下面又有分支。

border-width属性:

border-width属性又分为:border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-width属性,border-width用长度表示为"thin/medium/thick"或长度单位表示,下面是border-width属性的详细列表:

属性名称: 'border-top-width''border-right-width''border-bottom-width''border-left-width''border-width'
属性值:
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-width为快捷方式,顺序为上右下左,值之间用空格隔开。

border-color属性:

border-color属性用来显示BOX边框颜色,分为border-top-colorborder-right-colorborder-bottom-colorborder-right-colorborder-color属性,属性值为颜色,可以用十六进制表示,也可用rgb()表示,属性见下:
属性名称: 'border-top-color''border-right-color''border-bottom-color''border-left-color'
'border-color'

属性值:
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

border-style属性:

border-style属性用来设置BOX对象边框的样式,它的属性值为CSS规定的关键字,平常看不到border是因为,初始值是none的缘故。属性见下:

属性名称: 'border-top-style''border-right-style''border-bottom-style''border-left-style''border-style'
属性值:
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

属性值的名称和代表意义如下:

none:无边框。
dotted:边框为点线。
dashed:边框为长短线。
solid:边框为实线。
double:边框为双线。
grooveridgeinsetoutset:显示不同效果的3D边框(根据color属性)。

border属性:

border属性为Border的快捷方式,属性值间用空格隔开,顺序是"边框宽度 边框样式 边框颜色",例如:

hello!

还可以用border-topborder-rightborder-bottomborder-left分别作为上右下左的快捷方式,属性值顺序同border属性。

3、布局(Layout)属性:

在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3CCSS提出了类似于Layer标记的功能。

position属性:

position属性用来决定元素的位置类型,详见属性:

属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表:
absolute:屏幕上的绝对位置。
relative:屏幕上的相对位置。
static:固有位置。


direction属性:

direction属性决定BOX的排列方向,详见属性:

属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止


floatclear属性:

HTML中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOXfloat属性,BOX将飘浮在其他元素的左或右方:

属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

例如:





Some sample text that has no other...

相反的,使用clear属性将禁止元素在BOX的左方或右方飘浮:

属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止


绝对位置属性:

绝对位置属性有四个属性:toprightbottomleft,属性值为长度单位或百分数:

属性名称: 'top''right''bottom''left'
属性值: ||auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

利用以上属性,用户就可以精确定义元素的位置,如:


I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.

z-index属性:

CSS中允许元素的重叠显示,这样就有一个显示顺序的问题,z-index属性描述了元素的前后位置,如果把电脑屏幕看作X-Y平面的话,那么Z轴就是垂直于屏幕的,z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数。

属性名称: 'z-index'
属性值: auto|
初始值: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注: 被禁止


width属性:

规定BOXwidth属性,可以使BOX的宽度不依靠它所包含的内容的多少:

属性名称: 'width'
属性值: | | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的width而定

CSS中还提供了min-widthmax-width属性,使得BOX的宽度在最小宽度和最大宽度之间。

属性名称: 'min-width'
属性值: |
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

属性名称: 'max-width'
属性值: |
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

height属性:

相同的BOX还有height属性来控制本身的高度:

属性名称: 'height'
属性值: | | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的height而定

CSS中还提供了min-heightmax-height属性,使得BOX的高度在最小高度和最大高度之间。

属性名称: 'min-height'
属性值: |
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定

属性名称: 'max-height'
属性值: |
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定


overflow属性:

在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到overflow属性:

属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position属性
是否继承: no
百分比备注: 被禁止

属性值含义如下:

visible:扩大面积以显示所有内容。
hidden:隐藏超出范围的内容。
scroll:在元素的右边显示一个滚动条。
auto:当内容超出元素面积时,显示滚动条。

clip属性:

CSS还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:

属性名称: 'clip'
属性值: | auto
初始值: auto
适合元素: 元素的position属性被设为absolute
是否继承: no
百分比备注: 被禁止

值为rect(top right bottom left)

line-heightvertical-align属性:

line-height属性可以规定元素内部的行间距,使用长度单位或百分数:

属性名称: 'line-height'
属性值: normal | | |
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定

例如下面的例子,虽然表达方式不同,但结果一样:

DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }

vertical-align属性决定元素在垂直位置的显示:

属性名称: 'vertical-align'
属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | |
初始值: baseline
适合对象: inline elements
适合继承: no
百分比备注: 根据元素的line-height属性而定

属性值含义如下:
baseline:与元素的基线对齐。
middle:与元素中部对齐。
sub:字下沉。
super:字上升。
text-top:文本顶部对齐。
text-bottom:文本底部对齐。
Top:和本行位置最高元素对齐。
Bottom:和本行位置最低元素对齐。

Visibility属性:

该属性用于控制元素的显示或隐藏:

属性名称: 'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit,则继承父元素属性
百分比备注: 被禁止

  评论这张
 
阅读(305)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017