CSS文字樣式
阿新 • • 發佈：2020-10-20
一.字型樣式屬性
1.font-size：字號大小
2.font-family:字型
3.font-weight：字型粗細 {100的整數倍，值越大越粗}
4.font-style：字型風格 {italic 顯示斜體字型樣式}
5.@font-face規則：
@font-face{ font-family:字型名稱; src:字型路徑; }
二.文字外觀屬性
1.color:文字顏色
2.letter-spacing:字間距
3.word-spacing:單詞間距
4.line-height:行間距
5.text-transform:文字轉換
6.text-decoration:文字裝飾
7.text-align:水平對齊方式
8.text-indent:文字縮排
9.white-space:空白符處理
10.text-shadow:陰影效果
11.text-overflow:標誌物件內文字的溢位
[通過類選擇器展示]
.letter{
/*字間距*/letter-spacing:20px;
}
.word{
/*單詞間距*/word-spacing: 20px;
}
.line{
/*行高*/line-height: 5px;
}
.text{
/*文字轉換 首字母大寫*/text-transform: capitalize;
}
.decoration{
/*文字裝飾 下劃線*/text-decoration: underline;
}
.decoration1{
/*文字裝飾 刪除線*/text-decoration: line-through;
}
.ali{
/*水平方式對齊*/text-align: center;
}
.indent{
/*首航文字縮排*/text-indent: 10px;
}
.white{
/*空白符處理 normal空格空行無效(只顯示一個空格)*/white-space: normal;
}
.shadow{
/*設定文字陰影水平垂直距離，模糊半徑，顏色*/text-shadow: 10px 10px 5px red;
}
.overflow{
width: 100px;
height: 100px;
white-space: nowrap;/*強制文字不能換行*/
overflow: hidden;/*修剪溢位文字*/
text-overflow: ellipsis;/*用省略號標識被修剪文字*/
}
<body> <p style="font-style: oblique">傾斜樣式</p> <p style="font-style: italic">更常用的傾斜樣式</p> <p>你好世界 hello world</p> <p class="letter line">你好世界 hello world</p> <p class="word line text decoration decoration1">你好世界 hello world</p> <p class="decoration1">原價:199</p> <p class="decoration1 indent">原價:199</p> <h2 class="ali">居中對齊</h2> <p class="white">你好世界 hello world</p> <p class="shadow">你好世界 hello world</p> <p class="overflow">1111111111111111111111111111111111111111111</p> </body>