1. 设置字体

  在CSS中字体通过font-family属性来设置。

font-family: Verdana, Arial, Helvetica, sans-serif;

  上面的字体设置告诉浏览器首先在访问者的计算机中寻找Verdana字体。如果该访问者的计算机中没有Verdana字体,则寻找Arial字体。若没有Arial字体,再依次寻找Helvetica、sans-serif字体。如果这4种字体都没有,则使用浏览器的默认字体显示。

  font-family属性可以同时声明多种字体,字体之间用逗号分隔开。另外一些字体的名称中间会出现空格,如Times New Roman,这时需要用双引号将其引起来,使浏览器知道这是一种字体的名称。

2. 文字的大小

  CSS通过font-size属性来设置文字的大小。

font-size: 12px;

  长度单位:

  ◊ px 表示在浏览器上1个像素的大小;

  ◊ em  1em表示在其父元素中字母m的标准宽度;

  ◊ ex   1ex表示字母x的标准高度。

3. 行高

  CSS中通过line-height属性设置。在CSS中line-height的值表示两行文字之间基线的距离,即每行文字的高度。如果给文字加上下划线,下划线的位置就是文字的基线。

line-height: 30px;

  除了可以使用px等作为行高的单位,也可以不加任何单位,此时行高应该写成与字体大小的比值。

line-height: 1.5;

  CSS中字体、大小和行高的组合:

font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;

4. 文字颜色

color: blue;
color: #0000FF;
color: rgb(0,0,255);
color: rgb(0%,0%,100%);

5. 空白折行

white-space: nowrap;

6. CSS1定义的字体、颜色和文本属性

属性 类型 说明
font-family 字体 字体类型
font-style 字体 字体样式,包括:normal、italic(斜体)、oblique(倾斜)
font-variant 字体 字体大小写,包括:normal、small-caps(小型的大写字母字体)
font-weight 字体 字体粗细
font-size 字体 字体大小
font 字体(复合属性) 字体样式,可以包含所有字体属性的声明值
color 颜色 字体颜色
word-spacing 文本 词间距
letter-spacing 文本 字符间距
text-decoration 文本 文本修饰线,包括:none(默认值)、blink(闪烁)、underline(下划线)、line-through(中划线)、overline(上划线)
vertical-align 文本 文本垂直对齐方式,包括:auto、baseline、sub、supper、top、text-top、middle、bottom、text-bottom、length。
text-transform 文本 文本大小写,包括:none(默认值)、capitalize(首字母大写)、uppercase(大写)、lowercase(小写)
text-align 文本 文本的水平对齐方式,包括:left、right、center、justify(两端对齐)
text-indent 文本 首行缩进
line-height 文本 行高

7. CSS2新增字体、颜色和文本属性

属性 类型 说明
font-size-adjust 字体 是否强制对文本使用同一尺寸
font-stretch 字体 是否横向拉伸变形字体
text-shadow 文本 文本阴影效果
direction 文本 文本流入的方向,包括:ltr(默认值,从左到右)、rtl(从右到左)、inherit(由继承获得)
unicode-bidi 文本 定义同一个页面中存在不同方向读进的文本显示,与direction属性一起使用

8. CSS3新增字体、颜色和文本属性

属性 类型 说明
text-shadow 文本 文本阴影或模糊效果
text-overflow 文本 省略文本的处理方式
word-wrap 文本 文本超过指定容器的边界时是否断开换行

  示例

text-shadow: -0.1em 0.1em #CCCCCC;
text-shadow: -0.1em 0.1em 0.3em #CCCCCC;
text-shadow: -0.1em 0.1em #CCCCCC,
-0.1em 0.1em 0.3em #CCCCCC;

  text-shadow属性的第一个值表示水平偏移;第二个值表示垂直偏移,正值偏右或偏下,负值偏左或偏上;第三个值表示模糊半径,可选;第四个值表示阴影是颜色,可选。

  text-shadow属性可以接受一个以逗号分隔的阴影效果列表,并应用到元素的文本上。

text-overflow: ellipsis;

  text-overflow属性值包括:clip | ellipsis | ellipsis-word。

  clip:不显示省略标记,只是简单的裁切。

  ellipsis:当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。

  ellipsis-word:当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词。

word-wrap: break-word;

  word-wrap属性值包括:normal | break-word。

  normal:连续文本换行。

  break-word:内容将在边界内换行。

CSS系列:CSS文字样式的更多相关文章

  1. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  2. CSS之常见文字样式整理

    常见文字样式 行高:line-height,当我i们将行高的大小设置成当前元素的高度时,可以实现当行文本在当前元素中垂直方向居中显示的效果 水平对齐方式:text-align:left|center| ...

  3. 【前端Talkking】CSS系列——CSS深入理解之line-height

    1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...

  4. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

  6. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  7. CSS/Compass修改placeholder的文字样式

    在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...

  8. CSS Font文字样式

    font-style: /* 文字样式 italic(倾斜) | normal */ font-weight: /* 文字是否加粗 bold | normal(正常) */ font-size: /* ...

  9. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  10. 前端基础系列——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

随机推荐

  1. 关于jquery简单操作简单表格

    最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...

  2. Lession1 写在机器学习之前

    机器学习从学习方式上来讲,可以分为两类: 监督学习(Supervised Learning),简而言之就是“有标签”学习 无监督学习(Unsupervised Learning),简而言之就是“无标签 ...

  3. js学习笔记

    javacript笔记根据EC5.0一共有六种数据类型:number,string,bool undefine,nullobject(广义的) --->object(狭义的),array,fun ...

  4. windows消息机制详解(转载)

    消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变窗口尺寸.按下键盘上的一个键都会使Windows发送一个消息给应用程序.消息本身是作为一个记录传递给应用程序的 ...

  5. Mongodb常用命令介绍

    查看命令的方式: 1.在shell中运行db.listCommands() 2.在浏览器中访问管理员接口:http://ipaddress:28017/_commands 下面介绍在Mongodb中最 ...

  6. python setup.py 管理

    发布项目遇到了坑……特此记录. How to write setup.py: https://docs.python.org/2/distutils/setupscript.html Setup.py ...

  7. linux 多线程基础

    参考出处:http://www.cnblogs.com/skynet/archive/2010/10/30/1865267.html 1.进程与线程 进程是程序代码在系统中的具体实现.进程是拥有所需资 ...

  8. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. 搬-Android - Wi-Fi Tutorial[转]

    http://www.tutorialspoint.com/android/android_wi_fi.htm Android allows applications to access to vie ...

  10. 【五】将博客从jekyll迁移到了hexo

    本系列有五篇:分别是  [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面  [二]jekyll 的使用 :主要是jekyll的配置  [三]Markdo ...