Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/31-skrotowy-zapis-wlasciwosci.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Skrótowy zapis właściwości |
Wpisany przez Patryk yarpo Jar | |||
piątek, 18 września 2009 02:53 | |||
Skrótowy zapis właściwościZdecydował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. Tags:
|