當前位置:成語大全網 - 漢語詞典 - 常用重要CSS樣式的屬性

常用重要CSS樣式的屬性

盒子模型是CSS中壹個非常重要的概念。壹個頁面中的所有元素都可以看作壹個盒子,占據壹定的頁面空間。壹個頁面由很多框組成,框之間會相互影響。只有掌握了盒子模型和其中每個屬性的用法,才能真正控制頁面元素。

盒子模型主要定義了四個區域:內容、填充、邊框和邊距。

框的內容區域存儲文本和圖片等頁面元素,並具有以下屬性:

基本邊框屬性:

通過壹個屬性設置四個方向邊框的寬度、樣式和顏色。

屬性:邊框

值:寬度樣式顏色;

僅設置邊框的寬度、樣式和顏色。

語法:border- direction(上/右/下/左):寬度樣式顏色;

僅設置邊框的寬度、樣式和顏色之壹。

語法:border- attribute(寬度/樣式/顏色):value

僅設置某個邊框的寬度、樣式和顏色之壹。

語法:border- direction(上/右/下/左)- attribute(寬度/樣式/顏色):value

屬性:邊框半徑

功能:設置倒角位置的圓的半徑。半徑越大,弧度越大。

價值:

屬性:邊框-圖像

語法:

邊框-圖片-來源:介紹壹個背景圖片。

價值:

默認:無圖片

Url(圖片URL地址)

邊框-圖像-切片:剪切背景圖片,將邊框背景剪成9塊。

價值:

數字:默認單位px。

百分比:

填充:保留邊框圖像的中間部分。

邊框圖像寬度:指定邊框圖片的寬度。

Border-image-repeat:指定邊框背景圖片的排列方式,可以定義兩個參數,即水平方向和垂直方向。

價值:

拉伸:默認值,拉伸

重復:平鋪

圓形:取整塊瓷磚。

內容區域和邊框(邊緣)之間的距離

語法:padding:value;

單邊設置:填充方向(上/右/下/左):值;

價值:

值px

百分率

內邊距的簡寫:

填充:值;

四個方向的邊距值都是value。

padding:value 1 value 2;

Value1是上下內邊距的值,value2是左右內邊距的值。

padding:value 1 value 2 value 3;

Value1是上內邊距的值,value2是左內邊距和右內邊距的值,value3是下內邊距的值。

padding:value 1 value 2 value 3 value 4;

右上、左下和內邊距的值分別為value1、value2、value3和value4。

外邊距是指元素之間的距離,即元素邊界周圍的空白區域,通過它可以為元素創建額外的“空間”。默認情況下,它不能被其他元素占用,用於拉伸兩個元素之間的距離。

語法:margin:value;

單邊設置:邊距-方向(上/右/下/左):值;

價值:

重新定義元素大小的計算模式

屬性:框大小

價值:

屬性:調整大小

價值:

元素邊框外的線。

屬性:

輪廓:寬度樣式顏色;

屬性:方框陰影

語法:

框-陰影:h-陰影v-陰影模糊蔓延顏色插入;

值:由壹組值組成的值列表。

屬性:背景色

值:顏色值或透明

註意:背景色是從邊框位置繪制的。

屬性:背景圖像

值:url(背景圖像的URL)

屬性:背景-重復

價值:

屬性:背景附件

價值:

滾動:默認值,滾動

已修復:已修復

屬性:背景-位置

價值:

屬性:背景尺寸

價值:

屬性:背景-來源

價值:

屬性:背景剪輯

價值:

CSS3多背景是通過為每個背景屬性提供多個屬性值來實現的。

字體速記屬性語法:

將所有字體屬性寫在壹行,其中font-family是復合屬性中必不可少的屬性。

您不需要設置其中壹個值,如果您省略了該值,您將使用該屬性的默認值。

②文本屬性:

(2)CSS3文本陰影屬性:

屬性:文本-陰影

功能:制造陰影,模糊主體。

語法:

角色:定義列表的編號樣式。

屬性:列表樣式類型

功能:用於設置列表項的圖像屬性。

語法:

