Css基本樣式————文字

科技小能手發表於2017-11-12
CSS

一、CSS文字屬性可定義文字外觀


二、通過文字屬性，可以改變文字的顏色、字元間距、對齊文字、裝飾文字、對文字縮排


三、常用屬性：

    color        文字顏色

1
2
3
4
5
6
body{
    color: aqua;
}
<body>
    <p>檢視顏色</p>
</body>

這裡給body設定color,在p標籤中可以看到效果

說明color這個屬性是可以繼承的

    direction        文字方向

    line-height        行高

    letter-spacing        字元間距

    text-align        對齊元素中的文字

1
2
3
4
5
6
7
p{
    color: red;
    text-align: right;
}
<body>
    <p>Hello World</p>
</body>

    text-decoration        向文字中新增修飾

    text-indent        縮排元素中文字的首行

1
2
3
4
5
6
7
8
9
10
11
12
h3{
    text-indent: 2em;
}
<body>
    <div>
        <h3>靜夜思</h3>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>舉頭望明月</p>
        <p>低頭思故鄉</p>
    </div>
</body>

也可以按百分比縮排

    text-transform        元素中的字母

1
2
3
4
5
6
7
8
9
10
p{
    text-transform: capitalize;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

capitalize:把所有單詞的首字母大寫

lowercase：全部變小寫

uppercase：全部變大寫

inherit(中文意思為“繼承”):預設方式（不改變原文內容）

    unicode-bidi        設定文字方向

    white-sapce        元素中空白的處理方式

    word-spacing        字間距


四、CSS3文字效果：

    text-shadow:向文字新增陰影

1
2
3
4
5
6
7
8
9
10
p{
    text-shadow: 5px 5px 5px #FF0000;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

text-shadow需要設定4個值

第一個值：相對於原本文字距左的距離

第二個值：距當前文字上方的位置

第三個值：清晰度

第四個值：背景顏色

    word-wrpa:規定文字的換行規則

1
2
3
4
p{
    width: 100px;
    text-wrap: normal;
}

width:100px;    設定p元素整體寬度為100

text-wrap:normal;    自動換行

此外還有一個功能

如果<p></p>內寫的是英文，”text-wrap”這個屬性不會把當前的文字本文轉自yeleven 51CTO部落格，原文連結:http://blog.51cto.com/11317783/1771941



相關文章