你不知道的CSS常用屬性(不斷更新,未完待續)
阿新 • • 發佈:2018-12-09
顏色
- HEX(16進位制色:color:#FFF000)。
- RGB(紅綠藍:color:rgb(255,255,0)或color:rgb(100%,100%,20%))。
- RGBA(紅綠藍透明度:color:rgba(255,255,0,0.5)。
- HSL(CSS3有效,H:色調,S:飽和度,L:亮度。color:hsl(360,100%,50%))。
- HSLA(和HSL相似,A表示Alpha透明度,取值0~1之間)。
- 全透明:color:transparent。
- filter:alpha(opacity:20)),只適用於早期的IE瀏覽器。
字型
- 字型大小(absolute-size):xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large。
- 字型大小(relative-size):相對於父標籤中字型尺寸進行調節:smaller、larger。
- 字型大小(percentage):百分比指定文字大小。
- 字型大小(length):長度值指定文字大小。
- 字型名稱:font-family:one、two、three。優先順序從前向後,如果系統中沒有當前字型,則往後尋找。
文字屬性
white-space:設定元素中空白的處理方式
- normal,預設。
- pre,保留空格,當文字超出邊界時不換行。
- nowrap,不保留空格,強制在同一行內顯示所有文字,直到文字結束或者碰到br標籤。
- pre-wrap,保留空格,當文字碰到邊界時換行。
- pre-line,不保留空格,保留文字的換行,當文字碰到邊界時換行。
direction:規定文字的方向
- ltr、rtl,文字從左到右和右到左。
vertical-align:文字所在行高的垂直對齊方式
- baseline,預設。
- sub,垂直對齊文字的下標,和標籤一樣的效果。
- super,垂直對齊文字的上標,和標籤一樣的效果。
- top,物件的頂端與所在容器的頂端對齊。
- text-top,物件的頂端與所在行文字的頂端對齊。
- middle,元素物件給予基線對齊。
- bottom,物件的底端與所在行的文字底部對齊。
- text-bottom,物件的底端與所在行文字的底端對齊。
text-indent:文字縮排。
letter-spacing:新增字母之間的空白。
word-spacing:新增每個單詞之間的空白。
text-transform:屬性控制文字的大小寫
- capitalize:文字中的每個單詞以大寫字母開頭。
- uppercase:全部大寫。
- lowercase:全部小寫。
text-overflow:文字溢位樣式
- clip:修剪文字。
- ellipsis:顯示省略號…代表被修剪的文字。
- string:使用給定的字串來代表被修剪的文字。
text-shadow:左右,上下,虛化,顏色;
word-wrap:break-word;自動換行。
列表屬性
list-style
- list-style-type:none去除、decimal-leading-zero;02、square方框、circle空心圓、upper-aph、disc實心圓。
- list-style-image:將影象設定為列表項標誌。
- list-style-position:inside、outside,列表項標誌的位置。
邊框屬性
border-radius簡寫
- 1個引數:四角。
- 2個引數:左上右下,左下右上。
- 3個引數:左上,左下右上,右下。
- 4個引數:左上、右上、右下、左下(順時針)