SS之文本方向。
CSS控件文本方向。免费少儿编程开课!同学们好!今天分享的知识是使用CSS来控制文本的方向,用到的是direction属性。你们应该对这个功能是有映像的。因为在讲HTML标签时讲过了bdo标签和他控制文本方向的属性dir,今天的课程和这bdo标签的效果是差不多的。
我先重点说一下它们的不同之外,如果你只是单纯的调整文学方向,建议你使用CSS标签。如果你不仅如此,还想要让设置公用建议使用CSS的direction属性,不仅如此,0会改变文学的对齐位置,而direction则在改变方向后还会将文字变为边界右对齐。就像这样,direction属性和bdo标签一样也有三个值:
·inherit跟随父标签的文本方向。rtl文本从左至右排列,而rtl文本从右至左排列。
·但是如果仅仅只是设置了direction的属性会发现文本并没有改变,那是因为我们还需要配合unicode-bidi属性,它通常和direction属性一起使用来设置或返回文本是否被重写,以便在同一文档中支持多种语言。unicodd一共有五个值:normal默认值==不使用附加的嵌入层面。
·便便创建一个附加的嵌入层面。tvbidi-ovemide创建一个附加的嵌入层面。重新排序取决于v文本initial,属性便你手设置该属性为它的默认值,并黑刃重复元素继承该属性。
转向刚才你们看过了,在这我就演示一下继承的效果。《st首先我将标签(口误)选择器设置文本转向,可这个div并没有任何转向设置。《sy但我设置了所有div标签都继承父元素的方向,所以div中的这个div继承了父标签转向设置,也就转向了。
就像这样,你们看看就得了。只需要记住一个unicode-bidi属性为bidi-ovemride时,文本方向才会改变。在现实编程中,很少会用到要改变文字左右方向的情况,就算用到了还是感觉bdo标签更好控制一些。
今天的分享就到这里,所有的案例及相关文档均可向我获取,下期见,想学编程点关注。
TML 文本格式化实例
此例演示如何在一个 HTML 文件中对文本进行格式化
标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong>定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>
HTML 文本格式化实例
果给你一些文本文字,要让它变得美,你将会采用什么方法?用过PPT的人都知道,可以调整颜色,可以设定字体,可以进行对齐、缩进等操作。这些在PPT中常用的方法,在CSS中也是很容易实现的,代码也简单。
在CSS中,设置文本颜色,用color属性,值可为16进制、一个RGB值或颜色名称。十六进制用#号开始,后接#RGB,比如 #ff0000;RGB值为rgb(255,0,51)形式;颜色名称名称直接就是英语单词,如red。
样色表ys2.css文件内容
body {
color:#00ff00;
}
h3 {
color:CadetBlue;
}
p {
color:rgb(0,0,255);
}
HTML文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了,还能找工作不?</h3>
<p>
昨晚七点多收到通知,说老板抽查了几次监控,发现一些人上班浑水摸鱼玩手机,
要召开紧急视频会议,<br/>
全体员工必须参会,视频里老板很生气,正火冒三丈的批评那些财务人员上班玩手机,
说再不多提升自己,<br/>
以后早晚被电脑和机器代替, 然后我忘记关麦了,说了句:机器能替你吃牢饭?<br/>
唉,也不知道年底了工作好不好找。</p>
</body>
</html>
输出结果
CSS字体属性定义字体,加粗,大小,文字样式。在用软件时,你是不是见过宋体什么的,没错,那个就是字体了。在CSS中,可以使用Font Family:"宋体"的方式指定字体;样式,就是加粗、倾斜那个,用font-style指定;大小则用font-size。
/* ys2.css里的样式表内容 */
.f {
font-family: "宋体";
/* 加粗 */
font-style: oblique;
font-size: 40px;
}
<!--html文件内容-->
<div class="f">
牛的程序员,羊一样的女孩
</div>
输出结果
文本在元素内水平对齐,可以使用 text-align: 值的方式,center居中对齐,left居左对齐,right居右对齐;垂直居中对齐,可用vertical-align和line-height结合的方式进行指定,这个平时会经常用到,记下来。
/*css文件里的内容*/
/*水平居中*/
.div-width {
width: 800px;
}
.txt-left {
text-align: left;
color: aquamarine;
}
.txt-center {
text-align: center;
color: darkcyan;
}
.txt-right {
text-align: right;
color: darkgreen;
}
/*垂直居中*/
.txt-vertical {
border: 2px solid green;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
<!-- HTML文件里的内容 -->
<div class="div-width">
<!--水平居中-->
<p class="txt-left">向左看齐</p>
<p class="txt-center">居中对齐</p>
<p class="txt-right">向右看齐</p>
<!--垂直居中-->
<div class="txt-vertical">垂直居中方法1</div>
<div>垂直居中方法2</div>
</div>
输出结果
如果要对标签进行水平居中的话,可以使用 margin: auto;用position: absolute; 属性来对齐元素的话,有些浏览器不支持,所以不推荐。
/* 在样式表文件中 */
.div-center {
margin: auto;
width: 50%;
border: 1px solid green;
height: 300px;
text-align: center;
vertical-align: center;
line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在,人海中间:div在Web居中,文字在div中居中</div>
输出结果
为了让阅读舒服,在进行文本排版之时,会考虑字与字之间的间距,有行与行之间的距离,还有段落的缩进等。在CSS中,字符间距可用letter-spacing:值;行间距依然用line-height:值;段落字符缩进,用text-indent即可。温馨提醒:text-indent只对div和p标签有效。
/* 在样式表文件中 */
.text-spacing {
width: 900px;
border: 1px solid green;
letter-spacing: 50px;
}
p.row {
line-height: 3.0em;
}
p.i {
/*em是相对单位,2em即现在一个字大小的两倍*/
text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
他说风雨中,这点痛算什么
</div>
<p class="row">
秋季降温快的特点,使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。<br/>
秋分棉花吐絮,烟叶也由绿变黄,正是收获的大好时机。华北地区已开始播种冬麦,<br/>
长江流域及南部广大地区正忙着晚稻的收割,抢晴耕翻土地,准备油菜播种。
</p>
<p class="i">
当我以为我无法继续走下去时,我强迫自己要继续前进。<br/>
我的成功是基于我的坚持,并非运气。<br/>
努力,是为了跳出你厌恶的圈子。<br/>
读书,是为了远离渣货垃圾人。<br/>
健身,是为了让讨厌的人心平气和...
</p>
输出结果
好了,有关CSS文本或元素对齐的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。
#前端##HTML5##CSS##程序员##Web#
*请认真填写需求信息,我们会在24小时内与您取得联系。