css基礎——字型文字樣式基礎總結
阿新 • • 發佈：2021-02-04
一、font相關屬性
1、font-family 指定字型
- 可以為文字指定多個字型，不同字型間用“，”隔開，如果前面的字型和電腦字型匹配就使用前面的。如果都沒有匹配用系統預設的字型。
- 字型名字中間有空格的，要用雙引號引起來。
- 建議用國際用法 英文形式。
- 中文正文建議用宋體 微軟雅黑，黑體。
相關程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文字屬性</title>
<style 結果展示
2、font-size 字型大小
多用px/em單位。
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文字屬性</title>
<style type="text/css">
.p1{font-size: 48px;}
}
</style>
</head>
<body>
<p class="p1" 結果展示：
3、font-style 字型傾斜效果
- normal不傾斜、oblique和italic傾斜
- Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜！
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style type="text/css">
.h1{font-style: normal;}
.h2{font-style: oblique;}
</style>
</head>
<body>
<h1 class="h1">文字樣式 normal</h1>
<h1 class="h2">文字樣式 italic</h1>
</body>
</html>
結果展示
4、font-weight 字型粗細
- 大多瀏覽器可以實現：正常和加粗效果。
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style type="text/css">
.w1{font-weight: 100;}
.w2{font-weight: 900;}
.w3{font-weight: normal;}
.w4{font-weight: lighter;}
.w5{font-weight: bold;}
.w6{font-weight: bolder;}
</style>
</head>
<body>
<h2 class="w1">文字粗細100</h2>
<h2 class="w2">文字粗細900</h2>
<h2 class="w3">文字粗細 normal</h2>
<h2 class="w4">文字粗細 lighter</h2>
<h2 class="w5">文字粗細 bold</h2>
<h2 class="w6">文字粗細 bolder</h2>
</body>
</html>
結果展示
文字的簡寫
上面的程式碼寫起來都有些繁瑣，為了書寫方便，給大家準備了一種簡寫方式，必須要按順序寫啊！！
font：樣式 粗細 大小/行高 字型家族
font:italic bold 48px/100px 'simsun‘
二、text相關屬性
1、text-transform 文字轉換
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text相關</title>
<style type="text/css">
.p1{text-transform: capitalize;}
.p2{text-transform: lowercase;}
</style>
</head>
<body>
<h1>文字轉換</h1>
<p class="p1">text-transform</p>
<p class="p2">captalize 首字母大寫 uppercase lowercase</p>
</body>
</html>
結果展示
2、text-decoration 文字裝飾
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text相關</title>
<style type="text/css">
.p3{text-decoration: underline;}
.p4{text-decoration: overline;}
.p5{text-decoration: line-through;}
a{text-decoration: none;}
</style>
</head>
<body>
<h1>文字的裝飾線</h1>
<p class="p3">normal正常</p>
<p class="p4"> underline上劃線</p>
<p class="p5"> overline上劃線</p>
<p class="p4">line-through 刪除線</p>
</body>
</html>
結果展示
3、text-indent 文字縮排
段落內容首行縮排（懸掛縮排）
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text相關</title>
<style type="text/css">
.p0{text-indent: 2em;}
</style>
</head>
<body>
<h1>文字的首行縮排</h1>
<p>北國風光，千里冰封，萬里雪飄，北國風光，千里冰封，萬里雪飄北國風光，千里冰封，萬里雪飄
北國風光，千里冰封，萬里雪飄北國風光，千里冰封，萬里雪飄北國風光，千里冰封，萬里雪飄。</p>
</body>
</html>
結果展示
4、text-align 文字對齊
- left 左
- right 右
- center 中
- justify 兩端強制對齊，最後一行左對齊
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prc{
text-align: center;}
</style>
</head>
<body>
<p class="prc">北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光</p>
</body>
</html>
結果展示
三、字詞間距
1、英文文字
letter-spacing 字母和字母間距 : normal / 數值
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prc{
letter-spacing: 3px;
}
</style>
</head>
<body>
<p class="prc">text-align:center|left|right|justify</p>
</body>
</html>
結果展示：
2 中文文字
word-spacing 單詞和單詞間距
letter-spacing 字和字之間的間距
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prc{word-spacing: 10px;
letter-spacing: 3px;}
</style>
</head>
<body>
<p class="prc">北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光</p>
</body>
</html>
結果展示
3、行間距
line-height:1.5 行間距1.5倍
設定行高，文字有且只有一行，文字垂直居中
vertical-align:middle 垂直居中
相關程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.prc{ line-height: 1.5;}
.myp{
line-height: 50px;background-color: gold;
</style>
</head>
<body>
<p class="prc">北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光北國風光北國風光北國風光北國風光北國風光
北國風光北國風光北國風光</p>
<P class="myp">justify 兩端強制對齊 最後一行左對齊</P>
</body>
</html>
結果展示
四、文字溢位
white-space:nowrap文字不換行
相關程式碼
white-space:nowrap
overflow內容溢位（內容超過限定的寬高）
visible可見
auto自動（超過了出現滾動條）
scroll不管是否超過都出現滾動條
hidden 超過隱藏
相關程式碼
overflow: hidden;
overflow: visible;
overflow: auto;
overflow: scroll;
text-overflow 文字溢位
clip 截斷
ellipsis 行尾三個小點
相關程式碼
text-overflow: ellipsis;
text-overflow: clip;
結果展示
最後來給大家加一個小彩蛋！！！
我們在寫程式碼的時候經常要改顏色，那顏色的寫法有哪些呢？
rgb顏色在CSS中的表達方式
-
直接使用顏色的英文單詞，如red
注意：很多瀏覽器不支援顏色的單詞表示
-
使用三色的數值，如rgb(120,222,100)
注意：數值在0~255之間
-
使用三色的百分比，rgb(10%,20%,100%)
下面個大家列舉幾個常用顏色：
red rgb(255,0,0)
blue rgb(0,0,255)
black(0,0,0)
green rgb(0,255,0)
white rgb(255,255,255) -
使用三色數值的十六進位制，如#0000ff
注意：推薦使用這種方式，十六進位制值前加#
常用顏色：
red #ff0000 #f00
blue #0000ff #00f
black #000000 #000
green #00ff00 #0f0
white #ffffff #fff
今天關於字型文字的分享就到這裡，希望對大家有所幫助，下一次我們分享盒子模型。