欢迎光临
我们一直在努力

css 循序渐进(二)字的艺术_css教程

建站超值云服务器,限时71元/月

   说到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;
   }

   链入网页以后出来的效果如下图:

css 循序渐进(二)字的艺术_css教程

   现在就对上面这段代码进行详解。首先,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


背景颜色


颜色值

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » css 循序渐进(二)字的艺术_css教程
分享到: 更多 (0)