Chinaunix首页 | 论坛 | 博客
  • 博客访问: 580765
  • 博文数量: 107
  • 博客积分: 5065
  • 博客等级: 大校
  • 技术积分: 1362
  • 用 户 组: 普通用户
  • 注册时间: 2008-12-29 16:01
文章存档

2009年(84)

2008年(23)

我的朋友

分类:

2009-01-08 12:19:39

《CSS从入门到精通》CSS属性:第一课

源地址:

  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




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



  

这里显示红色字




可以看到,在这个文档里,多了"Style"标记,之间用
     
   例如:
     
    通常是将整个的 结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

    三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以标签引入。
    假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
   
    即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的 部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

    四、使用@import引入: 跟LINK用法很像,但必 放在 中。
      
      例如:
        
       要注意的是,行末的分号是绝对不可少的!切记切记!

  很明显的,不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。不过,基於网路的礼仪,这种事别做的好,至少也应该知会 对方一声,要先取得人家的同意才行!
  而四种应用方法各有其优缺点,您可以综合地使用,并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话,就要考量套用优先权的问题了!一般来讲,优先权的顺序有以下的几点原则:
网页设计者的样式设定 > 使用者的样式设定 > 浏览器的样式设定
STYLE属性的样式设定 > STYLE标签样式设定 > 链结进来的样式设定
後面声明的样式设定 > 前面的样式设定
所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。

  以上就是CSS最基本的声明与应用的方法介绍,有了这些基本的认识与方法,您已经可以开始建立您的样式表!除了上面提到的基本的声明与应用的方法之外,还有其它的声明与应用的方法,将为您在下一章中再作介绍。

《CSS从入门到精通》CSS基础知识:第三课

第三章 CSS的应用补充

挑选者特性的应用
  在讲挑选者的特性之前,要提一下的是CSS继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式,而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。
  接下来就要讲挑选者特性的应用!其实这部份应该算是声明的一种方式,但是在您看过第二章的基本的声明与应用後,到这边再讲挑选者您会比较有概念点。在CSS应用或设计的时候,有几种依据元素的关系或性质来设定显示特定性质的方法,就是挑选者特性的应用,能让您在控制与应用上更加灵活。

    一、前後文挑选者:依声明标签前後文关系显示特定性质的方法。
    前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时,会考虑元素标签的前後关系,而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时,该项声明便会发生作用了!

    元素A(标签A) 元素B(标签B) 元素C(标签C) ... {样式规则}
    要注意的是,前後文挑选者的声明跟集体声明很像,但是集体声明的元素标签间要用逗号隔开,而用前後文挑选者声明时元素标签间要用空格隔开;而这两种声明方式您可以混合使用。
    元素A 元素B, 元素C 元素D 元素E, ... {样式规则}
    这样您就可以用集体声明的方式,声明数组前後文挑选者的样式规则。

    二、类别挑选者:让单一或数个标签使用同组样式规则的方法。
    类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质,如下面范例所写即可。
   
      
        
     
      
        ...
      

...


      ...
      

...


      ...
     

    要注意在声明时前面的小点,CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时,也可以应用类别特性来设定。
   
      
        
     
        
         ...
        

...


         ...
       

...


        ...
      
    要注意同样是在声明时的小点,CLASS名称可任取。灵活运用类别特性,可以让您的样式设定更具机动性唷!

    三、ID挑选者:与类别挑选者类似,不同的是在『唯一性』。
    ID特性的使用与类别特性十分雷同,但是,文件里的各个ID都是唯一的。换句话说,类别特性可以重复套用在单一或数个元素标签之上,但是ID属性在一份文件里只能出现一次。如下面范例所写即可。
   
      
        
      
        
        ...
       

...


        ...
      
    可以看到,声明的方式是利用井字号『#』。而ID的这种『唯一性』正是让JavaScript或 VBScript能够对元素进行控制的关键。
  透过以上的介绍的挑选者特性的声明与使用,可以让您的样式设定更具机动与变化。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法,再应用本章所讲的挑选者特性,一步步地去熟悉样式表的使用。


