Beauty

Budowa arkusza css


Składnia arkusza stylu

Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu, np. HTML. Reguła składa się z selektora oraz deklaracji. Selektor określa grupę elementów (czasem pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi.

Nic nie mówi ci powyższa definicja? Spójrz na obrazek poniżej, powinien on ci wiele wyjaśnić.

Dodawanie arkusza stylu do dokumentu

Arkusz stylu można dodać do dokumentu, poprzez element link:
<link rel="stylesheet" href="style.css" />

style.css to arkusz stylu umieszczony w odrębnym dokumencie a powiązanym poprzez link.
Może być on również dodany bezpośrednio do dokumentu, poprzez alement style:
<style>Tu umieść arkusz stylu</style>

Porządkowanie arkusza stylu

Jak zapewne widzisz, kod umieszczony niżej nie jest zbyt czytelny:
menu{color:red} navigation{background-color:#333 /* darkgrey */}

Można go uporządkować ręcznie, jednak przy większej ilości elementów zacznie ci to sprawiać problemy oraz zajmie dużo czasu. Użyj zatem generatora online CSS Beautify, który w sekundę poukłada rozrzucone elementy arkusza stylu, który będzie wyglądał tak:
menu {
    color: red;
}

navigation {
    background-color: #333 /* darkgrey */;
}

Blokotek poleca to narzędzie, gdyż sam z niego korzysta. Jak ono działa? W pierwszą kolumnę wklej porozrzucany kod, a z drugiej kolumny skopiuj już uporządkowany. Proste? I tak właśnie miało być.
To już koniec? Tak, niniejszy artykuł miał być jedynie namiastką tego, czym zajmują się programiści. Blokotkowi css jest znany bardzo dobrze, więc mógłby napisać cały tom o nim, jednak na pewno nikt by tego nie czytał, a co gorsza nie zrozumiał :P Jeśli jesteś zaawansowanym webmasterem i czujesz niedosyt, przeczytaj poniższe pozycje (te dobre przeważnie są anglojęzyczne):

Instagram