border英文縮寫 CSS 的簡寫屬性

2021-10-16 14:16:59 字數 3131 閱讀 9604

定義

簡寫屬性是讓你同時設定其他幾個 css 屬性值的 css 屬性。使用簡寫屬性,web 開發人員可以編寫更簡潔、更具可讀性的樣式表,節省時間和精力。

css 規範把簡寫屬性定義為作用於同一主題的一組屬性。比如 css 的background屬性就是乙個簡寫屬性,它可以定義background-color、background-image、background-repeat和background-position的值。同樣,最常見的字型相關的屬性可以使用font的簡寫,盒子(box)各方向的外邊距 margin 可以使用margin的簡寫。

棘手的邊緣情況

雖然它們使用起來非常方便,但在使用時,仍需牢記一些邊緣情況:

沒有指定的值會被設定為它的初始值。這聽起來似乎本來就很合理的樣子,但這確實意味著,它將會覆蓋之前設定的值。因此:

background-color: red;

background: url(images/bg.gif) no-repeat top right;

以上樣式不會將 background 的 color 值設定為red,而是background-color的預設值transparent,因為第二條規則優先。

簡寫屬性不試圖強制它們替代屬性的值的特定順序。這適用於當這些屬性使用不同型別的值時,因為這個時候順序並不重要。但當幾個屬性可以設定相同值的時候,就沒那麼簡單了。處理這些情況分以下幾種型別:

1個值的語法: border-width: 1em— 這乙個值表示所有的邊框寬度

2個值的語法: border-width: 1em 2em— 第乙個值表示垂直方向的,即 top 和 bottom;第二個值表示水平方向的,即 left 和 right

3個值的語法: border-width: 1em 2em 3em— 第乙個值表示 top;第二個值表示水平方向的,即 left 和 right; 第三個值表示 bottom

4個值的語法: border-width: 1em 2em 3em 4em— 這四個值分別表示 top、right、bottom、left,總是按此順序,即從 top 開始的順時針順序(top-right-bottom-left 首字母與英文單詞 trouble 的順序一致:trbl)

1個值的語法: border-radius: 1em— 這乙個值表示所有的錶框角度的半徑

2個值的語法: border-radius: 1em 2em— 第乙個值表示 top-left 和 bottom-right 方向的角;第二個值表示 top-right 和 bottom-left 方向的角

3個值的語法: border-radius: 1em 2em 3em— 第乙個值表示 top-left 方向的角 ,第二個值表示top-right 和 bottom-left 方向的角,第三個值表示 bottom-right 方向的角

4個值的語法: border-radius: 1em 2em 3em 4em— 這四個值分別表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。總是按此順序,即從top-left開始的順時針順序

background 屬性

background 有以下屬性:

background-color: #000;

background-image: url(images/bg.gif);

background-repeat: no-repeat;

background-position: top right;

可以簡寫成一行宣告:

background: #000 url(images/bg.gif) no-repeat top right;

簡寫的形式實際上等價於以上普通屬性再加上background-attachment: scroll以及 css3 中的一些附加屬性。

font 屬性

下面的宣告:

font-style: italic;

font-weight: bold;

font-size: .8em;

line-height: 1.2;

font-family: arial, sans-serif;

可以簡寫成下面的:

font: italic bold .8em/1.2 arial, sans-serif;

這個簡寫宣告實際上等價於以上普通屬性再加上font-variant: normal和font-size-adjust: none(css2.0 / css3),font-stretch: normal(css3)。

border 屬性

對於 border 來說,寬度、顏色和型別是可以被簡寫到乙個宣告裡的。比如:

border-width: 1px;

border-style: solid;

border-color: #000;

可以簡寫成:

border: 1px solid #000;

margin 和 padding 屬性

margin 和 padding 值的簡寫版本類似。下面的 css 宣告:

margin-top: 10px;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 5px;

和下面的宣告是一樣的(注意,值是從 top 順時針開始的:top、right、bottom、接著是 left)

margin: 10px 5px 10px 5px;

另請參閱

shorthand properties:background,font,margin,border,border-top,border-right,border-bottom,border-left,border-width,border-color,border-style,transition,transform,padding,list-style,border-radius.

css key concepts:css syntax,specificityandinheritance, thebox,layout modes and visual formatting models, andmargin collapsing, or theinitial,computed,usedandactualvalues. definitions ofvalue syntax,shorthand properties and replaced elements.

border英文縮寫 html css筆試附答案

html css 一 單選題 總分172,每小題1分 1 下列關於xhtml 中的css 樣式表的說法正確的是 a css 樣式表的基本選擇器有 標記選擇器 id 選擇器和類選擇器及後代選擇器 b c ss 樣式表僅具有繼承性 c 對於定義樣式div p意思是div 下面的應用了類p 的標籤的字型顏...

各國語言的英文縮寫

簡體中文 中國 zh cn 正體中文 台灣地區 zh tw 正體中文 香港 zh hk 英語 香港 en hk 英語 美國 en us 英語 英國 en gb 英語 全球 en ww 英語 加拿大 en ca 英語 澳大利亞 en au 英語 愛爾蘭 en ie 英語 芬蘭 en fi 英語 丹麥 ...

安防監控的英文縮寫

vcr video cassette recorders vcr 盒式磁帶錄影機vcr是video cassette recorder的縮寫 盒式磁帶錄影機。就功能上而言,它是使用空白錄影帶並載入錄影機進行影像的錄製及儲存的監控系統裝置 磁帶 錄影機 videocassetterecorder,vc...