转到CSS教程学习与交流平台首页DIV+CSS自学教程网

CSS - DivCss5您的位置:主页 > DIV+CSS入门 >

css font _ css 文字


css对文字设置-css文字-css font

接下来我们介绍下CSS基础,必须掌握的CSS知识——css对文字的设置或者说css文字样式学习。

DIV CSS可以设置文字的样式css font有哪些
 

目录
  1. CSS 文字的大小
  2. 文字的颜色
  3. DIV CSS文字的下划线
  4. DIV CSS文字的间隔
  5. CSS 文字的字体
  6. 文字的上下行间距
  7. CSS 字体样式(斜体)
  8. CSS 字加粗方式
  9. DIV+CSS英文字、字母大小写

 

DIV+Css开发中设置字体常用css属性单词英文css font-可进入CSS手册查看更详细CSS 文字知识
fontfont-family(字体)、font-size(字大小)、font-style(字样式)、font-weight(加粗)、text-decoration(下划线)、font-variant(字母大小写)、text-transform(英文大小写)、letter-spacing(间隔)

接下来,我们一一实例讲解通过css文字控制方法
1、字体大小使用到font-size,实例如下  TOP

首先设置了font-size的值为36px,则下面结果显示字体比较大。

2、文字的颜色使用css中color颜色属性通过color更样式值设置文字样式的颜色为红色  TOP

  TOP 3、Css来控制文字的下划线方法css font,用到text-decoration可以进css手册了解对应值,你还可能还希望了解css链接css超链接样式、css下划线

  TOP 4、文字的间隔-进入详细的CSS 字间距了解

  TOP 5、文字的字体-用到css样式属性font-family,字体设置图例如下

一般font-family字体可以跟常见的“宋体”,“新宋体”,“黑体”,注意的是不能自己设置不参加的字体样式,虽然在自己电脑上可能自己设置字体能表现出了,但是一般电脑用户都没有添加字体的,所以在这里字体只能设置常见,系统自带的字体,而不能设置自己安装的字体。
电脑自带字体,和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif等

  TOP 6、文字的上下行间距,使用到css文字设置单词line-height,这里设置line-height:50px;

可以看到演示css font文字段“我是被css控制文字样式演示。”离上下文字间隔距离是通过line-height来实现。也许你需要了解br和p的区别

  TOP 7、字体样式(斜体)使用到css样式中font-style标签设置如font-style: italic,当然可以使用<em>标签将文字变为斜体

  TOP 8、字加粗方式-可以直接对需要加错文字前加<b>文字后加</b>或<strong></strong>来实现,对文字的加粗,这里你可以用css来控制对文字加粗。这里用到font-weight来设置如font-weight:bold;

这里font-weight的值可以为100-900不等的方式为值,值越大字体越粗,如果值为bold则为正常加粗,同使用b或strong一致效果。

  TOP 9、英文字、字母大小写css font。使用css中font-variant字母全大小,如font-variant:small-caps;,选择性大小写text-transform如text-transform:capitalize;开头第一个字母大写。

text-transform语法text-transform : none | capitalize | uppercase | lowercase

参数:

none :  无转换发生
capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
uppercase :  转换成大写
lowercase :  转换成小写

font-variant语法font-variant : normal | small-caps

参数:

normal : 正常的字体
small-caps : 小型的大写字母字体

提升与扩展思维css font
代码:font:12px/1.5 Arial, Helvetica, sans-serif;
一般常用以上代码定义一个网页的文字的css样式意思,这段代码以上是字体的大小是12px,line-height为1.5倍字体尺寸,字体是Arial, Helvetica, sans-serif。
Css font提升图例讲解


这样一定义可以节约很多代码,使用更简便以上即是div css网站为大家通俗的介绍css font,css文字相关知识与实例图讲。

更多

 

DIV+CSS教程基础

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
DIV+CSS作者:DIVCSS5     CSS修订日期:2010-04-25    点击:
本文WWW.DIVCSS5.COM(DIV CSS) DIVCSS5版权所有,未经书面批准转载法律必究

 

最新更新CSS教程与内容

 

关于我们 - 联系我们 - DIV CSS - DIV+CSS - CSS网站地图 - CSS - RSS订阅 - 最新CSS教程列表 -- TOP

© 2011 DIVCSS5 www.divcss5.com  CSS教程学习与交流平台