整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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，屬性便你手設置該屬性為它的默認值，并黑刃重復元素繼承該屬性。
轉向剛才你們看過了，在這我就演示一下繼承的效果?！秙t首先我將標簽(口誤)選擇器設置文本轉向，可這個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小時內與您取得聯系。