连结拟似特性的应用
  还记得在HTML的基本语法,在BODY标签中可以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗?现在亦可用CSS去控制这些性质,称为『拟似类别』(pseudo class)。您可以将其当作一般类别,声明其样式规则,而实际上,这些拟似类别并不用像上面讲的类别挑选者,在HTML原始码中再行设定指向的类别(CLASS)。下面介绍拟似类别的声明与应用。
    一般的声明方式:拟似类别是以冒号来声明。
    只要在架构中加入下面的声明後,则页面中的连结文字就会依您设定的样式显式了!
      A:link {样式规则}      A:link用以设定未参观连结的样式规则。
      A:active {样式规则}    A:active用以设定作用中连结的样式规则。
      A:visited {样式规则}   A:visited用以设定已参观连结的样式规则。
      A:hover {样式规则}     A:hover用以设定滑鼠移到连结之上时的样式规则。
    其中hover并不被NC4所支援,其它三个特性两大浏览器都有支持。
  如果您用的是IE4以上的浏览器,从本站链接您就可以知道 hover作用的妙处,以简单的样式设定就可以达成以往要写好长一串设定的相同效果 。这个连结拟似类别也可以与上面说过的类别挑选者特性合并使用。

DIV和SPAN的区别
   虽然样式表可以套用在任何标签之上,但是 DIV和SPAN元素的使用更是大大地扩展了HTML的应用层面。DIV和SPAN这 两个元素在应用上十分类似,使用时都必加上结尾标签,也就是< DIV>...
... 。两个可以应用的属性与事件处理也很类似,都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上,可以说是使用上十分广泛的元素标签。
  而DIV和SPAN的不同之处在于:DIV元素定义为区块(block),在
...
之间是一个很完整的段落区块。 而SPAN元素则是定义为同轴(in-line),...< /SPAN>应用于于小范围内的设定。两者可以彼此混合,夹杂使用,因为彼此是相互独立的。也因此,您可以利用这两个元素,配合其它性质,灵活地调整您的网页 显示的内容。

 

《CSS从入门到精通》CSS基础知识:第四课

第四章 颜色背景的CSS

本章CSS的主要作用

[tr][/tr][td][/td]  在前面的章节介绍完了声明与应用的方法及一些特性之後,从这章开始,便要正式进入CSS的指令介绍了!本章有两个介绍的主题,第一个部份介绍的是颜色与背景性质的CSS,其主要的作用在于设定元素的前景颜色、背景颜色与背景图形等样式设定的性质;而第二部份为您介绍的是用于控制摆放元素位置的CSS的指令。


颜色背景的CSS指令
color 设定前景颜色
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:

设定颜色,请参考第一章颜色使用的相关说明
预设值:视浏览器而定
继承性:有
一般范例:SPAN { color : BLUE }
同轴范例:



background-color 设定背景颜色
支 持:IE4、NC4
适 用:所有元素
可能值:

设定颜色,请参考第一章颜色使用的相关说明

transparent

将父元素(颜色或图案)的背景透明化
预设值:transparent
继承性:无
一般范例:BODY { background-color : BLUE }
同轴范例:



background-image 设定背景图形
支 持:IE4、NC4
适 用:所有元素
可能值:
设定图档URL,请参考第一章URL表示的相关说明
none 不使用背景图案
预设值:transparent
继承性:无
一般范例:BODY { background-image : URL("path/file_name") }
同轴范例:



background-repeat 设定背景重复
支 持:IE4、NC4
适 用:所有元素
可能值:
repeat 重复背景图形填满页面
repeat-x 水平方向重复背景图形
repeat-y 垂直方向重复背景图形
no-repeat 不重复显示背景图形
预设值:repeat
继承性:无
一般范例:BODY { background-repeat : repeat-x }
同轴范例:



background-attachment 设定背景附著
支 持:IE4、NC4
适 用:所有元素
可能值:
scroll 背景图形随著卷轴卷动
fixed 背景图形随著卷轴卷动(浮水印)
预设值:scrool
继承性:无
一般范例:BODY { background-attachment : fixed }
同轴范例:



background-position 设定背景位置
支 持:IE4、NC4
适 用:区块元素
可能值:
X% Y% 图形上X% Y%的点对准元素的X% Y%位置
X Y 将图形左上角置于元素左上角水平 X垂直 Y之处
center 背景图形置于中央
left 背景图形对 左边
right 背景图形对 右边
top 背景图形对 顶部
bottom 背景图形对 底部
预设值:0% 0%
继承性:无
一般范例:BODY { background- position : 100% 50% }
同轴范例:



