1.字體屬性 color,規定文本的顏色,如 div{color:red;} font-style,規定文本顯示方式,如 p.normal {font-style: normal;} ,有normal(正常顯示)、italic(斜體顯示,字體結構有一定變化)、oblique(傾斜顯示,僅僅是文本的傾 ...
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; },前面設置了圖片,最後還要設置項目符號的目的是,如果圖片未能正常顯示,可以有項目符號來代替