css樣式表（四）

標籤：填充   行高   slice   不同   shadow   strong   屬性   數字   ado   

******* CSS 常用屬性 *********

　　【font】

　　font 設定或檢索對象中的文本特性。該屬性是複合屬性。

　　使用第一種聲明方式參數必須按照如上的排列順序，且font-size和font-family是不可忽略的。每個參數僅允許有一個值。忽略的將使用其參數對應的獨立屬性的預設值。

　　： 指定文本字型樣式

　　： 指定文本是否為小型的大寫字母

　　： 指定文本字型的粗細

　　： 指定文本字型尺寸

　　： 指定文本字型的行高

　　： 指定文本使用某個字型或字型序列

　　caption： 使用有標題的系統控制項的文本字型(如按鈕，菜單等)(CSS2)

　　icon： 使用表徵圖標籤的字型(CSS2)

　　menu： 使用菜單的字型(CSS2)

　　message-box： 使用資訊對話方塊的文本字型(CSS2)

　　small-caption： 使用小控制項的字型(CSS2)

　　status-bar： 使用視窗狀態列的字型(CSS2)

　　--------------------------------------------------------------------

　　font-family： 設定或檢索用於對象中文本的字型名稱序列。

　　預設值：由user agent決定

　　序列可包含嵌入字型。

　　一般字型引用可以不加引號，如果字型名包含了空格、數字或者符號(如串連符)則需加上引號，避免引發錯誤。

　　user agent會遍曆定義的字型序列，直到匹配到某個字型為止。

　　body{font-family:helvetica,verdana,sans-serif;}

　　如上字型定義，假設你機器上沒有helvetica字型，但有verdana，這時將會以verdana顯示你的文字。

　　： 字型名稱。按優先順序排列。以逗號隔開。如果字型名稱包含空格或中文，則應使用引號括起

　　： 字型序列名稱。

　　-----------------------------------------------------------------------------------------------

　　font-size： 設定或檢索對象中的字型尺寸。

　　： 根據對象字型進行調節。選擇性參數值：xx-small | x-small | small | medium | large | x-large | xx-large

　　以 medium 作為基礎參照，xx-small相當於medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)，

　　： 相對於父對像中字型尺寸進行相對調節。使用成比例的em單位計算。選擇性參數值：smaller | larger

　　： 用長度值指定文字大小。不允許負值。

　　： 用百分比指定文字大小。其百分比取值是基於父物件中字型的尺寸。不允許負值。

　　----------------------------------------------------------------------------------------------------

　　font-stretch：設定或檢索對象中的文字是否橫向展開變形。

　　文字的展開是相對於瀏覽器顯示的字型的正常寬度。

　　ultra-condensed： 比正常文字寬度窄4個基數。

　　extra-condensed： 比正常文字寬度窄3個基數。

　　condensed： 比正常文字寬度窄2個基數。

　　semi-condensed： 比正常文字寬度窄1個基數。

　　normal： 正常文字寬度

　　semi-expanded： 比正常文字寬度寬1個基數。

　　expanded： 比正常文字寬度寬2個基數。

　　extra-expanded： 比正常文字寬度寬3個基數。

　　ultra-expanded： 比正常文字寬度寬4個基數。

　　------------------------------------------------------

　　font-style ： 設定或檢索對象中的文本字型樣式。

　　normal： 指定文本字型樣式為正常的字型

　　italic： 指定文本字型樣式為斜體。對於沒有設計斜體的特殊字型，如果要使用斜體外觀將應用oblique

　　oblique： 指定文本字型樣式為傾斜的字型。人為的使文字傾斜，而不是去選取字型中的斜體字

　　---------------------------------------------------------------------------------------------

　　font-variant : 設定或檢索對象中的文本是否為小型的大寫字母。

　　normal： 正常的字型

　　small-caps： 小型的大寫字母字型

　　----------------------------------------------------------

　　font-weight: 設定或檢索對象中的文本字型的粗細。

　　作用由用戶端系統安裝的字型的特定字型變數映射決定。系統選擇最近的

　　匹配。也就是說，使用者可能看不到不同值之間的差異。

　　normal： 正常的字型。相當於number為400

　　bold： 粗體。相當於number為700。

　　bolder： 特粗體。也相當於strong和b對象的作用

　　lighter： 細體

　　： 用數字表示文本字型粗細。取值範圍：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

　　********************************************************************************************************************

　　display:inline 讓行內顯示為塊的元素，變為行內顯示

　　display:inline 的作用是設定對象做為行內元素顯示，inline是內聯對象的預設值

　　DIV1

　　DIV2

　　這裡DIV1和DIV2分別佔一行，但是你給他們加上屬性後變了

　　DIV1

　　DIV2

