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系列教程1-选择器全解

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

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

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

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

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

  4. 没人看系列----css 随笔

    目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠 ...

  5. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  6. CSS系列目录

    1.  在HTML中引入CSS的方法 2.  CSS选择器 2.1 CSS3新增选择器 3.  CSS的继承与层叠特性 4.  CSS中盒子模型 5.  CSS中盒子之间的关系 6.  CSS中盒子的 ...

  7. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  8. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  9. (原)前端知识杂烩(css系列)

    更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+ ...

  10. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

随机推荐

  1. 【技术贴】大型发布会现场的WiFi网络应该如何搭建?

    WiFi网络的部署要远远比一般人想象的复杂,不是说放上几十个AP带宽就自动增加几十倍,恰恰相反,简单放几十个AP带宽会由于AP之间的竞争而 迅速使带宽下降为几乎不可用.实际上这个问题完全可以写一本书了 ...

  2. JAVA字符串的相关练习

    /*String s = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";//生成随机验证码 fo ...

  3. Ionic发布成android

    目前环境 1.ant的版本是1.9.4 2.jdk的版本是1.7 3.ionic安装版本是1.5.5 4.cordova版本是5.1.1 经测试,虽然ionic上面写的支持的最低版本是android- ...

  4. HBase应用开发回顾与总结系列之四:HBase配置管理类接口设计

      利用Eclipse进行HBase应用开发时,至少需要确定三个配置信息,如下表所示: #hbase config #HMaster服务部署主机及端口号 hbase.master=hdp-wuyong ...

  5. Excel For Java

    Excel 需要了解的东西 首先是Excel是一个文件 - File,工作簿 - workbook,sheet - sheet,单元格 - cell. 然后就根据Excel是一个什么东西来创建一个Ex ...

  6. 利用LruCache为GridView异步加载大量网络图片完整示例

    MainActivity如下: package cc.testlrucache; import android.os.Bundle; import android.widget.GridView; i ...

  7. 3G網絡容量和業務承載的壓力大大增加!

    在移動通信話音業務繼續保持發展的同時,對IP和高速數據業務的支持已經成為移動通信系統演進的方向.移動數據業務是推動目前移動通信技術發展的主要動力,TD-LTE作為準4G技術,以提高數據速率和頻譜利用率 ...

  8. .htaccess更改目录下的默认主页

    我们知道apache的配置文件httpd.conf可以配置网站目录的默认主页.配置文件该部分定义如下: #DirectoryIndex: sets the file that Apache will ...

  9. Linux字符界面的优势

    优势一:字符界面占用的系统资源更少,更加适合服务器 优势二:字符界面减少了出错.被攻击的可能性(一.二决定了服务器一般不装图形界面,安全稳定优先)

  10. hbase常用命令总结

    创建表:表名:csliyb:testuser列族:name 例子:create 'csliyb:testuser','name','age' 添加记录: put 'csliyb:testuser',' ...