Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Skrócone deklaracje CSS

Dlaczego skracamy deklaracje CSS?

Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów.

Własności tła

Tło określone za pomocą następujących własności:

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

Można zapisać w jednej deklaracji jako:

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

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus background-attachment: scroll oraz kilku dodatkowych własności w CSS3)

Własności czcionki

Następujące deklaracje:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Mogą zostać skrócone do następującej deklaracji:

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

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus font-variant: normal i font-size-adjust: none (CSS2.0 / css3), font-stretch: normal (css3).)

Własności obramowania

Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład:

border-width: 1px;
border-style: solid;
border-color: #000;

Możemy zapisać jako:

border: 1px solid #000;

Własności margin/padding

Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble"))

margin: 10px 5px 10px 5px;

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: teoli, gandalf, Ptak82
 Ostatnia aktualizacja: teoli,