background 综合设定背景性质
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
background-color 设定背景颜色
background-image 设定背景图形
background-repeat 设定背景重复
background-attachment 设定背景附著
background-position 设定背景位置
预设值:无
继承性:无
一般范例:BODY { BLUE url(image/gif) repeat-x fixed center }
同轴范例:


位置摆放的CSS指令
float 设定浮动性质(多用于文绕图的情形) 支 持:IE4、NC4
适 用:区块元素或图形
可能值:
left 元素靠左,文字围绕其右
right 元素靠右,文字围绕其左
none 以预设的方法显示
预设值:none
继承性:无
一般范例:DIV { float : right }
同轴范例:



clear 设定清除性质(设定是否允许浮动元素之存在) 支 持:IE4
适 用:区块元素或图形
可能值:
both 若两边有浮动元素,则该元素移至浮动元素下方
left 若左边有浮动元素,则该元素移至浮动元素下方
right 若右边有浮动元素,则该元素移至浮动元素下方
none 以预设的方法显示
预设值:none
继承性:无
一般范例:DIV { clear : right }
同轴范例:



width 设定宽度 支 持:IE4、NC4
适 用:区块元素或图形
可能值:
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素宽度为基准
auto 以固定比例自动变化大小
预设值:auto
继承性:无
一般范例:DIV { width : 300pt }
同轴范例:



height 设定高度 支 持:IE4、NC4
适 用:区块元素或图形
可能值:
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素宽度为基准
auto 以固定比例自动变化大小
预设值:auto
继承性:无
一般范例:DIV { height : 300pt }
同轴范例:



position 设定位置 支 持:IE4、NC4
适 用:区块元素
可能值:
absolute 以父元素为基准,摆设在特定位置上
relative 以相邻元素为基准,摆设在特定位置上
static 预设位置,以该元素于原始码中位置而定
预设值:absolute
继承性:无
一般范例:DIV { position : static }
同轴范例:



top 设定顶端位置 支 持:IE4、NC4
适 用:区块元素
可能值:
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素宽度为基准
auto 以正常方式显示
预设值:auto
继承性:无
一般范例:DIV { top : 30pt }
同轴范例:



left 设定左端位置 支 持:IE4、NC4
适 用:区块元素
可能值:
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素宽度为基准
auto 以正常方式显示
预设值:auto
继承性:无
一般范例:DIV { left : 30pt }
同轴范例:



clip 设定裁剪(设定某区域形状及大小,区域外通透) 支 持:IE4、NC4
适 用:区块元素
可能值:
rect(top,right,bottom,left) 设定矩形之上右下左长度,会自动比对对边长度
一般 写法为rect(0,长度,长度,0)
不可以写为rect(0,0,长度,长度)
四个数值皆可以"auto"代替
auto 以正常方式显示
预设值:auto
继承性:无
一般范例:DIV { clip : rect(0,100px,50px,0) }
同轴范例:



overflow 设定溢位处理(控制当元素内容超过该元素大小时的显示方式) 支 持:IE4
适 用:区块元素
可能值:
visible 元素将不会依所设订大小显示,而能看见所有内容
hidden 超过元素所设订大小之部份将被隐藏不予显示
scroll 如有必要出现卷轴可让使用者看到全部的内容
auto 以预设的方式显示
预设值:auto
继承性:无
一般范例:DIV { overflow : scroll }
同轴范例:



visibility 设定可视度 支 持:IE4、NC4
适 用:所有元素
可能值:
visible 设定该元素显示
hidden 设定该元素不显示,但仍占据空间
inherit 以父元素可视度决定
预设值:inherit
继承性:无
一般范例:DIV { visibility : hidden }
同轴范例:



z-index 设定Z轴参数(三度空间) 支 持:IE4、NC4
适 用:区块元素
可能值:
十进位数值,数值大的元素会出现在数值小的元素的上方
auto 当元素位置重复时,原始码中写在後面元素会出现在写在前面元素的上方
预设值:auto
继承性:无
一般范例:DIV { z-index : 3 }
同轴范例:




[tr][/tr][td][/td]