　　DIV1和DIV2這時候顯示在同一行了

　　display:block就是將元素顯示為區塊層級元素.

　　display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。

　　-------------------------------------------------------------------------------------------------------------------------

　　*******************************************************************************************************************

　　【border】 複合屬性。設定對象邊框的特性。

　　如使用該複合屬性定義其單個參數，則其他參數的預設值將無條件覆蓋各自對應的單個屬性設定。

　　border-color：設定或檢索對象的邊框顏色。

　　如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。

　　如果只提供一個，將用於全部的四邊。

　　如果提供兩個，第一個用於上、下，第二個用於左、右。

　　如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

　　如果border-width等於0或border-style設定為none，本屬性將被忽略。

　　-----------------------------------------------------------------------------------

　　border-image 複合屬性。設定或檢索對象的邊框樣式使用映像來填充。

　　使用映像替代border-style去定義邊框樣式。當border-image為none或映像不可見時，將會顯示border-style所定義的邊框樣式效果。

　　[ border-image-source ]： 設定或檢索對象的邊框是否用映像定義樣式或映像來源路徑。

　　[ border-image-slice ]： 設定或檢索對象的邊框背景圖的分割方式。

　　[ border-image-width ]： 設定或檢索對象的邊框厚度。

　　[ border-image-outset ]： 設定或檢索對象的邊框背景圖的擴充。

　　[ border-image-repeat ]： 設定或檢索對象的邊框映像的平鋪方式。

　　------------------------------------------------------------------

　　border-radius 設定或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設定1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則預設等於第1個參數

　　水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。

　　如果只提供一個，將用於全部的於四個角。

　　如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。

　　如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。

　　垂直半徑也遵循以上4點。

　　： 用長度值設定對象的圓角半徑長度。不允許負值

　　： 用百分比設定對象的圓角半徑長度。不允許負值

　　----------------------------------------------------------------------

　　border-width 設定或檢索對象的邊框寬度。

　　如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。

　　如果只提供一個，將用於全部的四邊。

　　如果提供兩個，第一個用於上、下，第二個用於左、右。

　　如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

　　如果border-style設定為none，本屬性將失去作用。

　　： 用長度值來定義邊框的厚度。不允許負值

　　medium： 定義預設厚度的邊框。

　　thin： 定義比預設厚度細的邊框。

　　thick： 定義比預設厚度粗的邊框。

　　-----------------------------------------

　　border-left-style 設定或檢索對象的左邊邊框樣式。

　　如果border-width等於0，本屬性將失去作用。

　　none： 無輪廓。border-color與border-width將被忽略

　　hidden： 隱藏邊框。IE7及以下尚不支援

　　dotted： 點狀輪廓。IE6下顯示為dashed效果

　　dashed： 虛線輪廓。

　　solid： 實線輪廓

　　double： 雙線輪廓。兩條單線與其間隔的和等於指定的border-width值

　　groove： 3D凹槽輪廓。

　　ridge： 3D凸槽輪廓。

　　inset： 3D凹邊輪廓。

　　outset： 3D凸邊輪廓。

　　-------------------------------------------------------

　　border-top 複合屬性。設定對象頂部邊框的特性。

　　如使用該複合屬性定義其單個參數，則其他參數的預設值將無條件覆蓋各自對應的單個屬性設定。

　　[ border-top-width ]： 設定或檢索對象的頂部邊框寬度。

　　[ border-top-style ]： 設定或檢索對象的頂部邊框樣式。

　　[ border-top-color ]： 設定或檢索對象的頂部邊框顏色。

　　----------------------------------------------------------------

　　box-shadow 設定或檢索對象陰影。

　　可以設定多組效果，每組參數值以逗號分隔。

　　none： 無陰影

　　①： 第1個長度值用來設定對象的陰影水平位移值。可以為負值

　　②： 第2個長度值用來設定對象的陰影垂直位移值。可以為負值

　　③： 如果提供了第3個長度值則用來設定對象的陰影模糊值。不允許負值

　　④： 如果提供了第4個長度值則用來設定對象的陰影外延值。可以為負值

　　： 設定對象的陰影的顏色。

　　inset： 設定對象的陰影類型為內陰影。該值為空白時，則對象的陰影類型為外陰影

　　--------------------------------------------------------------------------------

　　透明度

　　寫成：

　　{

　　filter: alpha(opacity=10); //針對ie

　　}

　　這樣基本上就可以在所有瀏覽器中實現透明度

 

愛創課堂-專業的前端HTML5培訓機構

   愛創課堂秉承純乾貨,不忽悠的態度專註前端培訓,讓每個零基礎的學員都能真正的從入門到精通。

想要學習前端的朋友們可以點擊“↑”上面的字哦

css樣式表（四）