IT兄弟连 HTML5教程 CSS3属性特效 文字排版
direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr。文字排版的参数说明如表1所示。
表1 CSS3文字排版参数说明
上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布。我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。
rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧,而且是在容器的右端。
我们可以通过dirction为段落文字进行排版。本例的段落文字默认是从左向右排版,当鼠标移入该元素时改变排版方向变为从右向左排版,当鼠标移开是恢复从左向右排版。代码如下所示:
使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,段落文字默认从左向右排版,如图1所示。
图1 文字从左向右排版
当鼠标移入到段落元素时,段落文字变为从右向左排版,如图2所示。
图2 文字从右向左排版
IT兄弟连 HTML5教程 CSS3属性特效 文字排版的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字阴影
文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1 CSS3文字阴影参数说明 横向偏移量和纵向偏移量可 ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 自定义文字
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的 ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- IT兄弟连 HTML5教程 CSS3属性特效 倒影
在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
随机推荐
- df命令、du命令、磁盘分区 使用介绍
第4周第1次课(4月9日) 课程内容:4.1 df命令4.2 du命令4.3/4.4 磁盘分区 4.1 df命令 汇报磁盘空间使用情况,linux磁盘挂载点是无法直接访问的. df 和 df -h区别 ...
- 监控io性能、free、ps命令、查看网络状态、Linux下抓包 使用介绍
第7周第2次课(5月8日) 课程内容: 10.6 监控io性能 10.7 free命令10.8 ps命令10.9 查看网络状态10.10 linux下抓包扩展tcp三次握手四次挥手 http://ww ...
- Layui下拉3级联动
这里我就不给大家详细说明了直接附图: js代码: layui.use(['layer', 'form','xform','layer'], function () { var element = la ...
- 揉碎HTTP编码过程,从此不乱码
老生常谈之HTTP乱码问题 最后的结论? 对于get请求 在Servlet中调用request.setCharacterEncoding()设置编码是没有意义的不管你使用任何编码方式对于你的数据解码没 ...
- Docker数据挂载
Docker数据管理 在容器中管理数据主要有两种方式: 数据卷(Volumes) 挂载主机目录(Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很 ...
- Java修炼——文件夹的复制
文件夹的复制用到了俩个流:缓冲流和文件字节流 缓冲流用来加快写入和读取速度. 在这里我简述一下复制文件夹的过程,当然复制文件夹都可以,复制文件更是不在话下 1.首先要明确俩点.要复制的文件夹的位置(源 ...
- CodeForces-Round524 A~D
A. Petya and Origami time limit per test 1 second memory limit per test 256 megabytes input stan ...
- 无向图的桥+搜索优化--UESTC1956-北极的猴子
北极的猴子 Time Limit: 1000 MS Memory Limit: 256 MB Submit Status 也许你不知道,在北极也有猴子,我们叫它们北极猴.北极猴们在北极一共有n ...
- Python实现截图功能你肯定不会吧?【面试必学】
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:CyborgLin python实现截图功能. windows环境下.需 ...
- Appium之实操(了解配置项)
使用Appium,测试对象APP的运行环境有两种:① 真实设备 如手机 ②模拟器 如夜神 连接真实设备: - 进入开发者模式,启动usb调试 - 在电脑上 执行adb命令 adb devices ...