CSS系列:CSS文字样式
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文字样式的更多相关文章
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- CSS之常见文字样式整理
常见文字样式 行高:line-height,当我i们将行高的大小设置成当前元素的高度时,可以实现当行文本在当前元素中垂直方向居中显示的效果 水平对齐方式:text-align:left|center| ...
- 【前端Talkking】CSS系列——CSS深入理解之line-height
1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS/Compass修改placeholder的文字样式
在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...
- CSS Font文字样式
font-style: /* 文字样式 italic(倾斜) | normal */ font-weight: /* 文字是否加粗 bold | normal(正常) */ font-size: /* ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
随机推荐
- 《转》Unity3D研究院之UGUI一个优化效率小技巧
无意间发现了一个小技巧.如下图所示,可以发现UGUI的Image组件的RaycastTarget勾选以后会消耗一些效率,为了节省效率就不要勾选它了,不仅Image组件Text组件也有这样的问题. 一般 ...
- 代码中使用StoryBoard和DoubleAnimation的方法
TranslateTransformを対象に.DoubleAnimation型のアニメーションを使用して.TranslateTransform.Xプロパティを ”-1 * Imageコントロールの幅” ...
- 双向链表、双向循环链表的JS实现
关于链表简介.单链表.单向循环链表.JS中的使用以及扩充方法: 单链表.循环链表的JS实现 关于四种链表的完整封装: https://github.com/zhuwq585/Data-Structu ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
- 插头dp
插头dp 感受: 我觉得重点是理解,算法并不是直接想出怎样由一种方案变成另一种方案.而是方案本来就在那里,我们只是枚举状态统计了答案. 看看cdq的讲义什么的,一开始可能觉得状态很多,但其实灰常简单 ...
- Ubuntu安装Oracle SQLDeveloper
1、下载Oracle安装文件 这里我下载的是Linux RPM版本,文件名为sqldeveloper-4.0.3.16.84-1.noarch.rpm http://www.oracle.com/te ...
- Tomcat7安装配置 for Ubuntu
一.环境说明: 操作系统:Ubuntu 12.04.2 LTS Tomcat:apache-tomcat-7.0.52 二.下载 下载地址:http://tomcat.apache.org/ 这里下载 ...
- MongoDB 由于目标计算机积极拒绝,无法连接 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errno:10061
转载自:http://www.cnblogs.com/xiaoit/p/3867573.html 1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: F ...
- Akka-actor使用入门
学习scala编程,不可避免的会接触到actor模式,它使得并发编程不再像噩梦般萦绕着开发者,Akka是actor的一个开源实现.由于本人水平有限,自认为还不能把actor设计思想讲明白,所以本文仅仅 ...
- BOM对象有哪些:
BOM对象有哪些: 1.window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性: 2.document对象,文档对象: 3.location对象,浏览器当前URL信息: 4 ...