《CSS从入门到精通》CSS基础知识:第五课

第五章 文字性质的CSS

  本章要介绍的是文字相关的CSS指令。通 常一个网站的内容最多的就是文字了,透过这些文字相关的CSS指令,您可以将您的网页内容排版得美美的。本章将分两个部份为您介绍,第一部份是字型性质的CSS指 令,用以控制文字字型的各种样式;第二部份介绍的是文字性质的CSS指令,用以控制文字段落的外观及摆设方式。

字型性质的CSS指令

font-family  设定文字字型
支 持: IE3、IE4
适 用:所有元素
可能值:

字型名称
预设值:视浏览器而定
继承性:有
一般范例:SPAN { family-name : "标楷体" }
同轴范例:

font-style 设定字体样式
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
italic 斜体字
oblique 斜体字
预设值:normal
继承性:有
一般范例:SPAN { font-style : italic }
同轴范例:

font-weight 设定字型份量
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
100,200,300,
400,500,600,
700,800,900.
数字由小到大代表笔画由细到粗
normal=400 bold=700
预设值:normal
继承性:有
一般范例:SPAN { font-weight : bolder }
同轴范例:

font-size 设定文字大小
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
绝对大小,可用的参数由小到大分别有七项
xx-small, x-small, small, medium, large, x-large, xx-large
相对大小,可用的参数为larger, smaller两项
以父元素字型大小为基准
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素字型大小为基准
预设值:medium
继承性:有
一般范例:SPAN { font-size : 12pt }
同轴范例:


font-variant 设定文字转换
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
small-caps 将小写文字转换为大写
预设值:normal
继承性:有
一般范例:SPAN { font-variant : small-caps }
同轴范例:

font 综合设定字型性质
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
设定字体样式
设定文字转换
设定字型份量
设定文字大小与列高(请参考设定文字列高部份)
设定文字字型
预设值:无
继承性:有
一般范例: SPAN { font : bolder small-caps 12pt/120% Arial }
同轴范例:< SPAN style="font : bolder small-caps 12pt/120% Arial">

文字性质的CSS指令


line-height 设定列高
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通列高,根据字体变化合理高度,视浏览器而定
以元素字型大小乘以该数即为列高
设定长度,请参考第一章基本单位的相关说明
百分比,相对于元素字型大小为比例
预设值:normal
继承性:有
一般范例:DIV { line-height : 120% }
同轴范例:


text-align 设定文字对 
支 持:IE3、IE4、NC4
适 用:区块元素
可能值:
center 对 中央
right 对 右边
left 对 左边
justify 左右对 
预设值:视浏览器而定
继承性:有
一般范例:DIV { text-align : center }
同轴范例:


vertical-align 设定垂直对 
支 持:IE4
适 用:同轴元素
可能值:
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线
middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高,以父元素底线为基准作位移
预设值:baseline
继承性:有
一般范例:SPAN { vertical-align : sub }
同轴范例:

text-decoration 设定文字装饰
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值:none
继承性:有
一般范例:SPAN { text-decoration : blink }
同轴范例:

text-transform 设定文字转换
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值:none
继承性:有
一般范例:SPAN { text-transform : uppercase }
同轴范例:

letter-spacing 设定字母间隔
支 持:IE4
适 用:所有元素
可能值:
normal 不改变字母间隔,使用浏览器预设值
要额外增加的间隔长度,可为负值
预设值:normal
继承性:有
一般范例:SPAN { letter-spacing : 0.5pt }
同轴范例:

text-indent 设定文字缩排
支 持:IE3、IE4、NC4
适 用:区块元素
可能值:
长度单位,请参考第一章基本单位的相关说明
以父元素宽度为基准的百分比值
预设值:0
继承性:有
一般范例:DIV { text-indent : 3pt }
同轴范例:

《CSS从入门到精通》CSS基础知识:第五课

第五章 文字性质的CSS

  本章要介绍的是文字相关的CSS指令。通 常一个网站的内容最多的就是文字了,透过这些文字相关的CSS指令,您可以将您的网页内容排版得美美的。本章将分两个部份为您介绍,第一部份是字型性质的CSS指 令,用以控制文字字型的各种样式;第二部份介绍的是文字性质的CSS指令,用以控制文字段落的外观及摆设方式。

