|
Zdecydowałem się na napisanie osobnej lekcji o tym zagadnieniu, bo
umiejętność używania skrótów może bardzo skócić czas pisania kodu CSS.
A czas to pieniądz [na dole strony jest nr konta:-)]!
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śc 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 mozna także z powodzeniam 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 pierszą 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 mozna uzyskac samemu - nawet w MS Paint! Otwórz ten program. Kliknij dwókrotnie 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.
|
