文档章节

图解 CSS (6): text - 文本格式

涂孟超
 涂孟超
发布于 2014/09/26 15:37
字数 480
阅读 10
收藏 0
点赞 0
评论 0
line-height
word-spacing
letter-spacing
text-align
vertical-align
text-indent
white-space
word-wrap
word-break
text-transform
direction
unicode-bidi
writing-mode
text-decoration
text-underline-position
text-justify

layout-flow
layout-grid
layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char
layout-grid-char-spacing 

已废弃的或测试失败的:
text-shadow
text-autospace
text-kashida-space

 
 
 
 
 

 

 

  

line-height(行高): normal(默认)、数值或百分比.



word-spacing(字间距): normal(默认)、数值或百分比.



letter-spacing(字符间距): normal(默认)、数值.



text-align(横向对齐): left(默认)、right、center、justify(两端对齐).






vertical-align(纵向对齐):
baseline(基线)、top、text-top、bottom、text-bottom、middle、sub(下标)、super(上标)、数值或百分比.

baseline 对齐是默认:


没看出 top 和 text-top 的区别:


bottom 和 text-bottom 应该差不多, 但 bottom 好像不对劲:


middle、sub、super:




还可以使用数值或百分比:



text-indent(段首缩进):


white-space: normal(默认)、pre(IE下无效)、nowrap(禁止自然换行).




word-wrap: normal(默认)、break-word(根据边界换行).




word-break(控制单词换行):
normal(默认, 换行是考虑英文单词边界)、
break-all(不管单词边界根据容器大小换行)、
keep-all(这个厉害, 容不下中文的一句话就换行; 句子是用空白和标点区分的).





text-transform(大小写控制): none(默认)、capitalize(首字母大写)、uppercase(全大写)、lowercase(全小写).






direction(ltr、rtl) 与 unicode-bidi(normal、bidi-override、embed)





writing-mode: lr-tb(默认)、tb-rl.




text-decoration: none、underline(下画线)、overline(上画线)、line-through(中画线)、blink(闪烁, IE 不支持).





text-underline-position: above、auto、auto-pos、below.
text-underline-position 存在的理由应该是让 text-decoration 画的线可以自定义位置, 但现在基本不可用.
只可以把 text-decoration: underline; 指定的下划线弄到上面去, 暂时有点多余.



text-justify: auto、inter-word、inter-ideograph、newspaper、distribute、distribute-all-lines.

这是关于文本两端对齐的更多控制, 需要先: text-align: justify;


没看出 auto、inter-word、inter-ideograph 有区别, 都似默认效果:


newspaper:


distribute:


distribute-all-lines:


:first-letter(单独给首字母定义样式)



:first-line(单独给首行定义样式)



layout-flow: horizontal、vertical-ideographic;




layout-grid-mode: both、line、char、none;
layout-grid-type: loose、strict、fixed;
layout-grid-line: none、auto、length;
layout-grid-char: none、auto、length;
layout-grid-char-spacing : auto、length;



使用 layout-grid 综合设置的顺序是:
layout-grid-mode、layout-grid-type、layout-grid-line、layout-grid-char、layout-grid-char-spacing.



本文转载自:http://www.cnblogs.com/del/archive/2009/01/30/1381450.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2004
码字总数 14107
作品 0
深圳
程序员
常见 MIME 类型

序号 内容类型 文件扩展名 描述 1 application/msword doc Microsoft Word 2 application/octet-stream bin dms lha lzh exe class 可执行程序 3 application/pdf pdf Adobe Acrobat 4 appl......

Koma ⋅ 2015/12/29 ⋅ 0

非常有用的 Markdown 编辑器和工具

Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,所以通过同一个名字它可以使用工具来转换成 HTML。readme 文件,在线论坛编写消息和快速创建富文本文档的文本编辑器都非...

oschina ⋅ 2014/04/02 ⋅ 25

各种Linux操作系统版本安装图解教程下载

以下链接如一时无法下载到请稍候再连接。 一般情况下都永久有效,保证能下载的。 红旗Linux图解安装教程 CHM 下载:ftp://FTP_hllinux:123456@211.95.73.26/linux/redflag6.chmPDF 下载:ftp...

zt371 ⋅ 2009/05/08 ⋅ 0

css入门教程资料(3)

七.控制文字的样式 控制文字的样式包括文字大小写、文字修饰两个部分。 1.文字大小写 文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

类似visio的拓扑图节点连线控件免费下载

Essential Diagram for Windows Forms是一款可扩展的、高性能的.NET平台下的拓扑图控件,可用于开发像Microsoft Visio一样的交互式地绘图和图解应用程序,在节点存储图形对象,支持矢量和光栅...

yidongkaifa ⋅ 2014/10/17 ⋅ 0

WEB前端开发规范

一、文件命名规范 images //图片资源,如果项目多人开发里面还需要用子文件夹分开 fonts //字体资源,一般就是特殊字体嵌入或者图标字体 styles //CSS文件 - app.css //reset样式,如果项目小...

他山之石 ⋅ 2014/09/07 ⋅ 0

CSS Text文本格式

text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented......

wybo521 ⋅ 2016/01/13 ⋅ 0

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4...

别叫小伙 ⋅ 2016/09/03 ⋅ 0

html5的新特性

1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: 在HTML5中,上面那种声明方式将失效。下面是HTML5中的声明方式: 2.脚本和链接无需type ...

happy圈圈 ⋅ 2014/04/11 ⋅ 0

CSS3.0学习笔记

#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链...

崔林 ⋅ 2013/06/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部