字型性质的CSS指令

font-family  设定文字字型
支 持: IE3、IE4
适 用:所有元素
可能值:

字型名称
预设值:视浏览器而定
继承性:有
一般范例:SPAN { family-name : "标楷体" }
同轴范例:

font-style 设定字体样式
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
italic 斜体字
oblique 斜体字
预设值:normal
继承性:有
一般范例:SPAN { font-style : italic }
同轴范例:

font-weight 设定字型份量
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
100,200,300,
400,500,600,
700,800,900.
数字由小到大代表笔画由细到粗
normal=400 bold=700
预设值:normal
继承性:有
一般范例:SPAN { font-weight : bolder }
同轴范例:

font-size 设定文字大小
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
绝对大小,可用的参数由小到大分别有七项
xx-small, x-small, small, medium, large, x-large, xx-large
相对大小,可用的参数为larger, smaller两项
以父元素字型大小为基准
长度单位,请参考第一章基本单位的相关说明
百分比,以父元素字型大小为基准
预设值:medium
继承性:有
一般范例:SPAN { font-size : 12pt }
同轴范例:


font-variant 设定文字转换
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通字
small-caps 将小写文字转换为大写
预设值:normal
继承性:有
一般范例:SPAN { font-variant : small-caps }
同轴范例:

font 综合设定字型性质
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
设定字体样式
设定文字转换
设定字型份量
设定文字大小与列高(请参考设定文字列高部份)
设定文字字型
预设值:无
继承性:有
一般范例: SPAN { font : bolder small-caps 12pt/120% Arial }
同轴范例:< SPAN style="font : bolder small-caps 12pt/120% Arial">

文字性质的CSS指令


line-height 设定列高
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
normal 普通列高,根据字体变化合理高度,视浏览器而定
以元素字型大小乘以该数即为列高
设定长度,请参考第一章基本单位的相关说明
百分比,相对于元素字型大小为比例
预设值:normal
继承性:有
一般范例:DIV { line-height : 120% }
同轴范例:


text-align 设定文字对 
支 持:IE3、IE4、NC4
适 用:区块元素
可能值:
center 对 中央
right 对 右边
left 对 左边
justify 左右对 
预设值:视浏览器而定
继承性:有
一般范例:DIV { text-align : center }
同轴范例:


vertical-align 设定垂直对 
支 持:IE4
适 用:同轴元素
可能值:
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线
middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高,以父元素底线为基准作位移
预设值:baseline
继承性:有
一般范例:SPAN { vertical-align : sub }
同轴范例:

text-decoration 设定文字装饰
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值:none
继承性:有
一般范例:SPAN { text-decoration : blink }
同轴范例:

text-transform 设定文字转换
支 持:IE3、IE4、NC4
适 用:所有元素
可能值:
none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值:none
继承性:有
一般范例:SPAN { text-transform : uppercase }
同轴范例:

letter-spacing 设定字母间隔
支 持:IE4
适 用:所有元素
可能值:
normal 不改变字母间隔,使用浏览器预设值
要额外增加的间隔长度,可为负值
预设值:normal
继承性:有
一般范例:SPAN { letter-spacing : 0.5pt }
同轴范例:

text-indent 设定文字缩排
支 持:IE3、IE4、NC4
适 用:区块元素
可能值:
长度单位,请参考第一章基本单位的相关说明
以父元素宽度为基准的百分比值
预设值:0
继承性:有
一般范例:DIV { text-indent : 3pt }
同轴范例:

《CSS从入门到精通》CSS基础知识:第六课

第六章区块性质的CSS

本章介绍的是区块性质的CSS指令以及它 们的应用与特性,可以设定与控制区块的位置,大小及边缘宽度等性质。本章也将分成 两个部份为您介绍,第一部份要讲的是区块各部份名称与概念的介绍,对于区块有一点 概念后,第二部份才再进入区块性质的CSS指令的介绍。

区块各部份名称与概念
其实我们还可以把所谓的「区块」细分成如 下面图形所表示的几个部份。



