文字樣式與文字樣式
阿新 • • 發佈：2020-12-30
文字樣式與文字樣式
font簡寫屬性
簡寫順序
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
font-size和font-family的值是必需的。如果缺少了其他值，預設值將被插入，如果有預設值的話。
CSS字型屬性定義字型，加粗，大小，文字樣式、行高。
font-style字型樣式
常用的有normal、italic
| 值 | 描述 |
|---|---|
| normal | 預設值。瀏覽器顯示一個標準的字型樣式。 |
| italic | 瀏覽器會顯示一個斜體的字型樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字型樣式。 |
| inherit | 規定應該從父元素繼承字型樣式。 |
font-variant
把小寫字母變成大寫字母，但是字號比普通大寫字母小。
font-variant: small-caps;
font-weight 字型粗細
常用的有normal（400）、bold（700）
| 值 | 描述 |
|---|---|
| normal | 預設值。定義標準的字元。 |
| bold | 定義粗體字元。 |
| bolder | 定義更粗的字元。 |
| lighter | 定義更細的字元。 |
| 100-900 | 定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。 |
| inherit | 規定應該從父元素繼承字型的粗細。 |
font-size 字型大小
設定不同的HTML元素的字型大小：
| 值 | 描述 |
|---|---|
| length | 設定為一個固定的值。單位px |
| % | 設定為基於父元素字型大小的一個百分比值 |
| inherit | 繼承父元素的字型大小 |
line-hight(行高)
一行文字實際佔有的高度。
設定行高，字號時，一般設定為偶數。這樣可以保證，他們的差一定是偶數，方便計算與居中。
特殊用法;要讓一行文字在盒子中垂直居中，可以讓行高等於盒子高。【只適用於單行文字。】
| 表達方式 | px、百分比、em |
|---|---|
| px | 畫素值 |
| 百分比 | 參照字型大小 |
| em | 參照字型倍數 |
font-family 字型款式
設定字型格式
| 值 | 描述 |
|---|---|
| 引號加字型名稱，中間用逗號隔開 | “宋體” ，“華文行楷” |
| inherit | 規定應該從父元素繼承字體系列。 |
CSS文字樣式（text）
| 屬性 | 描述 |
|---|---|
| color | 設定字型顏色 |
| direction | 設定文字方向。 |
| letter-spacing | 設定字元間距 |
| line-height | 設定行高 |
| text-align | 對齊元素中的文字 |
| text-decoration | 向文字新增修飾 |
| text-indent | 縮排元素中文字的首行 |
| text-shadow | 設定文字陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設定或返回文字是否被重寫 |
| vertical-align | 設定元素的垂直對齊 |
| white-space | 設定元素中空白的處理方式 |
| word-spacin | 設定字間距 |
主要介紹一下常用的幾種屬性
color屬性
文字顏色
| 值 | 描述 |
|---|---|
| ＃FF0000 | 十六進位制值顏色 |
| 如: RGB(255,0,0) | 一個RGB值 |
| red、blue、black | 顏色的名稱 |
text-align文=文字對齊
文字對齊方式
| 值 | 描述 |
|---|---|
| left | 把文字排列到左邊。預設值：由瀏覽器決定。 |
| right | 把文字排列到右邊。 |
| center | 把文字排列到中間。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
text-decoration下劃線，上劃線等等
text-decoration 屬性是以下三種屬性的簡寫：
- text-decoration-line
- text-decoration-color
- text-decoration-style
text-decoration: 1px line-through red;
文字修飾，下劃線，刪除線，上劃線等等。
| 值 | 描述 |
|---|---|
| none | 預設。定義標準的文字。 |
| underline | 定義文字下的一條線。 |
| overline | 定義文字上的一條線。 |
| line-through | 定義穿過文字下的一條線。 |
| blink | 定義閃爍的文字。 |
| inherit | 規定應該從父元素繼承 text-decoration 屬性的值。 |
text-indent文字縮排
文字縮排。
| 值 | 描述 |
|---|---|
| px | 縮排幾畫素 |
| -20px | 縮排前邊的字元，文字向左移動 |
| +20px | 縮排右邊的字元。文字向右移動 |
| % | 定義基於父元素寬度的百分比的縮排。 |
| inherit | 規定應該從父元素繼承 text-indent 屬性的值。 |
單行文字省略號與多行文字省略號 text-overflow
單行文字省略號
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文字省略號
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
| 值 | 描述 |
|---|---|
| clip | 修剪文字。 |
| ellipsis | 顯示省略符號來代表被修剪的文字。 |
| string | 使用給定的字串來代表被修剪的文字。 |
white-space換行
- nowrap不換行
- wrap 換行
word-wrap
允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，
不夠的話就進行單詞內的斷句
.breakword {
word-wrap: break-word;
}
斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句
.breakAll {
word-break: break-all;
}
word-spacing 字型間距
設定字間距 這裡是英文字母的間距，對中文無效。
<style>
p{
font-size: 24px;
background-color: aquamarine;
/* 單詞間距，單位是px 對於中文無效。 */
word-spacing: 24px;
}
/* div{
width: 100px;
height: 500px;
background-color: aquamarine;
} */
</style>
<!-- 單詞間距 -->
<p>三 十 功 名 塵 與 土，八 千 裡 路 雲 和 月</p>
<p>When I wake up in the morning，You are all I see;</p>
<!-- <div>
lgkahg olahkglk shgs go
</div> -->
letter-spacing屬性
設定中文字元間距，此時每個英文單詞被看作一個字元,可以設定負值
text-transform屬性
轉換英文字元大小寫
| 值 | 描述 |
|---|---|
| none | 預設。 |
| capitalize | 每個單詞首字母大寫 |
| uppercase | 字母全部大寫 |
| lowercase | 字母全部小寫 |
| inherit | 規定應該從父元素繼承 text-transform 屬性的值。 |
vertical-align垂直對齊
vertical-align 屬性設定一個元素的垂直對齊方式
下邊程式碼圖片可以自己隨便新增一個
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直對齊</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
img.top {vertical-align: top;}
img.bottom { vertical-align: bottom;}
</style>
</head>
<body>
<p>一個<img src="logo.png" width="270" height="50" />預設對齊的影象。</p>
<p>一個<img class="top" src="logo.png" width="270" height="50" /> text-top 對齊的影象。</p>
<p>一個<img class="bottom" src="logo.png" width="270" height="50" /> text-bottom 對齊的影象。</p>
</body>
</html>
| baseline | 預設。元素放置在父元素的基線上。 |
|---|---|
| sub | 垂直對齊文字的下標。 |
| super | 垂直對齊文字的上標 |
| top | 把元素的頂端與一行文字或者元素的頂部對齊 |
| text-top | 把元素的頂端與父元素字型的頂端對齊 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 使元素一行文字或者元素的的底部對齊。 |
| text-bottom | 把元素的底端與父元素字型的底端對齊。 |
| length | 將元素升高或降低指定的高度，可以是負數。 |
單行文字垂直居中，與多行文字垂直居中
1、利用padding,不給高度用padding 擠開
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
}
2、垂直居中 - 使用 line-height，文字居中
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文字有多行，新增以下程式碼: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
3、垂直居中 - 使用 position 和 transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}