学习CSS使用技巧教程(6)文字属性

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
  上一节:自定义类别

  文字属性

  文字属性是可以设置文字的颜色、大小、字型、粗细等等。

原始代码

<STYLE>
SPAN.c1 {color:red;position:relative;font-size:12px;font-family:Arial;font-weight:700}
SPAN.c2 {color:blue}
SPAN.c3 {color:green}
SPAN.c4 {color:pink}
</STYLE>

<SPAN CLASS=c1>A</SPAN>
<SPAN CLASS=c2>B</SPAN>
<SPAN CLASS=c3>C</SPAN>
<SPAN CLASS=c4>D</SPAN>

显示结果 A
B
C
D

  文字颜色 { COLOR }

  语法:{ COLOR : ( color ) }

原始代码 <STYLE>
SPAN.test {color:red}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D

  文字类别 { FONT }

  设置字体样式、大小写变化、粗细、大小、文字行列高度、字型

  语法:{ FONT : ( font-style )︱( font-variant )︱( font-weight )︱( font-size )︱( font-family )︱/ ( line-height ) }

原始代码 <STYLE>
SPAN.test {FONT:ITALIC BOLD 12pt/18pt}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D

  下载字型 { @FONT-FACE }

  语法:@FONT-FACE { FONT-FAMILY : ( font-family ) ; SRC : URL ( url ) }

原始代码 <STYLE>
@FONT-FACE { FONT-FAMILY : (未定) ; SRC : URL ( 下载地址 ) }
</STYLE> 显示结果 没有结果

  文字字型 { FONT-FAMILY }

  语法:{ FONT-FAMILY : ( font-name )︱( generic-family ) }

原始代码 <STYLE>
SPAN.test {FONT-FAMILY:"Arial Black"}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D


  文字大小 { FONT-SIZE }

  设定字体大小 ( 可设单位属性 : 点 pt、英寸 in、公分 cm、像素 px、百分比 % )

  语法:{ FONT-SIZE : LARGE︱MEDIUM︱SMALLER︱( length )︱( percentage ) }

原始代码 <STYLE>
SPAN.test1 {FONT-SIZE:LARGE}
SPAN.test2 {FONT-SIZE:10pt}
SPAN.test3 {FONT-SIZE:50%}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN>
<SPAN CLASS=test1>E F G H</SPAN>
<SPAN CLASS=test2>I J K L</SPAN> 显示结果 A B C D
E F G H
I J K L

  文字样式 { FONT-STYLE }

  设定字体样式 ( 分为 : 正常、斜体 )

  语法:{ FONT-STYLE : NORMAL︱ITALIC }

原始代码 <STYLE>
SPAN.test1 {FONT-STYLE:ITALIC}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D

  文字变化 { FONT-VARIANT }

  设定字体变化 ( 分为 : 正常、小字体 )

  语法:{ FONT-VARIANT : NORMAL︱SMALL-CAPS }

原始代码 <STYLE>
SPAN.test1 {FONT-VARIANT:SMALL-CAPS}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D

  文字粗细 { FONT-WEIGHT }

  设定字体粗细 ( 分为 : 正常、粗字体 )

  语法:{ FONT-WEIGHT : NORMAL︱BOLD }

原始代码 <STYLE>
SPAN.test1 {FONT-WEIGHT:BOLD}
</STYLE>

<SPAN CLASS=test>A B C D</SPAN> 显示结果 A B C D

  下一节:连接属性

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
文章标签: css class c url
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