WEB前端第十課——CSS字型、文字、列表屬性
1.字型屬性
color,規定文字的顏色,如 div{color:red;}
font-style,規定文字顯示方式,如 p.normal {font-style: normal;} ,有normal(正常顯示)、italic(斜體顯示,字型結構有一定變化)、oblique(傾斜顯示,僅僅是文字的傾斜版本)
font-variant,設定小型大寫字母,小型大寫字母不同於一般的大寫字母,也不是小寫字母,例項 p {font-variant: small-caps; },屬性值:normal(預設值)、small-caps(小型大寫字母)、inherit(從父元素繼承)
font-weight,設定文字字型粗細,包含4個屬性值:normal(正常,預設值)、bold(粗體)、bolder(更粗)、lighter(更細),還可以設定“100~900”9個數字等級,400相當於normal,700相當於bold
font-size,設定文字字型大小,如div {font-size: 30px; },畫素(pixels)通常作為設定絕對大小的單位,em則作為設定相對大小的單位,瀏覽器預設的文字字型大小是16px=1em
font-family,定義文字的字型類別,如h1 {font-family:宋體, serif;},為了防止使用者代理上沒有安裝設定字型,可以通過使用特定字型名 +serif通用字體系列的方式來解決這個問題
類似於background簡寫,也可以使用font簡寫
但不同於background簡寫的是,書寫font簡寫的屬性值必須嚴格按照官方規定的順序(上述列示的順序,color不屬於font屬性),同時size屬性值和family屬性值必須有
2.letter-spacing,設定字元間距,例項:div {letter-spacing: 3px; }
3.opacity,針對整個元素設定顏色透明度(包括文字、背景等),屬性值範圍為“ 0~1 ”,1為不透明,0為完全透明,和rgba中的“a”作用相同類似
4.overflow,設定內容溢位元素框時顯示方式,通過設定屬性值控制,visible(預設值,內容不會被處理,溢位顯示)、hidden(隱藏)、auto(自動,溢位時顯示滾動條)、scroll(顯示滾動條)
5.text-overflow,設定文字溢位包含元素時的顯示方式,屬性值:clip(修剪文字)、ellipsis(顯示省略號來代表被修剪的文字)、string(使用給定字串代表被修剪的文字)
6.white-space,設定如何處理元素內的空白和換行
屬性值:
normal,空白和換行符會被瀏覽器忽略
pre,空白和換行符會被瀏覽器保留
nowrap,文字在同一行顯示,不會換行
pre-wrap,保留空白符,但正常進行換行(保留換行符和自動換行)
pre-line,合併空白符,但保留換行符
inherit,從父元素繼承white-space屬性值
7.text-align,文字對齊方式,屬性值:left、center、right,例項:p {text-align: center; }
8.text-decoration,規定文字有無裝飾,屬性值:none(預設,無)、underline(文字裝飾下劃線)、overline(文字裝飾上劃線)、line-through(文字裝飾貫穿線,類似刪除線)、blink(文字閃爍)
9.text-transform,設定文字中字母大小寫,屬性值:none(預設,無)、capitalize(將每個單子的首字母轉換成大寫)、uppercase(全部字母轉換成大寫)、lowercase(全部字母轉換成小寫)
10.text-indent,設定首行文字縮排,屬性值為數字,例項:p {text-indent: 2em; },屬性值使用畫素(px)也可以
11.Word-wrap,設定當前行超過指定容器的邊界是是否換行,屬性值:normal(預設,只在允許的斷字點換行)、break-Word(在長單詞或URL地址內部進行換行)
12.vertical-align,設定文字的垂直對齊方式,是容器中元素相對於父元素中內容的對齊方式,
常用屬性值:top(頂端對齊)、middle(居中對齊)、bottom(底端對齊)、super(垂直對齊文字上標)、sub(垂直對齊文字下標)
測試程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css匯入</title> <style> div{ width: 500px; height: 300px; background-color: aquamarine; } a{ display: inline-block;height: 150px; width: 100px; background-color: blanchedalmond; vertical-align:bottom; margin: 3em 0em 0em 0em; } </style> </head> <body> <div> 測試vertical-align垂直對齊方式 <a href="">空連結</a> </div> </body> </html>
測試效果:
13.line-height,設定物件的行高(不允許使用負值),屬性值:normal(預設)、number(設定數字,此數字會與當前字型尺寸相乘來設定行間距/行高)、length(設定固定值行間距)
我們一般用行高來使一行文字垂直居中,當行高等於容器高度時,文字垂直居中
14.list-style-image,設定列表項標記的影象(專案符號),只有一個用於引導圖片的url屬性,語法:ul {list-style-image: url("markimg.jpg"); }
整體專案符號重置需作用於<ul>,單個設定則作用於<li>上
15.list-style-position,設定列表項標記與文字內容如何排列,屬性值:outside(預設,專案符號放在文字以外)、inside(專案符號放在文字以內),語法:ul {list-style-position: inside; }
16.list-style-type,設定列表項所使用的預設標記(效果與HTML中ul行內屬性style類似),屬性值:none(無符號)、disc(實心圓)、circle(空心圓)、square(實心方塊),語法:ul {list-style-type:disc; }
17.list-style簡寫,將之前幾個屬性合併為一個複合屬性,通過“list-style”一個屬性就可以定義幾種屬性值,屬性值的書寫順序(非嚴格):list-style-image list-style-position list-style-type
語法例項:ul {list-style: url ("markimg.jpg") outside disc; },前面設定了圖片,最後還要設定專案符號的目的是,如果圖片未能正常顯示,可以有專案符號來代替