2. Używanie skrótów

 

Istnieją bardzo dobre skróty dla właściwości takich jak: margin, padding, border czy background.

 

Aby na przykład określić marginesy (lub paddingi) dla każdej z 4 stron wystraczy zamiast 4 linijek kodu CSS:

 

  h1 {margin-top:1em;  
      margin-right:0;  
      margin-bottom:2em;  
      margin-left:0.5em;  
  }

 

Wpisać dokładnie to samo polecenie w jednej linii:

 

h1 {margin:1em 0 2em 0.5em;}

 

Dzięki temu zaoszczędzimy miejsce w kodzie, ilość zajętego miejsca oraz zwiększymy wydajność.

 

Lista na dole zawiera wszystkie inne skróty CSS.

Dalsza czê¶æ: 1 2 3 4 5 6 7 8 9 10

  /* BORDER */  
  h1 {border:1px solid  000;}  
   
  h1 {border-width:1px;  
      border-style:solid;  
      border-color: 000;  
  }  
   
  /* BORDER WIDTH */  
  h1 {border-width:1px 2px 3px 4px;}  
   
  h1 {border-top-width:1px;  
      border-right-width:2px;  
      border-bottom-width:3px;  
      border-left-width:4px;  
  }  
   
  /* BACKGROUND */  
  div {background: f00 url(background.gif) no-repeat fixed 0 0;}  
   
  div {background-color: f00;  
       background-image:url(background.gif);  
       background-repeat:no-repeat;  
       background-attachment:fixed;  
       background-position:0 0;  
  }  
   
  /* FONT */  
  h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}  
   
  h1 {font-style:italic;  
      font-variant:small-caps;  
      font-weight:bold;  
      font-size:1em;  
      line-height:140%;  
      font-family:"Lucida Grande",sans-serif;  
  }  
   
  /* LIST STYLE */  
  ul {list-style:square inside url(image.gif);}  
   
  ul {list-style-type:square;  
      list-style-position:inside;  
      list-style-image:url(image.gif);  
  }  
   
  /* OUTLINE */  
  h1 {outline: f00 solid 2px;}  
   
  h1 {outline-color: f00;  
      outline-style:solid;  
      outline-width:2px;  
  }