圖像URL地址:圖像的相對路徑或絕對路徑。

無:默認值,未指定圖像。

註意:在不同的瀏覽器中,圖片圖標和文本之間的距離是不同的。因此,壹般情況下,該方法不用於設置列表的圖片樣式。

通過設置

將“列表樣式類型”屬性值設置為“無”。

壹組

函數:用於聲明列表標記相對於列表項內容的位置。

語法:

功能:可以同時設置列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。

語法:

註意:

您不需要設置其中壹個值,默認值用於未設置的屬性。

如果同時指定了list-style-image和list-style-type,則list-style-image優先,除非list-style-image設置為none,或者圖像路徑錯誤,無法顯示。

當列表和列表項同時使用樣式時,首先顯示列表項的樣式。

特點:

您可以設置寬度和高度。

默認情況下,每個塊級元素都有壹個獨占行。

功能:

塊級元素主要用於頁面布局

常見的塊級元素:

& ltdiv & gt、& ltp & gt、& lth 1 & gt;~ & lth6 & gt、& ltol & gt、& ltul & gt等待

特點:

妳不能設置寬度和高度,它的寬度是妳自己的文字或圖片的寬度。

默認情況下,多個內嵌元素將顯示在壹行中,並在遇到父元素的邊界時自動換行。

功能:

內嵌元素主要用於設置文本樣式。

常用的行內元素:

& lta & gt、& ltspan & gt、& ltem & gt、& ltb & gt、& lt我& gt、& ltstrong & gt、& ltimg & gt、& lt輸入& gt等待

功能:控制頁面元素脫離原來的文檔流,向左或向右移動,直到元素的外邊緣接觸到其包含框或另壹個浮動框的邊緣,標準流中的其他框將被推到浮動框的位置。浮動元素不占用真實空間。

屬性:浮動

價值:

浮動元素互不重疊;

浮動元素不會上下浮動。如果壹個浮動元素顯示在另壹個浮動元素後面,並且超出了保持塊,則它會下降到比任何先前的浮動元素都低的位置。

功能:指定元素的哪壹側不允許有其他浮動元素。

價值:

功能:控制頁面元素在頁面中的位置。

屬性:位置

值:靜態/相對/絕對/固定。

默認屬性值,元素按照標準文檔流排列,塊級元素占壹行,行內元素顯示壹行,行不能顯示,自動換行。

特點:

相對於其原始位置的偏移量

仍然在標準文檔流中

然後是偏移屬性和z-idex屬性。

偏移屬性:

左:數值px;

右圖:數值px;

Top:數值px;

下圖:數值px;

當壹個元素被相對定位時,它將在Z軸上產生壹個堆棧。如果未設置z-index屬性,默認情況下,元素將出現在由X軸和Y軸形成的平面上。

特點:

建立基於包含塊的定位。

絕對定位元素的位置相對於最近定位的祖先元素(設置絕對定位、相對定位或固定定位中的任意壹個)。如果元素沒有定位的祖先元素,則元素的位置相對於瀏覽器窗口。

完全脫離了標準的文件流程。

然後是偏移屬性和z-idex屬性。

偏移屬性:

左:數值px;

右圖:數值px;

Top:數值px;

下圖:數值px;

無需設置偏移量的絕對定位的特點:

無論是否有已經定位的祖先元素,它都保持在元素的初始位置。

在標準文件流程之外

設置固定位置的元素框類似於將position設置為absolute,但它包含的塊是瀏覽器窗口本身。

在計算機顯示中,垂直於屏幕平面的方向稱為Z方向,CSS絕對定位容器的z-index屬性就是對應的方向。

功能:用於控制元素的層疊順序,使壹個元素浮動在其他元素之上。

語法:

Auto:跟隨其父元素的位置。

Number:整數,可以是負數,最大值疊加在上層。

註意:使用z-index屬性時,該元素的position屬性值需要為絕對、相對或固定。

功能:用於定義創建布局時元素生成的顯示框架類型。

語法:display:value;

功能:用於定義創建布局時元素生成的顯示框架類型。

語法:可見性:值;