马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
我想以一章的篇幅来会商用CSS设定笔墨款式的做法是个好点子.一样平常处置笔墨内容也许是使用CSS最多的中央,就算对没有完整恪守尺度的网站来讲也是一样.往失落网页中重复呈现的<font>标签已经是(如今也是)非常吸引计划者的事变,并且不丢脸出以CSS把持笔墨付梓的伟大上风,也就是进一步分别内容和展现体例.
从先前的良多例子我们晓得了CSS能处置很多情形,而设定笔墨款式就算对最基础的网页来讲也是加上计划元素最复杂的办法.同时,以CSS为笔墨加上款式也能让我们制止在页面内加上不用要的图片.
在这一章里,我们将看到CSS怎样把一段有趣一般的笔墨带到另外一个高度(以新色采,巨细和字体).
怎样让超文本看起来更酷?
指定笔墨款式是CSS最善于的事情之一,就算是面临略嫌老旧,不完全撑持CSS进阶功效的扫瞄器也是一样.在已往,计划者与开辟者也许会想在计划笔墨到达巨细,粗体以外的效果时,制造出以昔日尺度来看没法忍耐而且难以利用的网页(已经看过笔墨年夜多以图片体现的网页吗?但你又刚巧在利用笔墨扫瞄器的时分...)
为了供应你一些利用图片以外的替换办法同时能回覆下面这个成绩,在这章中,会用一段还没有设定款式的笔墨作为开首,渐渐为它加上各类CSS划定规矩,使它成为有目共睹的计划.
不休改动的Times
入手下手先以扫瞄器的预设字体看一段行将处置的笔墨.以我的情况来讲,预设字体是16像素的Times.并在MacOSX下面利用Safari扫瞄器,由于如许,以是看到的笔墨会是以反锯齿体例刻画的,假如是利用WindowsXP并启动了ClearType的话,也能看到相似的效果.
Times(大概是变体TimesNewRoman)是很多扫瞄器的预设字体,但是,这很简单被利用者改成他们本人喜好的字体,因而你固然不克不及依附这个预设值.
3-1显现了我们在本章里利用的还没有加上款式的笔墨内容:一个以<h1>标志的复杂题目,跟这是三段家居装璜的技能申明.
3-1扫瞄器显现题目,笔墨的预设效果
改动行高
最复杂,最无效的笔墨款式效果之一,是line-height属性,在每行笔墨之间加上一些分外的空间,就可以让笔墨段落更简单浏览,更吸惹人,也能为你的页面带来奇奥的效果.
只需为<body>标签加上以下的CSS划定规矩就可以完成这个技能.固然也能够为别的标签加上这条划定规矩,好比说只想改动<p>的行高.
body{
line-height:1.5em;
}
这段代码的意义是:页面上笔墨的行高应当是笔墨高度的1.5倍.我喜好在指定line-height的时分利用em单元,由于它们会跟着字体巨细而改动.
3-2显现的是加上line-height以后的效果.
3-2预设笔墨加下行高以后的效果
看起来已变得很棒了,小小的line-height能办到的效果其实惊人.
都在家属里
固然,我们也能改动字体,但必要寄望的是大概会被利用者体系上安装的字体限定住.
接着以font-family属性为实例加上一组但愿利用的字体.这边的观点是:指定一组字体列表,两头以逗号离隔,而且以但愿利用的按次分列.假如利用者没有安装列表中的第一个字体,扫瞄器会选用第二个字体,以此类推.
body{
font-family:Georgia,Times,serif;
line-height:1.5em;
}
在后面这个例子里,所请求的是"用Georgia字体润色一切笔墨,假如利用者没有安装Georgia的话,改用Times,假如还没有安装Times的话,就是用预设的serif字体".
3-3显现了示例加上font-family以后的效果.
3-3以Georgia字体显现的示例效果.
称号内含空格的字体
假如像指命名称内含空缺的字体(好比说LucidaGrande),就必需以引号包住全部字体称号.
鄙人面的例子中,将把LucidaGrande(着名的Macintosh字体)选为但愿利用的字体,而且指定TrebuchetMS(着名的Windows字体)作为第二候补,再加上一个通吃的sans-serif.在后面两种字体都没有安装的情形下,取用预设的sans-serif字体.
body{
font-family:"LucidaGrande","TrebuchetMS",sans-serif;
line-height:1.5em;
}
字距调剂(又称作字母距离)
字距调剂是个在印刷界形貌笔墨距离的名词.与其同义的CSS属性是letter-spacing.接着,让我们为<h1>标签利用letter-spacing属性,为示例的题目加点料.
在为<h1>标签使用letter-spacing以后,就可以使题目更有目共睹,而不用翻开图片编纂器入手下手制造图片笔墨.
起首,让我们为letter-spacing属性加上正数值把题目的笔墨压缩:
h1{
letter-spacing:-2px;
}
修正功效在3-4里能看到.
3-4为<h1>加上正数值得letter-spacing
大概实验加上负数的letter-spacing并同时用font-style属性把题目改成斜体:
h1{
letter-spacing:4px;
font-style:italic;
}
3-5是按照上述修正事后的效果,单就笔墨来说变得非常有目共睹了,不是吗?不使笔墨间距变化的太夸大是个明智之举,由于如许反而很简单使笔墨变得难以浏览,一旦内容难以浏览,另有谁会在乎它吸不吸惹人呢?你说是吧!
3-5利用负数letter-spacing值,而且使用斜体
首字年夜写
首字年夜写在印刷界非常罕见,这能为段落加上华美而文雅的效果,并且不用用上图片就可以办到这类效果,只用CSS就够了.
起首,必需为标志源代码加上一个"款式锚点"让我们有举措挪用第一段的第一个字母.我们将"I"用一组<span>标签包起来并给它指定class=drop,假如我们才干在页面或全部网站里反复利用首字年夜写效果.
<p><spanclass="drop">I</span>fyourepaintingwithlatexpaints,andthejob...
在某些完整撑持CSS2标准的古代扫瞄器中,我们能够用:first-letter伪类设定段落首字效果,而不用加上分外的<span>标签,固然语义上十分棒,不幸的是很多扫瞄器都不撑持这个效果.
如今我们能完整把持第一段的"I"字母了,让我们加上CSS声明,以便把字体缩小,同时将它浮动到左边(如许,其他的笔墨才不会包抄它显现),我们也会加上粉饰用的背景,边框.
.drop{
float:left;
font-size:400%;
line-height:1em;
margin:4px10px10px0;
padding:4px10px;
border:2pxsolid#ccc;
background:#eee;
}
分离我们如今为示例内容加上的一切款式,3-6是扫瞄器显现首字年夜写的效果,它完整没有效上图片,只靠复杂的CSS与标志语法完成.
3-6用CSS制造的首字年夜写效果.
笔墨对齐
一样受印刷界启示,我们能以text-align属性为笔墨使用摆布对齐效果.摆布对齐以后的笔墨会拉开单字之间的间隔,让每行的宽度变得一样长,造出严密,界线明白的分栏效果.
body{
font-family:Georgia,Times,serif;
line-height:1.5em;
text-align:justify;
}
3-7是作为示例的笔墨,如今摆布对齐了!
3-7以text-align属性摆布对齐过的笔墨效果
寄望笔墨内容在左边和右边都分列成一条直线.其他text-align属功能利用的设定值有:left,right,center.
举例来讲,我们也能为<h1>标签使用text-align属性,将示例的题目居中.
h1{
letter-spacing:4px;
font-style:italic;
text-align:center;
}
3-8是题目居中以后的效果.
3-8用textalign属性把<h1>居中
转化笔墨
有个text-transform属功能转化笔墨内容的巨细写,而不论标志内容的巨细写是如何的.举例来讲,题目是以上面这段的写法标志的:
<h1>APaintingTip</h1>
只需在CSS内利用text-transform属性,就可以把全部题目转化成年夜写(想要的话也能转化成小写),而不用修正标志源代码的内容,除先前为<h1>标签加上的款式以外,把题目全体酿成年夜写的CSS划定规矩就是这么复杂:
h1{
letter-spacing:4px;
font-style:italic;
text-align:center;
text-transform:uppercase;
}
功效就像13-9如许,不用与标志源代码较量了,只需改改CSS,就可以改动页面(乃至全部网站)某些特定标签的巨细写用法.
3-9用CSS把题目酿成年夜写
小型年夜写字母
年夜多半扫瞄器都撑持font-variant属性,让我们以小型年夜写字母润色内容(也就是以分歧巨细的年夜写笔墨显现内容).
让我们为示例的题目加上font-variant属性:
h1{
letter-spacing:4px;
text-align:center;
font-variant:small-caps;
}
3-10显现了题目换用小型年夜写字母以后的效果:这又是一个以标志语法和CSS仿照印刷界做法的办法.
3-10用了小型年夜写字母的题目
段落首行缩进
再次向印刷界看齐(天哪,你看得出这里的趋向吗?),我们能够使用text-indent属性缩进段及第一行内容.加上正值的话,就会使笔墨缩进指定的量.
经由过程将示例中的每一个段落缩进3em大概说是3个字符可以占用的最年夜宽度.我要拿失落首字年夜写,让它不会与第一段第一行的缩进效果打斗.
缩进一切<p>的第一行所需的CSS就像如许:
p{
text-indent:3em;
}
3-11显现了修正效果,你能看到每段笔墨的第一行都缩进了我们设定的值,会选择利用em单元是由于,云云一来缩进长度会与字体巨细保持反比,当利用者决意本人缩小或减少字体时,这个办法就可以展现它的优点了.
3-11用text-indent属性缩进段落首行的效果
归结
会商了几个为笔墨指定款式的CSS属性以后,但愿你能懂得年夜多半时分,你不必要依附画图工具也能造出不错的效果.一般只需为标志源代码加上一点款式就够了,偶然还能到达十分棒的效果.
固然,有些情况大概必要把笔墨做成图片,好比说公司的标记,大概是做某些页面元素的时分必要用到的特别字体,任何事变的关头都在均衡,试着先用CSS指定款式,云云一来你的标志源代码会更洁净,更简单利用.
CSS供应了修正笔墨,加上款式的把持办法,了局也好的使人惊奇,这会是个很不错的计划工具,让你能持续保持短小天真的标志源代码.
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。 |
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:10:19
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主