精通样式表技术笔记(四)

转载 2007年09月19日 16:09:00
16、对字体各种浏览器的支持应用:
 每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种: 
serif (也可能是 Times) 
sans-serif (也可能是 Arial或者 Helvetica) 
cursive (也可能是 Comic Sans) 
fantasy (也可能是 Ransom) 
monospace (也可能是 Courier) 
(注意:Netsacpe Communicator不支持Cursive或者fantasy)

 

其它字体名称诀窍: 

如果一种字体的名称不只一个单词,如Gill Sans,在你的CSS代码中用引号包含该字体的名称。 
BODY { font-family: "gill sans", "new baskerville", serif }

行内加入的CSS规则,使用单引号: 
<P STYLE="font-family:
'gill sans', 'new 
baskerville', serif">Text 
goes here.</P>

如果你将CSS规则的说明组合在一起,而其中又包含字模系列,将字模系列列在最后,例: 
H2 { color: red; margin: 
10px; font-family: times, 
serif }


17、字号

使用font-size 属性,你可以对文字的尺寸进行无限的控制。 

确定这的3种基本方法: 

Points, ems, pixels, 及其它单位 
关键字 
比例参数 
Points, Ems, Pixels, 及其它单位


太简单了就不写了!


18、字体风格 

字体风格用来控制斜体字的属性,非常漂亮又非常简单: 

H3 { font-style: italic }

当浏览器接到应用斜体字的指令后,它将用户的机器中寻找安装的斜体字版本,
如果不存在斜体字,浏览器将生成一种。常,就是指将正常的字体倾斜显示。

如果一种字体的名称为Oblique,而不是Italic,浏览器就会使用oblique作为字体风格的参数。

字体风格的第3种参数是normal,它将取消斜体字风格,将字体以正常形式显示。 

字重 

加重风格可以关闭或打开,利用字重属性,可以创造出一系列新的加重字体。 

P { font-weight: bold }

这是字重最常见的应用方式,而normal属性也可以取消加重字体,将字体以正常形式显示。

你还可以用数值100,200,...900。正常的非加重体的字体值为400,900是最加重的字体参数值。


19、字体特殊效果:
字体参数(font-variant)

这时一种挺简单的属性,你可以将正常文字缩小一半尺寸后大写显示。 

H2 { font-variant: small-caps }

文字变形(text-transform) 

这项属性可以使你轻而易举地控制字母写。基本代码: 

B { text-transform: uppercase }

以下为所有可用的参数: 

uppercase 使所有字母大写显示,
例: 
This sentence serves as an example. 
lowercase使所有字母小写显示,
例: 
This sentence serves as an example. 
capitalize 使每个单词的第1个字母大写显示,例:
This sentence serves as an example. 
none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。

B { text-decoration: underline }

大部分的选项使得文字变得难以阅读: 

underline 给文字下划线,例:
these words. 
overline给文字上划线,例:
these words. 
line-through给文字划出删除线,
例:these words. 
blink是你在恶梦中常常看到的--
文字在闪烁,例:
these words. 
none使得上述效果都不会发生。 

none参数非常有用,你可以使链接的文字不以下划线的形式显示。具体做法: 

A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }

 

20、字间距 

利用字间距属性,你可以在字之间加入更的距离: 

H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺设置,你可以使用任何种长度单位: 

in (英寸) 
cm (厘米) 
mm (毫米) 
pt (点数) 
pc (打字机字间距) 
em (ems) 
ex (x-height) 
px (象素)


字母间距 

H3 { letter-spacing: 10px }

 

精通样式表技术笔记(一)

 1、第一个例子:My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash y...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 13:34
  • 762

精通样式表技术笔记(五)

21、行高  利用行高我们可以随心所欲地控制行与行之间的垂直距离。 B { line-height: 16pt }你所用的参数就是相邻两行的基准线(基准线就是英文小写字母如x,a的下阶线,但不包括诸如...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 16:11
  • 501

精通样式表技术笔记(七)

31、可视性  利用CSS,你可以隐藏要素,使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。 H4 { visibility: hidden }选项: visible使要素可以被看见 h...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 16:15
  • 617

精通样式表技术笔记(三)

11、情景选择: 如果你想让所有加重显示的文字都以红色显示,但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗?利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真,心想事成。情景选...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 15:28
  • 536

精通样式表技术笔记(二)

6、植入样式表:  这就是我们在上一页中用的方法,所有的样式表信息都列于HTML文件的顶部,同分列,例: H1 { color: green; font-family: impact }P { bac...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 14:27
  • 781

精通样式表技术笔记(六)

26、背景定位(background-position) 你可以设定将背景插在什么位置显示。 P { background-position: center bottom; background-im...
  • hongxiang_ECJTU
  • hongxiang_ECJTU
  • 2007年09月19日 16:13
  • 1926

10.1-全栈Java笔记:最全面的IO技术(一)

IO技术 对于任何程序设计语言而言,输入输出(Input/Output)系统都是非常核心的功能。程序运行需要数据,数据的获取往往需要跟外部系统进行通信,外部系统可能是文件、数据库、其他程序、网络...
  • quanzhanjavabiji
  • quanzhanjavabiji
  • 2017年06月29日 10:41
  • 509

韩顺平_PHP从入门到精通视频教程配套笔记

http://www.itcast.cn/news/20120913/18063829105.shtml
  • liuzhushiqiang
  • liuzhushiqiang
  • 2013年09月28日 14:35
  • 673

读《Oracle从入门到精通》笔记--持续更新中

第一章 Oracle 11g概述 1.6节 启动与关闭数据库实例 启动数据库: Startup [nomount|mount|open|force][resetrict][pfile=fi...
  • u011009161
  • u011009161
  • 2016年05月06日 19:44
  • 1843

CUDA从入门到精通(四):加深对设备的认识

前面三节已经对CUDA做了一个简单的介绍,这一节开始真正进入编程环节。 首先,初学者应该对自己使用的设备有较为扎实的理解和掌握,这样对后面学习并行程序优化很有帮助,了解硬件详细参数可以通过上节介绍的...
  • wozhengtao
  • wozhengtao
  • 2016年06月07日 00:09
  • 706
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通样式表技术笔记(四)
举报原因:
原因补充:

(最多只允许输入30个字)