Zamierzam Wam zaprezentować kilka porad dotyczących arkuszy styli o których warto pamiętać. Korzystanie z nich na pewno na początku może się okazac uciążliwe, ale z biegiem czasu te sposoby są po prostu maxymalnie użyteczne.
Więc zaczynamy:
- Zawsze resetuj domyślne ustawienia przeglądarek:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } |
Dzięki temu można uniknąc dziwnych niespodzianek ze strony różnych przeglądarek.
- Staraj się układać opcje stylu CSS alfabetycznie, czyli zamiast:
div#header h1 { z-index: 101; color: #000; position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px; } |
Korzystaj z takiego rozwiązania:
div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101; } |
Dzięki temu od razu widać, gdzie co jest w kodzie.
- Organizuj swój kod CSS:
/*****Reset*****/ Tutaj usuwamy marginesy. /*****Podstawowe style*****/ Definiujemy podstawowe style: body, h1-h6, ul, ol, a, p, itd. /*****Style dla szablonu*****/ Zdefiniuj podstawowe elementy szablonu: header, footer, itd. /*****Header*****/ Tutaj możesz zdefiniować wszystkie style dla elementu header. /*****Content*****/ Tutaj zdefiniuj style dla treści strony. /*****Footer*****/ Tutaj z kolei możesz zdefiniować style dla stopki strony. /*****Itd*****/ I tak kolejno grupuj style dla strony, dla każdego elementu. |
Dzięki temu można uniknąc balaganu na stronie.
- Stosuj jeden styl pisania kodu, unikaj mieszania styli kodowania:
div#header { float: left; width: 100%; } div#header div.column { border-right: 1px solid #ccc; float: rightright; margin-right: 50px; padding: 10px; width: 300px; } div#header h1 { float: left; position: relative; width: 250px; } |
Taki styl pisania jest zły. Należy stosować jeden z nich dla czytelności kodu.
Myślę, że te kilka porad pomoże Wam efektywnie pisać kod dla arkuszy styli CSS
