-
div+css视频教程之css控制字间距和字母间距
我们在第2天的CSS教程中学习了字体及控制 文字字符的方法.今天我们将学习这些字 符、单词和每行的内容之间是如何定位 的。我们将学会如何设定字与字之间、字 母之间的距离,以及行距(垂直间距)、 文字的对齐方式、边距、边框及浮动要素 等,列表如下:
字间距
字母间距
行高
文字对齐方式
垂直对齐方式
文字缩位
顶边距、左边距等
空格填充-顶部、左边等等
边框-宽度、颜色、样式等
浮动
清除
很显然,今天我们要学很多东西,所以我 们得抓紧时间。让我们开始吧!
字间距
利用字间距属性,你可以在字之间加入更 多的距离:
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺 省设置,你可以使用我们昨天谈到的任何 一种长度单位:
in (英寸)
cm (厘米)
mm (毫米)
pt (点数)
pc (打字机字间距)
em (ems)
ex (x-height)
px (象素)
以下为显示结果:
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性,请 点击这里查看显示效果。
如果你看不到任何不同之处,则说明你的 浏览器不支持这种属性,只有MAC机用的IE 4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用,但 Communicator不行,唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似:其参 数值将被加入到浏览器的缺省设置中,你 可以使用上述任何一种长度单位。
如果你用的是IE 4,这里是一个例子:
Behold the power of cheese.
对于这两种属性,你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。
别沮丧,还有很多CSS属性可以在两种浏 览器上都可使用。下文中就是一个例子。
字间距
字母间距
行高
文字对齐方式
垂直对齐方式
文字缩位
顶边距、左边距等
空格填充-顶部、左边等等
边框-宽度、颜色、样式等
浮动
清除
很显然,今天我们要学很多东西,所以我 们得抓紧时间。让我们开始吧!
css控制字间距和字母间距
下面要学习的CSS属性可以使你做到HTML标签 做不到的事情:控制字间距及字母间距。字间距
利用字间距属性,你可以在字之间加入更 多的距离:
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺 省设置,你可以使用我们昨天谈到的任何 一种长度单位:
in (英寸)
cm (厘米)
mm (毫米)
pt (点数)
pc (打字机字间距)
em (ems)
ex (x-height)
px (象素)
以下为显示结果:
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性,请 点击这里查看显示效果。
如果你看不到任何不同之处,则说明你的 浏览器不支持这种属性,只有MAC机用的IE 4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用,但 Communicator不行,唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似:其参 数值将被加入到浏览器的缺省设置中,你 可以使用上述任何一种长度单位。
如果你用的是IE 4,这里是一个例子:
Behold the power of cheese.
对于这两种属性,你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。
别沮丧,还有很多CSS属性可以在两种浏 览器上都可使用。下文中就是一个例子。
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式