码迷,mamicode.com
首页 > Web开发 > 详细

IT兄弟连 HTML5教程 CSS3属性特效 文字排版

时间:2019-11-14 09:40:47      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:打开   css3   dom   文字   鼠标   容器   nbsp   https   alt   

技术图片

 

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属性特效 文字排版

标签:打开   css3   dom   文字   鼠标   容器   nbsp   https   alt   

原文地址:https://www.cnblogs.com/itxdl/p/11854660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!