在前面我們一起將HTML的基礎知識學習完了,我想你應該知道怎麼寫基礎的HTMl代碼了,那麼接下來從今天開始,我們一起來學習CSS的基礎部分,如果你還不知道前面的HTML的基礎知識,請到文章底部點擊【相關文章】裡面的內容進行學習。有什麼可以後臺留言交流學習。
CSS文字 - font 屬性
CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。
font 簡寫屬性 在一個聲明中設置所有字體屬性。
這個簡寫屬性用於一次設置元素字體的兩個或更多方面。
使用 icon 等關鍵字可以適當地設置元素的字體,使之與用戶計算機環境中的某個方面一致。
注意,如果沒有使用這些關鍵詞,至少要指定字體大小和字體系列。
可以按順序設置如下屬性:
font-style font-variant font-weight font-size/line-height font-family
如下代碼:
.ex2{font:italic bold 12px/20px
arial,sans-serif;}
頁面上顯示為 F2E.TMING
還有一些屬性也可以寫font裡,如下:
caption icon menu small-caption status-bar
font-family 規定元素的字體系列。
font-family 可以把多個字體名稱作為一個「回退」系統來保存。
如果瀏覽器不支持第一個字體,則會嘗試下一個。
有兩種類型的字體系列名稱:
1) 指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
2) 通常字體系列名稱:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
p{ font-family:"Times New Roman",Georgia,
Serif; }
提示:使用逗號分割每個值,並始終提供一個類族名稱作為最後的選擇。
CSS文字 - font-size 屬性font-size 屬性可設置字體的尺寸。
font-size屬性有3種值的方式:(比較常用的)
1) length
把 font-size 設置為一個固定的值。如:p{font-size:14px;}
2) %
把 font-size 設置為基於父元素的一個百分比值。如:p{font-size:50%;}
3) inherit
規定應該從父元素繼承字體尺寸。如:p{font-size:inherit;}
font-style 屬性定義字體的風格。
font-size屬性有4種值:
1) normal
默認值。瀏覽器顯示一個標準的字體樣式。如:p.normal{font-style:normal;}
頁面上顯示為 F2E.TMING
2) italic
瀏覽器會顯示一個斜體的字體樣式。如:p.italic{font-style:italic;}
頁面上顯示為 F2E.TMING
3) oblique
瀏覽器會顯示一個傾斜的字體樣式。如:p.oblique{font-style:oblique;}
頁面上顯示為 F2E.TMING
4) inherit
規定應該從父元素繼承字體樣式。如:p.inherit{font-style:inherit;}
頁面上顯示為 F2E.TMING
font-weight 屬性設置文本的粗細。
使用 bold 關鍵字可以將文本設置為粗體。
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。
如果一個字體內置了這些加粗級別,那麼這些數字就直接映射到預定義的級別,100 對應最細的字體變形,900 對應最粗的字體變形。
數字 400 等價於 normal,而 700 等價於 bold。
p{font-weight:100;}p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}
頁面上顯示為提示:如果將元素的加粗設置為 bolder,瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反,關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。
CSS文字 - font-variant 屬性font-variant 屬性可以設定小型大寫字母。
小型大寫字母不是一般的大寫字母,也不是小寫字母,這種字母採用不同大小的大寫字母。
p{font-variant:small-caps;} 頁面上顯示為 aaaaa
text-decoration 屬性規定添加到文本的修飾。
text-decoration屬性有4種值:
1) none
默認。定義標準的文本。如:p.none{text-decoration:none;}
頁面上顯示為 F2E.TMING
2) underline
定義文本下的一條線。如:p.underline{text-decoration:underline;}
頁面上顯示為 F2E.TMING
3) overline
定義文本上的一條線。如:p.overline{text-decoration:overline;}
頁面上顯示為 F2E.TMING
4) line-through
定義穿過文本下的一條線。如:p.line-through{text-decoration: line-through;}
頁面上顯示為 F2E.TMING
5) blink
定義閃爍的文本。如:p.blink{text-decoration:blink;}
頁面上顯示為 F2E.TMING
6) inherit
規定應該從父元素繼承 text-decoration 屬性的值。如:p.inherit{text-decoration:inherit;}
頁面上顯示為 F2E.TMING
text-underline-position 屬性線條在文本的位置。該屬性有2種值:
1) below
默認值。在文本下面。如:p.below{text-underline-position :below;text-decoration:underline;}
頁面上顯示為 F2E.TMING
2) above
在文本上面。如:p.above{text-underline-position :above;text-decoration:underline;}
頁面上顯示為 F2E.TMING
text-shadow 屬性給文本添加陰影效果。
語法:p{text-shadow: h-shadow v-shadow blur color;}
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。
p{ text-shadow: 5px 5px 5px #FF0000; }
text-transform 屬性控制文本的大小寫。該屬性有4種值:
1) none
默認。定義帶有小寫字母和大寫字母的標準的文本。如:p{text-transform:none;}
頁面上顯示為 flash
2) capitalize
文本中的每個單詞以大寫字母開頭。如:p{text-transform:capitalize;}
頁面上顯示為 Flash
3) uppercase
定義僅有大寫字母。如:p{text-transform:uppercase;}
頁面上顯示為 FLASH
4) lowercase
定義無大寫字母,僅有小寫字母。如:p{text-transform:lowercase;}
頁面上顯示為 flash
line-height 屬性設置行間的距離(行高)。
注釋:不允許使用負值。
1) normal
默認。設置合理的行間距。如:p{line-height:normal;} ,頁面上顯示為
flash
flash
2) number
設置數字,此數字會與當前的字體尺寸相乘來設置行間距。如:p{line-height:1.2;},頁面上顯示為
flash
flash
3) length
定義僅有大寫字母。如:p{line-height:20px;},頁面上顯示為
flash
flash
4) %
基於當前字體尺寸的百分比行間距。如:p{line-height:100%;},頁面上顯示為
flash
flash
letter-spacing 屬性增加或減少字符間的空白(字符間距)。
注釋:允許使用負值,這會讓字母之間擠得更緊。
p{ letter-spacing:2px; }
頁面上顯示為flashflashp{ letter-spacing:-5px; }
頁面上顯示為flashflashCSS文字 - word-spacing 屬性letter-spacing 屬性增加或減少單詞間的空白(即字間隔)。
注釋:允許使用負值,這會讓字母之間擠得更緊。
p{ word-spacing:25px; }
頁面上顯示為flash flash相關文章
【教程】html+css零基礎入門教程(一)
【教程】html+css零基礎入門教程(二)
【教程】html+css零基礎入門教程(三)
【教程】html+css零基礎入門教程(四)
【教程】html+css零基礎入門教程(五)
【教程】html+css零基礎入門教程(六)
【教程】html+css零基礎入門教程(七)
【教程】html+css零基礎入門教程(八)