首頁 > web前端 > css教學 > 主體

CSS常用屬性總結四

黄舟
發布: 2017-01-19 14:32:20
原創
1132 人瀏覽過

       ******* 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這時候顯示在同一行了

 

:

displayblock元素.

 

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
 
}
登入後複製

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

以上就是CSS常用屬性總結四的內容,更多相關內容請關注PHP中文網(www.php. cn)!


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