|
源代码网推荐
说到CSS，笔者用的最多的还是它的排版和字型设计功能。因为网页嘛，最终还是要做给人家看的，要传递信息给对方的，所以不管怎么说，这种传递形式非常重要，具体说来，也就是字的控制和版面的控制。另外一个很重要的原因就是中文相当难处理，Windows自带的中文字库很少，而中文的美术效果又很难做，远不如英文那么随随便便写几个字就很舒服。所以借助CSS的帮助就更显得有必要。好，废话也不多说了。大家还是跟我一起看一看CSS到底对字能起些什么作用吧。
首先，给朋友们说说样式表关于字型的一些功能。总的说来，主要是字体(font)、大小(size)、字体粗细(Weight)、字体变形(Variant)、字体风格(Style)、修饰(Decoration)、Case(大小写)等等。下面笔者向大家详细介绍一下。请注意，本文所用的Style例子都是采用的调用外部文件的形式，且只是外部文件css1.css的内容，大家看的时候注意了。要是想使用它们，如上节所说的，在HTML文件的文件头说明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。
好，下面先给大家看一个例子:
P {
text-align: left;
font-size: 25pt;
font-family: "隶书", "宋体";
letter-spacing: 3px;
color:navy;
line-height:30pt;
text-indent: .5in;
border: solid 2pt;
}
链入网页以后出来的效果如下图：
现在就对上面这段代码进行详解。首先，P就是表示是对文件中的所有< p>< /p>容器中的内容进行的定义。大括号内就是对各项属性所规定的值。对于一个定义的格式往往是:
属性:值
中间以分号隔开。
Text-align:left表示段落是居左对齐，font-size:15pt，表示字体大小为15pt，font-family:隶书,宋体 表示所采用的字体。这里要说明一下，这里使用了几种字体，并分别用逗号隔开，表示第一、第二、第三字体，也就是说如果客户机的系统内有第一种字体的话就采用它，如果没有再查看有没有第二种，第三种，倘若都没有则使用缺省字体。letter-spacing:3px就说明字间宽为3px.color:navy，则表示颜色为天蓝色，line-height:12pt表示行高为12pt(这里的行高是连同字高一起计算的)。text-indent:.5in表示段落首行的缩进的多少，这里是.5in.border:solid 1pt表示边框是宽度为1pt的实心边框。
大家对照一下图看看属性与效果之间的关系。看看写Style是不是很简单呢?有关字体和排版的属性还有几项，下面就列表向大家说明。
字体参数(Font Properties):
|
参数 |
含义 |
举例 |
|
Font-size |
字体大小 |
Small,midium |
|
Font-Style |
字体风格 |
Normal,italic |
|
Font-family |
选用字体 |
宋体,fantasy |
|
Font-weight |
字体粗细 |
Bold,bolder |
文本参数(Text Properties):
|
参数 |
含义 |
举例 |
|
Line-Height |
行距 |
1.2,18pt |
|
Text-decoration |
文字装饰 |
underline,none |
|
Text-transform |
大小写转换 |
Capitalize(单词首字母大写)
Uppercase(全部大写)
Lowercase(全部小写) |
|
Text-align |
文字对齐 |
Left,right,center,justify |
|
Text-indent |
文字缩进 |
长度值,百分比值 |
块参数(Block-Level Formatting Properties)
|
参数 |
含义 |
举例 |
|
Left-margin,right-margin |
留的空白 |
长度值,百分比值 |
|
Padding-top… |
内容边框间距 |
长度值,百分比值 |
|
Border-width |
边框宽度 |
长度值 |
|
Border-style |
边框风格 |
Solid,double,groove |
|
Border-color |
边框颜色 |
颜色值 |
|
Width |
宽度 |
长度值,百分比值 |
|
Float |
对齐 |
Left,right |
颜色参数(Color and Background Properties)
|
参数 |
含义 |
举例 |
|
Color |
前景色彩 |
颜色值(red, #FF0000) |
|
Background-image |
背景文件 |
文件地址 |
|
Background-color |
背景颜色 |
颜色值 |
源代码网供稿. |
