Niektórzy z Was zapewne pamiętają czasy kiedy maksymalny rozmiar strony internetowej nie powinien przekraczać 30kB. Tak, właśnie to wyglądało kiedy w większości połączenia jakie oferowali operatorzy były połączeniami modemowymi, a jendocześnie synchronizacja tych modemów nie przekraczała 14.4 kbit/s. Mimo, iż te czasy minęły bezpowrotnie warto nadal mieć na uwadze wielkość strony. Optymalizacja kodu dla pliku CSS to nie tylko jego wielkość, to również organizacja klas i identyfikatorów, brak chaosu oraz wydajność. Czytając poniższe wskazówki dowiesz się jak powinien wyglądać zoptymalizowany plik, jak wpływa na prędkość jego wczytania i jakich zasad należy się trzymać przy jego tworzeniu. Nie pozostaje więc nic innego jak pokazać kilka podstawowych zasad, którymi powinny rządzić się pliki CSS.
Reklama: Telewizja przez internet
1. Margin dla stylu strony
Skróty, w plikach CSS których powinniśmy używać podczas tworzenia stron.
Style dla których istnieją skróty to między innymi: margin, border, padding, background, font, list-style. Poniżej zaprezentowane zostały, skróty niektórych z nich.
Składnię właściwości margin można zapisać w następujący sposób:
p {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 2px;
}
lub też w skrócie w następującej postaci:
p { margin: 10px 5px 7px 2px; }
przy czym odpowiednio są to wartości top, right, bottom, left.
Zapis w postaci:
p {
margin: 20px 50px 10px;
}
oznacza odpowiednio: top, left-right(50px), bottom.
Zapis w postaci:
p {
margin: 10px 20px;
}
oznacza odpowiednio: top-bottom(10px), left-right(20px)
I ostatni zapis:
margin: 10px;
oznacza, jak się można słusznie domyślić margines 10 pikselowy dla każdej ze stron.
Analogicznie do właściwości margin można zapisać właściwość padding.
2. Font dla stylu strony
Kolejnym zapisem, w którym można, a nawet powinno się stosować skróty jest font.
font: normal small-caps italic 90%/16px serif;
który oznacza odpowiednio atrybuty: font-style, font-variant, font-weight, font-size/line-height, font-family