自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

學習筆記 剖析CSS縮寫六大規(guī)則

開發(fā) 前端
你對CSS縮寫的概念是否了解這里和大家分享一下CSS縮寫的規(guī)則,主要有顏色,盒尺寸,邊框,背景和字體等內容,相信本文介紹一定會對你有所幫助。

CSS布局有很多值得學習的地方,這里向大家描述一下CSS縮寫的規(guī)則,使用CSS縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。

CSS常用縮寫語法

使用CSS縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。CSS縮寫的主要規(guī)則如下:

顏色

16進制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:
#000000可以縮寫為#000;

#336699可以縮寫為#369;

盒尺寸

通常有下面四種書寫方法:

property:value1;表示所有邊都是一個值value1;
property:value1value2;表示top和bottom的值是value1,right和left的值是value2
property:value1value2value3;表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1value2value3value4;四個值依次表示top,right,bottom,left
方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下: 

  1. margin:1em02em0.5em;  
  2.  

邊框(border)

邊框的屬性如下:

  1. border-width:1px;  
  2. border-style:solid;  
  3. border-color:#000;  
  4.  

可以縮寫為一句:

  1. border:1pxsolid#000;  
  2.  

語法是border:widthstylecolor。#p#

背景(Backgrounds)

背景的屬性如下:

  1. background-color:#f00;  
  2. background-image:url(background.gif);  
  3. background-repeat:no-repeat;  
  4. background-attachment:fixed;  
  5. background-position:00;  
  6.  

可以縮寫為一句:

  1. background:#f00url(background.gif)no-repeatfixed00;  
  2.  

 語法是background:colorimagerepeatattachmentposition;

你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器默認值,默認值為: 

  1. color:transparent  
  2. image:none  
  3. repeat:repeat  
  4. attachment:scroll  
  5. position:0%0%  
  6.  

 字體(fonts)

字體的屬性如下: 

  1. font-style:italic;  
  2. font-variant:small-caps;  
  3. font-weight:bold;  
  4. font-size:1em;  
  5. line-height:140%;  
  6. font-family:"LucidaGrande",sans-serif;  
  7.  

可以縮寫為一句:

  1. font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;  
  2.  

 注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值。

列表(lists)

取消默認的圓點和序號可以這樣寫list-style:none;

list的屬性如下:

  1. list-style-type:square;  
  2. list-style-position:inside;  
  3. list-style-image:url(image.gif);  
  4.  

可以縮寫為一句:

  1. list-style:squareinsideurl(image.gif);  
  2.  

【編輯推薦】

  1. 輕松實現(xiàn)CSS樣式實時切換技巧
  2. 深入學習六大CSS選擇符的使用
  3. CSS2.0中最常用的十八般兵器
  4. CSS樣式表文件優(yōu)化五個小技巧
  5. 解讀CSS中position屬性四大可選值用法

 

責任編輯:佚名 來源: 52css.com
相關推薦

2010-07-14 17:36:00

Perl運算符

2010-09-03 14:18:45

CSS選擇符CSS

2011-04-29 10:05:57

主板硬盤

2022-02-25 20:44:28

框架深度學習架構

2010-09-07 14:14:46

DIV+CSS

2016-11-08 18:00:44

機器學習

2020-06-04 07:00:00

機器學習人工智能Python

2010-08-20 16:09:45

CSS瀏覽器

2010-09-09 13:54:06

DIV CSS

2010-08-27 13:07:00

CSS規(guī)則

2010-09-08 11:23:27

2010-08-16 13:46:20

DIV+CSS

2017-04-12 13:42:53

大數(shù)據(jù)規(guī)則團隊

2023-04-27 15:33:38

2010-07-30 13:15:17

Flex優(yōu)勢

2023-10-18 10:48:44

Python解釋器

2024-10-22 14:42:14

2010-08-16 10:14:23

云計算誤區(qū)

2010-09-25 15:22:19

DHCP故障處理

2011-05-26 16:04:17

java
點贊
收藏

51CTO技術棧公眾號