mozilla
Wyniki wyszukiwania

    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: 
    Contributors to this page: Ptak82, gandalf, teoli
    Ostatnia aktualizacja: teoli,