mozilla
Wyniki wyszukiwania

    Czytelny CSS

    Ta strona opisuje styl i gramatykę języka CSS.

    Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny.

    Informacja: Czytelny CSS

    Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób.

    Białe znaki

    Białe znaki to spacje, tabulatory i nowe linie. Dzięki białym znakom arkusz stylów będzie bardzie czytelny.

    Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem.

    Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje.

    Przykłady
    Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa:
    .carrot {color: orange; text-decoration: underline; font-style: italic;}
    

    Inni wolą układać jedną własność-wartość na linię:

    .carrot { color: orange; text-decoration: underline; font-style: italic; }

    Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator:

    .carrot {

     color: orange;
     text-decoration: underline;
     font-style: italic;
    

    }

    Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu):

    .carrot

       {
       color           : orange;
       text-decoration : underline;
       font-style      : italic;
       }
    

    Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji.

    Komentarze

    Komentarze w CSS zaczynają się od /*, a kończą się na */.

    Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do wykomentowywania części aktualnie nieużywanych.

    Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. Dalsza część arkusza stylów musi mieć poprawną składnię.

    Przykład

    /* styl dla początkowej litery C w pierwszym paragrafie */ .carrot {

     color:            orange;
     text-decoration:  underline;
     font-style:       italic;
     }
    

    Grupy Selektorów

    Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. Deklaracja zostanie zastosowana do wszystkich wybranych elementów.

    W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły.

    Przykład
    Ta reguła sprawia, że elementy H1, H2 oraz H3 są tego samego koloru.

    Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany.

    /* kolory nagłówków */ h1, h2, h3 {color: navy;}

    Zadanie: Dodawanie komentarzy i poprawianie układu

    Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności):

    strong {color: red;} .carrot {color: orange;} .spinach {color: green;}

    1. first {font-style: italic;}

    p {color: blue;}

    Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy.

    Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów:

    Cascading Style Sheets
    Cascading Style Sheets


    Wyzwanie
    Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona:
    Cascading Style Sheets
    Cascading Style Sheets

    (Jest więcej niż jeden sposób, aby to zrobić.)


    Co dalej?

    Twój przykładowy dokument używa kursywy oraz podkreślenia. Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: Style tekstowe

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Sheppy, Verruckt, teoli, gandalf, Ptak82, Mgjbot, Takenbot, Anonymous, Ruby, Witia
    Ostatnia aktualizacja: teoli,