Skrótowy zapis właściwości

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: font background color kurs css

Zdecydowałem się na napisanie osobnej lekcji o tym zagadnieniu, bo umiejętność używania skrótów może bardzo skrócić czas pisania kodu CSS. A czas to pieniądz!

Poczwórne wartości:

Ten skrót wprowadziłem już podczas podstawowej części kursu, teraz jednak pokaże jak można jeszcze bardziej skracać kod:

/* najdłuższy możliwy zapis: */
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
padding-rightt: 5px;

/* lekki skrót: */
pading: 10px 5px 10px 5px;

/* większy skrót: */
padding: 10px 5px;

Pierwszego zapisu chyba nie muszę tłumaczyć. Drugi zapis był często spotykany podczas kursu. Oznacza padding: góra prawa dól lewa. Trzeci zapis można stosować jeśli wartość top-bottom i left-right jest taka sama. Wtedy przeglądarka automatycznie rozumie, że ma przypisać przeciwległej stronie tą samą wartość. Oczywiście taki zapis można także z powodzeniem używać w przypadku margin i innych tego typu właściwości.

Ale czasem występuje sytuacja, kiedy tylko jedna strona się wyróżnia:

/* długi [choć nie najdłuższy] zapis: */
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 3px solid white;
border-bottom: 1px solid white;

/* skrócony zapis: */
border: 1px solid white;
border-width: 3px 1px 1px;

Ten zapis także można stosować dla innych właściwości. Napisałem wartości tylko dla 3 stron [góra prawa dół], jednak 2 ostatnie wartości były takie same, przez co automatycznie 4 będzie także miała wartość 1px.

Właściwości czcionki:

Bardzo często trzeba wielokrotnie w jednym arkuszy stylów wpisywać właściwości opisujące czcinkę, dlatego ten skrót jest jednym z moich ulubionych:

/* czcionka pogrubiona, pochylona, 12px, arial */
font-weight: bold;
font-style: italic;
font-size: 12px;
font-family: arial;

/* a teraz wersja skrócona: */
font: bold italic 12px arial;

/* a jeśli nie jest pochylona i pogrubiona i ma kilka czcionek: */
font: 12px arial, verdana, tahoma;

No tu chyba nie ma wiele do tłumaczenia - kod wręcz sam mówi:-)

Tło

Już raz to pokazywałem podczas kursu, ale przyda się powtórka:

/* długa wersja: */
background-color: red;
background-image: url(tlo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 30%;

/* a wersja skrócona: */
background: red url(tlo.gif) 0 30% no-repeat fixed;

/* a jeśli chcesz mieć przeźroczyste tło: */
background: transparent url(tlo.gif) 0 30% no-repeat fixed;

To jest naprawdę bardzo przydatne rozwiązanie - z 5 linijek kodu otrzymujemy jedynie 1!

Zapis kolorów:

Istnieją 4 sposoby zapisu kolorów w CSS, z czego jeden jest skrótowym zapisem:

/* zapis nazwą angielską [mnomeniczną]: */
color: red;

/*zapis kodem heksadecymalnym: */
color: #FF0000;

/* skrócony zapis heksadecymalnym: */
color: #F00;

/* zapis kodem RGB: */
color: rgb(255, 0, 0);

Jeśli chodzi o pierwszą metodę - wszystko jasne. Angielska nazwa koloru. W drugiej metodzie też nie ma wielkiej filozofii:-) Po prostu kopiujemy z programu graficznego (lub specjalnych tabel koloru) kod heksadecymalny. Można go zapisać skrótowo, jeśli parami, 3krotnie obok siebie sa takie same znaki - jak w przykładzie: #FF0000 = 'FF' => 'F', '00' => '0'.

Jak otrzymać niestandardowy kolor:

Wyżej podałem link do specjalnej tabeli kolorów. Ale taki kolor można uzyskać samemu - nawet w MS Paint! Otwórz ten program. Kliknij dwukrotnie na jakimkolwiek kolorze. Pojawi się okno. Kliknij 'Definiuj kolory niestandardowe', a następnie ustaw wskaźniki w odpowiednich pozycjach. Z pól po prawej [czerwony, zielony, niebieski] skopiuj zawartość i wklej do RGB(czerwony, zielony, niebieski). Lepsze programy graficzne posiadają także automatycznie zapis w kodzie heksadecymalnym.

Skróty przedstawione na tej lekcji nie są oczywiście wszystkimi możliwymi! Jednak zebrałem tu te, których sam najczęściej używam. Istnieją także ciekawe sztuczki ze skrótami - warto poszukać. Szczególnie polecam zaglądanie w kody przeglądanych stron lub gotowych, darmowych szablonów dostępnych w Internecie.

Patryk 'yarpo' Jar

szukaj: font font background color color kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!