由外而内为您作介绍:MARGIN:边缘,虽然是通透的部份,但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。
BORDER:边框,就是外框的部份,经由CSS指令您可以控制边框的宽度、颜色和样式,不再死板!
PADDING:补白,也就是内容元素与框架之间的这段距离与空间,也可以利用CSS指令去控制大小。
元素:内容元素,也就是您放置于该区块内的内容,或为文字,或为图形,或为所有其它元素。
附带一提的是,所谓的区块宽度是指整个包含边缘在内的宽度,而元素宽度指的只是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后,接下来就要来介绍控制区块各部份分别的的CSS指令了!

区块性质的CSS指令
margin-top设定上边缘宽度
margin-right 设定右边缘宽度
margin-bottom设定下边缘宽度
margin-left设定左边缘宽度
支持:IE3、IE4、NC4
适用:区块元素
可能值:

长度单位,请参考第一章基本单位的相关说明
百分比,相对于元素宽度大小
auto 使用浏览器预设值

预设值:0
继承性:无
一般范例:DIV { margin-top : 20pt }
同轴范例:


margin综合设定边缘宽度
支持:IE3、IE4、NC4
适用:区块元素
可能值:依序设定top,right,bottom,left的边缘宽度
{1,4} 长度单位,请参考第一章基本单位的相关说明
{1,4} 百分比,相对于元素宽度大小
auto {1,4} 使用浏览器预设值
预设值:无
继承性:无
一般范例:DIV { margin : 20pt 15pt 10pt 5pt }
同轴范例:


要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边缘;如果只有指定一个合法设订值,则会统一套用于四个边持;若只有指定二或三个合法设定值,则未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt }
→top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt }
→top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt }
→top=20pt;right=15pt;bottom=10pt;left=15pt
border-top-width设定上边框宽度
border-right-width设定右边框宽度
border-bottom-width设定下边框宽度
border-left-width设定左边框宽度
支持:IE4、NC4
适用:区块元素
可能值:thin < medium < thick
thin 统一的绝对单位,因浏览器而异
medium 统一的绝对单位,因浏览器而异
thick 统一的绝对单位,因浏览器而异
长度单位,请参考第一章基本单位的相关说明
预设值:medium
继承性:无
一般范例:DIV { border-top-width : 2pt }
同轴范例:


border-width综合设定边框宽度
支持:IE4、NC4
适用:区块元素
可能值:依序设定top,right,bottom,left的边框宽度
thin {1,4} 统一的绝对单位,因浏览器而异
medium {1,4} 统一的绝对单位,因浏览器而异
thick {1,4} 统一的绝对单位,因浏览器而异
{1,4} 长度单位,请参考第一章基本单位的相关说明
预设值:无
继承性:无
一般范例:DIV { border-width : 4pt 3pt 2pt 1pt }
同轴范例:


要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则 未指定的边框会套用对边的宽度设定值。
DIV { border-width: 2pt }
→top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt }
→top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt }
→top=2pt;right=3pt;bottom=4pt;left=3pt
border-top-color设定上边框颜色
border-right-color设定右边框颜色
border-bottom-color 设定下边框颜色
border-left-color 设定左边框颜色
支持:IE4、NC4
适用:区块元素
可能值:
设定颜色,请参考第一章颜色使用的相关说明
预设值:color性质之值
继承性:无
一般范例:DIV { border-top-color : BLUE }
同轴范例:


border-color综合设定边框颜色
支持:IE4、NC4
适用:区块元素
可能值:依序设定top,right,bottom,left的边框颜色
{1,4} 设定颜色,请参考第一章颜色使用的相关说明
预设值:无
继承性:无
一般范例:DIV { border-color : RED GREEN BLUE YELLOW }
同轴范例:


要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则 未指定的边框会套用对边的颜色设定值;若无指定此一性质,则套用color性质之设定值。
DIV{border-color:RED }→top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN }→top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE}→top=RED;right=GREEN;bottom=BLUE;left=GREEN
border-top-style设定上边框样式
border-right-style设定右边框样式
border-bottom-style设定下边框样式
border-left-style设定左边框样式
支持:IE4、NC4
适用:区块元素
可能值:
none 不显示边框
dotted 虚线(IE4、NC4浏览器当作实线)
dashed 短直线(IE4、NC4浏览器当作实线)
solid 实线
double 双直线
ridge 3D凸线
groove 3D凹线
outset 3D隆起(IE4不显示)
inset 3D嵌入(IE4不显示)
预设值:none
继承性:无
一般范例:DIV { border-top-style : inset }
同轴范例:


