首頁 > web前端 > css教學 > css外觀屬性有哪些? css外觀屬性的介紹

css外觀屬性有哪些? css外觀屬性的介紹

不言
發布: 2018-08-18 16:19:37
原創
4353 人瀏覽過

本篇文章帶給大家的內容是關於css外觀屬性有哪些? css外觀屬性的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

CSS外觀屬性

color:文字顏色

color屬性用於定義文字的顏色,其取值方式有如下3種:

  1. #預先定義的顏色值,如red,green,blue等。

  2. 十六進制,如#FF0000,#FF6600,#29D794等。在實際工作中,十六進制是最常見的定義顏色的方式。

  3. 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顏色值。
前兩項是必須寫的,後兩項可以選寫。

相關建議:

使用CSS3的appearance屬性改變元素的外觀_html/css_WEB-ITnose

css margin外邊距屬性與用法總結

以上是css外觀屬性有哪些? css外觀屬性的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板