本篇文章給大家帶來的內容是關於css外觀屬性有哪些?css外觀屬性的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。
CSS外觀屬性
color:文本顏色
color屬性用於定義文本的顏色,其取值方式有如下3種:
預定義的顏色值,如red,green,blue等。
十六進位,如#FF0000,#FF6600,#29D794等。實際工作中,十六進位是最常見的定義顏色的方式。
RGB代碼,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是,如果使用RGB代碼的百分比顏色值,取值為0時也不能省略百分比符號,必須寫為0%。
line-height:行間距
line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。line-height常用的屬性值單位有三種,分別為像素px,相對值em和百分比%,實際工作中使用最多的是像素px。
一般情況下,行距比字型大小大7.8像素左右就可以了。
text-align:水平對齊
text-align屬性用於設定常值內容的水平對齊,相當於html中的align對齊屬性。其可用屬性值如下:
left:靠左對齊(預設值)
right:靠右對齊
center:置中對齊
text-indent:首行縮排
text-indent屬性用於設定首行文本的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負值,建議使用em作為設定單位。
1em就是一個字的寬度 如果是漢字的段落,1em就是一個漢字的寬度
p { line-height: 25px;/*行間距*/ text-indent: 2em;/*首行縮排*/ }h3 { text-align: center;/*水平對齊*/ }
letter-spacing:字間距
letter-spacing屬性用於定義字間距,所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值,允許使用負值,預設為normal。
word-spacing:單詞間距
word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。和letter-spacing一樣,其屬性值可為不同單位的數值,允許使用負值,預設為normal。
word-spacing和letter-spacing均可對英文進行設定。不同的是letter-spacing定義的為字母之間的間距,而word-spacing定義的為英文單詞之間的間距。
p { letter-spacing: 2px;/*字間距*/ }p { word-spacing: 5px;/*單詞間距 針對英文 中文無效*/ }
word-break:自動換行
normal 使用瀏覽器預設的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半形空格或連字號處換行。
顏色半透明(CSS3)
文字顏色到了css3我們可以採取半透明的格式了。
color:rgba(r,g,b,a) a是alpha 透明的意思 取值範圍 0~1之間 color:raba(0,0,0,0.3)
文字陰影(CSS3)
我們可以給文字添加陰影製作效果 Shadow 影子
text-overflow:水平位置 垂直位置 模糊距離 陰影顏色;
值 |
描述 |
h-shadow |
必需。水平陰影的位置。允許負值。 |
v-shadow |
必需。垂直陰影的位置。允許負值。 |
blur |
可選。模糊的距離。 |
color |
可選。陰影的顏色。參閱CSS顏色值。 |
前兩項是必須寫的,後兩項可以選寫。