1. 程式人生 > >CSS文字(Text)屬性-----letter-spacing和text-align

CSS文字(Text)屬性-----letter-spacing和text-align

   letter-spacing

letter-spacing:normal | <length>  指定字元之間的額外間隙

  • normal:預設間隔。計算值為0
  • <length>:用長度值指定字元間隔。可以為負值
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style 
type="text/css"> .test p { /*邊框*/ border: 1px solid #000; } .normal p { letter-spacing: normal; color: #FF0000; } .length p { letter-spacing
: 10px; color: #0000FF; } </style> </head> <body> <ul class="test"> <li class="normal"> <strong>預設間隔</strong> <p>預設情況下的文字間間隔</p> </li>
<li class="length"> <strong>自定義的間隔大小</strong> <p>自定義的文字間隔大小Hello world</p> </li> </ul> </body> </html>

   text-align

text-align:start|end| left | right | center |justify|match-parent|justify-all  定義元素內容的水平對齊方式

  • left:內容左對齊
  • center:內容居中對齊
  • right:內容右對齊
  • justify:內容兩端對齊,但對於強制打斷的行(被打斷的這一行)及最後一行(包括僅有一行文字的情況,因為它既是第一行也是最後一行)不做處理
  • start:內容對齊開始邊界
  • end:內容對齊結束邊界
  • match-parent:這個值和inherit表現一致,只是該值繼承的startend關鍵字是針對父母的direction值並計算的,計算值可以是 left 和 right 
  • justify-all:效果等同於justify,不同的是最後一行也會兩端對齊
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .test p {
                border: 1px solid #000;
            }
            
            .left p {
                text-align: left;
            }
            
            .center p {
                text-align: center;
            }
            
            .right p {
                text-align: right;
            }
            
            .justify p {
                width: 200px;
                text-align: justify;
            }
            
            .start p {
                text-align: start;
            }
            
            .end p {
                text-align: end;
            }
        </style>
    </head>

    <body>
        <ul class="test">
            <li class="left">
                <strong>left</strong>
                <p>我是左對齊內容</p>
            </li>
            <li class="center">
                <strong>center</strong>
                <p>我是居中對齊內容</p>
            </li>
            <li class="right">
                <strong>right</strong>
                <p>我是右對齊內容</p>
            </li>
            <li class="justify">
                <strong>justify</strong>
                <p>我 是一段可以兩端對齊的文字, 你 仔細看看, 我 的對齊方式都貼著 容器左右的邊緣。</p>
            </li>
            <li class="start">
                <strong>start</strong>
                <p>start效果</p>
            </li>
            <li class="end">
                <strong>end</strong>
                <p>end效果</p>
            </li>
        </ul>
    </body>

</html>