border-style综合设定边框样式
支持:IE4、NC4
适用:区块元素
可能值:依序设定top,right,bottom,left的边框样式
none {1,4} 不显示边框
dotted {1,4} 虚线(IE4、NC4浏览器当作实线)
dashed {1,4} 短直线(IE4、NC4浏览器当作实线)
solid {1,4} 实线
double {1,4} 双直线
ridge {1,4} 3D凸线
groove {1,4} 3D凹线
outset {1,4} 3D隆起(IE4不显示)
inset {1,4} 3D嵌入(IE4不显示)
预设值:无
继承性:无
一般范例:DIV { border-style : ridge groove outset inset }
同轴范例:


要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则 未指定的边框会套用对边的样式设定值。
DIV{border-width:outset}
→top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset}
→top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge}
→top=outset;right=inset;bottom=ridge;left=inset
border-top 综合设定上边框性质
border-right 综合设定右边框性质
border-bottom综合设定下边框性质
border-left综合设定左边框性质
支持:IE4、NC4
适用:区块元素
可能值:
设定该边框宽度,请参考上面的介绍与说明
设定该边框样式,请参考上面的介绍与说明
设定该边框颜色,请参考上面的介绍与说明
预设值:无
继承性:无
一般范例:DIV { border-top : 2pt solid BLUE }
同轴范例:


border综合设定边框性质
支持:IE4、NC4
适用:区块元素
可能值:
设定边框宽度,请参考上面的介绍与说明
设定边框样式,请参考上面的介绍与说明
设定边框颜色,请参考上面的介绍与说明
预设值:无
继承性:无
一般范例:DIV { border : 2pt solid BLUE }
同轴范例:


要附带说明的是,这个指令只能指定一组设定值,也就是说,上右下左四个边框都将套用同一组的设定值,而不能作个别边框的设定值变化。
padding-top设定上方补白宽度
padding-right 设定右方补白宽度
padding-bottom设定下方补白宽度
padding-left设定左方补白宽度
支持:IE4、NC4
适用:区块元素
可能值:
长度单位,请参考第一章基本单位的相关说明
百分比,相对于元素宽度大小
预设值:0
继承性:无
一般范例:DIV { padding-top : 5pt }
同轴范例:


padding综合设定补白宽度
支持:IE4、NC4
适用:区块元素
可能值:依序设定top,right,bottom,left的补白宽度
{1,4} 长度单位,请参考第一章基本单位的相关说明
{1,4} 百分比,相对于元素宽度大小
预设值:无
继承性:无
一般范例:DIV { padding : 2pt 5pt 2pt 5pt }
同轴范例:


要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个补白;如果只有指定一个合法设订值,则会统一套用于四个补白;若只有指定二或三个合法设定值,则 未指定的补白会套用对边的宽度设定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
 

《CSS从入门到精通》CSS属性:第七课

CSS属性:
5、字体(Font)属性:
这里定义了关于字体的各种属性。
font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样:
属性名称: 'font-family'
属性值: [[ | ],]* [ | ]
初始值: 根据用户定义而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name是指确定的某字体,如Heisi Mincho W3generic-family指某一类字体,如serif
font-style属性描述字体的倾斜程度:
属性名称: 'font-style'
属性值: normal | italic | oblique
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止


font-variant属性:

属性名称: 'font-variant'
属性值: normal | small-caps
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。

font-weight属性用来描述字重。

属性名称: 'font-weight'
属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

100900代表9种不同的字重,400代表normal700代表bold900是最重的字体,bolderlighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为900,那么bolder后,字重还是900,同样的lighter也一样。有些字体并没有100900那么全的字重,也许是从300700,那么字重的最小和最大值也为300700。例如:
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */

font-size属性描述字体的大小:
属性名称: 'font-size'
属性值: | | |
初始值: medium
适合对象: 所有元素
是否继承: yes
百分比备注: relative to parent element's font size

该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示:
xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。相对大小可以使用:larger smaller描述。例如:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Font属性是以上属性的快捷方式,属性如下:
属性名称: 'font'
属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
适合对象: 所有元素
是否继承: yes
百分比备注: 只在font-size使用

例如:
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

 
 
阅读(2607) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~