2018年1月9日 星期二

(CSS)段落文字縮排、凸排設定

text-indent 首行凸排
當要作凸排時，當把text-indent設成-4em時，表示向左靠，而em代表什麼意思呢?其實em與百分比有點像，它基準則取決於文字的尺寸，比方文字設15px，這時1em=15px，所以當前面要向前四個字，就可用4em，正負代表方向，當向左移4em，又用margin推4m，這時區塊大小，就由原來的400px變成460px，若希望讓區塊，還是保持400px時，就得將with設成340px，才能維持一樣的大小喔！才不會在那擠來擠去，造成版面的跑位。
梅問題-CSS教學－段落文字縮排與凸排設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>
</body>
</p>
</body>

text-indent 首行縮排
縮排就比剛的凸排,來的簡單許多，只要下text-indent，立即就可段落字的首向縮排，但在縮排時，寬度則不會受任何的影響，原來設定多少就是多少囉!
梅問題-CSS教學－段落文字縮排與凸排設定


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
p{
width:400px;
font-size:15px;
text-indent : 4em;

}
</style>

<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>



1
2
3
4
5
6
p { 
    font-size: 12px;　　　　　          /* 設定文字大小 */
    line-height: 24px;　　　          　/* 設定文字行距 */
    letter-spacing: 3px;　            　/* 設定文字間距 */
    background-image: url(dot.gif); /* 設定文字背景圖  */
}

來源:https://www.minwt.com/webdesign-dev/css/5383.html

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)