css的五種屬性值 在路上(21)

2022-08-09 12:51:17 字數 1679 閱讀 6978

在css中,每個屬性的屬性值都有一定的範圍,並且不同型別的屬性值有不同的值。對於乙個屬性,必須取得正確的屬性值,才能被瀏覽器正確地解釋,因此一定要弄清每種型別的屬性值範圍。在css中屬性一般有以下幾種型別:

在css中,整數可以包括正整數、負整數和零,不能有小數。如果整數或小數後面帶有單位px,表示畫素、px叫畫素,這是目前來說使用最為廣泛的一種單位,1畫素也就是螢幕上的乙個小方格,這個通常是看不出來的。由於顯示器有多種不同的大小,它的每乙個小方格大小是有所差異的,所以畫素單位的標準也不都是一樣的。

實數包括整數,而且可以有小數。css 3中,em用於給定字型的font-size值,例如,乙個元素字型大小為12px,那麼1em就是12px,如果該元素字型大小改為15px,則1em就是15px。簡單來說,無論字型大小是多少,1em總是字型的大小值。em的值總是隨著字型大小的變化而變化的。如:

p注:很多屬性可以使用負數的長度值,如果負數的長度值超出了css能容納的限制,此長度值將被轉變為可以支援的最接近的長度;如果某個屬性不支援負數的長度,那麼這個屬性的宣告將是無效的宣告。

百分比就是乙個正整數加%,在css中百分比是乙個相對值,依賴於參照的其他元素,例如:

div

在css中url是乙個字串型別,它不分大小寫,通常用來指定乙個檔案路徑;通過url指明背景檔案所在的位置。

div

顏色在css中有多種表達方式,包括十六進製制色、rgb顏色、rgba顏色、hsl顏色,其中十六進製制色最為常用。

css 3中可以直接用英文單詞命名與之相應的顏色,這種方法優點是簡單、直接、容易掌握。此處預設了16種顏色以及這16種顏色的衍生色,這16種顏色是css 3規範推薦的,而且一些主流的瀏覽器都能夠識別它們。

當然,除了css預定義的顏色外,設計者為了使頁面色彩更加豐富,還可以使用十六進製制顏色和rgb顏色。十六進製制顏色的基本格式為#rrggbb。其中r表示紅色,g表示綠色,b表示藍色。而rr、gg、bb最大值為ff,表示十進位制中的255,最小值為00,表示十進位制中的0.例如,#ff0000表示紅色,#00ff00表示綠色,#0000ff表示藍色,#000000表示黑色,#ffffff表示白色,而其他顏色分別是通過紅、綠、藍三種基本色的結合而形成的。例如,#ffff00表示黃色,#ff00ff表示紫紅色。

如果要使用十進位制表示顏色,則需要使用rgb顏色。十進位制表示顏色,最大值為255,最小值為0.要使用rgb顏色,必須使用rgb(r,g,b),其中r、g、b分別表示紅、綠、藍的十進位制,通過這三個值的變化結合,便可以形成不同的顏色。例如,rgb(255,0,0)表示紅色,rgb(0,255,0)表示綠色,rgb(0,0,255)則表示藍色。黑色表示為rbg(0,0,0),白色表示為rgb(255,255,255)。

css 3新增加了hsl顏色表現方式。hsl色彩模式是工業界的一種顏色標準,它通過對色調(h)、飽和度(s)、亮度(l)三個顏色通道的改變以及它們相互之間的疊加來獲得各種顏色。 

rgba也是css 3新增顏色模式,rgba色彩模式是rgb色彩模式的擴充套件,在紅、綠、藍三原色的基礎上增加了不透明度引數。

下面是使用十六進製制色設定屬性值的例子。

p{background-color:#123456;   /*設定背景顏色為十六進製制顏色值*/

注:#112233可以簡化寫為#123;#ffffff可以簡化為fff 但#121212就不可簡化;

注:由於其他顏色表達方式不大常用,這裡不再講述。

CSS中常用的五種編輯屬性

css 字型屬性 屬性 描述 font 簡寫屬性。作用是把所有針對字型的屬性設定在乙個宣告中。font family 設定字型系列。font size 設定字型的尺寸。font style 設定字型風格。font variant 以小型大寫字型或者正常字型顯示文字。font weight 設定字型的...

css之position五種屬性及特點

w3c中獲取定義 static 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 inherit 規定應該從父元素繼承 position 屬性的值。fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left ...

css的position屬性值

css樣式表中的position屬性詳細說明 在css中關於position定位的內容是 position relative absolute static fixed static 靜態 沒有特別的設定,遵循基本的定位規定,不能通過z index進行層次分級。relative 相對定位 物件不可層...