使用CSS縮寫

2021-08-28 08:45:53 字數 2349 閱讀 1258

css縮寫

零、background縮寫

1、background屬性的值的書寫順序官方沒有強制標準。

2、為了可讀性，一下順序是符合css書寫規範的

background:background-color | background-image | background-repeat | background-attachment | background-position
#content
一、font字型縮寫

font:font-style | font-variant | font-weight | font-size | line-height | font-famliy


//只要使用font作為屬性名稱，後接各個屬性的值即可，各個屬性值之間使用空格分開，不需要的引數可以之間去掉


例如：p
此**將使p物件字型成為：斜體 大小寫預設、加粗、12px大小、18px行高、宋體。

因為css各個屬性的值寫法並不相同，因此直接去掉某個引數不會影響順序；與值得關係。

但是也有意外，比如比例中的12px/18px指的是font-size和line-height。用反斜線分隔，因為

font-size與line-height的值使用的是同一套數值。

font的簡寫注意事項

簡寫時，font-size和line-height只能通過斜槓/組成乙個值，不能分開寫。

順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用預設值

總結：也就是說當使用font簡寫時，font-size和font-family是必填項，且順序不能改變

二、margin與padding邊距縮寫

僅以margin為例，padding與margin縮寫相同

四個引數是

margin:margin-top | margin-right | margin-bottom | margin-left

乙個引數和兩個引數的好理解

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

p

三個引數則表示margin-top = 20px, margin-left = margin-right = 10px, margin-bottom = 100px

三、border縮寫

border物件是個非常複雜的物件，它包含四條邊的不同寬度、顏色，yiji以及不同樣式。我們對border

的縮寫有三種

1.對整個物件進行border縮寫

p

p物件將被設定4個邊均為1px寬度、實線、藍色邊框的樣式。

2.對border的4個邊應用單獨的樣式，

border-top:border-width | border-style | border-color

right bottom left都一樣 例如：

p
上邊框我們設定為1px藍色實線，右邊框則是1px紅色虛線。

3.對border-style，border-width以及border-color。

border-width:top | right | bottom | left


border-style:top | right | bottom | left


border-color:top | right | bottom | left
同margin和padding縮寫一樣，並且支援1~4個引數不同的縮寫方式。

四、list列表縮寫

list縮寫是針對list-style-type，list-style-position等用與ul的list屬性，語法如下：

list-style：list-style-type | list-style-position | list-style-image

**示例

ul
ul 物件將被設定為圓點、出現在物件外、不帶影象的list-style樣式。

五、顏色縮寫

相同的兩個16進製制數可以縮寫 比如：

#ffffff縮寫為#fff #2255bb縮寫為#25b

CSS縮寫技巧

css縮寫的主要規則如下 顏色16進製制的色彩值，如果每兩位的值相同，可以縮寫一半，例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸通常有下面四種書寫方法 方便的記憶方法是順時針，上右下左。具體應用在margin和padding的例子如下 margin 1em 0 2em...

CSS主要縮寫規則

使用縮寫可以幫助減少你css檔案的大小，更加容易閱讀。css縮寫的主要規則如下 顏色16進製制的色彩值，如果每兩位的值相同，可以縮寫一半，例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸通常有下面四種書寫方法 方便的記憶方法是順時針，上右下左。具體應用在margin和pa...

css 常用屬性縮寫

使用縮寫可以幫助減少你css檔案的大小，更加容易閱讀。css縮寫的主要規則如下 顏色 16進製制的色彩值，如果每兩位的值相同，可以縮寫一半，例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸 通常有下面四種書寫方法 property value1 表示所有邊都是乙個值val...