Zapoznanie z podstawami CSS

Przez:, Z dnia:

Już wiemy, że możemy stylizować nasz HTML by wyglądał lepiej. Jednakże, jest z tym problem. Powiedzmy, że mamy akapit:


<p style="color: blue;">This will be one paragraph. Just like the one you would see in a book or magazine. It will be treated by the browser as one chunk of information</p>

Co jeśli masz dwa akapity na jednej stronie? Musiałbyś powtarzać stulizację dla każdego z nich:


<p style="color: blue;">This will be one paragraph. Just like the one you would see in a book or magazine. It will be treated by the browser as one chunk of information.</p>

<p style="color: blue;">And here is another paragraph with the same formatting.</p>

Co jeśli masz takich sto na jednej stronie? Albo gorzej, co jeśli musisz zmienić kolor w pewnym miejscu? Po kopiowaniu stylu setki razy znajdziesz się w głębokich kłopotach jeżeli będziesz chciał zrobić jakieś zmiany dla całego dokumentu.

Ktoś wcześniej miał ten problem. To dlatego dzisiaj mamy specjalny język, zwany kaskadowe arkusze stylów (Cascading Style Sheets, CSS). HTML i CSS są zestawami narzędzi, których będziemy używać do budowania świetnie wyglądających stron. HTML będziemy używać by tworzyć "strukturę", a CSS by dodać "styl".

Krok 1: Dodaj CSS wewnątrz tagu head

Dotychczas, zwyczajnie używaliśmy HTML, ale nie skupialiśmy się na strukturze dokumentu. Spójrzmy jak powinna ona wyglądać:

<!DOCTYPE html>

<html>
    <head>
        THIS IS THE HEAD
    </head>
    <body>
        THIS IS THE BODY
    </body>
</html>

Na samej górze widzisz deklarację "!DOCTYPE html". To powiadamia przeglądarkę, że będziemy używać składni HTML5. Ten tag nie jest zamykany. Poniżej mamy dwie sekcje: Head i Body. Head nie będzie widzialny dla użytkownika, który otwiera stronę w przeglądarce. Znajdują się tam rzeczy, które będą użyte przez przeglądarkę i nie zostaną wyświetlone użytkownikowi. Nasz CSS wraz ze słowami kluczowymi, opisem i innymi informacjami, które są używane przez wyszukiwarki internetowe by znaleźć stronę, umieścimy w sekcji nagłówka (Head). Wewnątrz Body umieścimy treść, który ma być wyświetlony użytkownikowi, więc wszystkie obrazki, akapity i linki znajdą się tutaj. Spróbujmy:

Usuń całą zawartość Twojego pliku index.html i dodaj:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Co się stało? Wyciągnęliśmy styl z html i umieścilismy wewnątrz Head w dokumencie HTML. Od teraz, wszystkie nagłówki H1 będą czerwone. Nie potrzebujemy wymieniać stylów za karzdym razem. To będzie działać na całej stronie.

Krok 2: Dodaj trochę stylów

Spróbujmy czegoś jeszcze:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1>THIS SHOULD BE BLUE</h1>
        <h1>THIS SHOULD BE BLUE</h1>
    </body>
</html>

Co powinniśmy zrobić jeżeli chcemy mieć pare nagłówków czerwonych i pare niebieskich? Teraz wszystkim dajemy ten sam styl. Na szczęście, HTML i CSS zręcznie sobie z tym radzą. Możemy grupować elementy dodając klasy i dając im pewne cechy. Spróbujmy:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Krok 3: Zrozum klasy i atrubyty id

Zauważ, że dodaliśmy wiersz wewnątrz CSS ".blue". Jest to nazwa klasy, kropka ('.') jest używana przez CSS by wskazać, że to odpowiada klasie HTML. Kolejną ważną rzeczą tutaj do odnotowania jest to, że stylizujemy wszystkie nagłówki z "h1 { color:red; }", potem, dla tagów h1, które posiadają klasę, mamy "przesłonięty" atrybut koloru. Innymi słowy, klasa jest "silniejsza" niż ogólny styl dla tagów HTML.

Poza stylizowania tagów HTML i tworzenia klas możemy także tworzyć atrybuty ID. Są one "silniejsze" niż klasy, ale powinny być ostrożnie używane. Zasada jest taka, że ID nie powinien powtórzyć się na stronie. Musi być unikalny. Oczywiście strona się nie zepsuje jeżeli będziemu mieć dwa elementy z takim samym ID na stronie, ale to jest traktowane jako błąd i przysporzy Ci problemy w przyszłości. Spróbujmy:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue" id="orange">THIS SHOULD BE ORANGE</h1>
    </body>
</html>

So far we can see that HTML tag styling is the weakest, followed by class style and ID being the strongest so far. But what about writing style directly in line with HTML like we did before?

Jak dotąd możemy zobaczyć, że stlizacja tagów HTML jest najsłabsza, następująca po klasie i ID, który jest dotychczas najsilniejszy. A co jeśli, tak jak robiliśmy to wcześniej, napiszemy styl bezpośrednio w wierszu z HTML?

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
            #orange { color: orange; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue" id="orange">THIS SHOULD BE ORANGE</h1>
        <h1 class="blue" id="orange" style="color: black">THIS SHOULD BE BLACK</h1>
    </body>
</html>

Teraz widzimy całe spektrum: tag < klasa < id < w tekście. To staje się bardziej złożone. Co się stanie kiedy dodamy dwie klasy, które określają ten sam atrybut, do jednego elementu?

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue pink">THIS SHOULD BE PINK</h1>
    </body>
</html>

Krok 4: Zrozum pierwszeństwo tagów

Zauważ, że umieściliśmy obie klasy razem w tym samym cytacie: class="blue pink". Która klasa przesłonie którą? Druga. Twoja przeglądarka czyta CSS od góry do dołu i próbuje połączyć wszystkie style oraz je zrozumieć. Jeżeli znajduje sprzeczność, wybiera wartość przeczytaną później.

Tutaj przedstawiamy sposób jak być bardziej konkretnym kiedy kiedujemy się z CSS do elementów HTML:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1.blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1 class="blue pink">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Możesz tutaj zobaczyć, że napisaliśmy "h1.blue". Znaczy to dosłownie: "każdy tag h1, który posiada klasę blue zostaje ... stylizowany". Tekst jest niebieski, nie różowy, mimo to, że klasa "pink" jest "niżej" niż klasa "blue". To dlatego, że pierwsza deklaracja jest "bardziej sprecyzowana".

Spójrz na tablicę poniżej. Wyjaśnia ona jak Twoja przeglądarka ocenia jak "silna" jest deklaracja CSS.

Załóżmy, że dla naszego elementu mamy dwie deklaracje:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1.blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1 class="blue pink">THIS SHOULD BE BLUE</h1>
    </body>
</html>
Deklaracja HTML w tekście (x1000) ID (x100) Klasa (x10) Tag (x1)
h1.blue {} <h1 class="blue">TEXT</h1> - - blue (1x10) h1 (1x1)
    0 0 10 1
Całość: 11
Deklaracja HTML w tekście (x1000) ID (x100) Klasa (x10) Tag (x1)
.pink {} <h1 class="pink">TEXT</h1> - - pink (1x10) 0
    0 0 10 0
Całość: 10

Z powyższego możemy wywnioskować, że deklaracja taga HTML i klasy będzie sliniejsza (11 punktów) niż stylizacja atrybutu tylko z klasą (10 punktów). Obie będą przysłonięte jeżeli mamy zadeklarowane ID (100 punktów) lub styl w tekście (1000 punktów).

Sposób w jaki CSS jest "kompilowany" przez przeglądarkę może być czasami mylący, więc upewnij się, że Twój CSS jest łatwy do czytania, i że do stylowania strony nie używasz zbyt wielu klas lub atrybutów id.

Świetną rzeczą o klasie albo deklaracji ID jest to, że możemy je przypiąć do wielu różnych elementów:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <p class="blue">this paragraph will also be blue</p>
    </body>
</html>

To daje nam ogromną elastyczność. Na przykład, możemy dodać cień do czcionek, tabel, lub innych elementów HTML poprzez zdefiniowanie jednej klasy i dołączając ją do lelementów, które chcemy zmodyfikować.

Ostatnie pytanie jakie chcę zadać w tym tutorialu to: Co jeśli mamy dwie lub więcej klas, które dzielą te same zachowania? Dla przykładu:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            .red {
                color: red;
                text-decoration: underline;
            }
            .blue {
                color: blue;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <h1 class="red">THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Możemy wydobyć wspólne zachowanie i nadpisać jeden lub więcej atrybutów z kolejną klasą "poniżej" pierwszej:

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            .red, .blue {
                color: red;
                text-decoration: underline;
            }
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 class="red">THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Definujemy oba atrybuty dla dwóch klass, a następnie przesłaniamy kolor dla klasy "blue".

O rany, dużo tego było jak na jedną próbę. Dobre wieści są takie: to jest prawdopodobnie najtrudniejsza rzecz do zrozumienia z CSS. Od teraz będzie łatwiej. smiley

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Komentarze

  • Z dnia: Frank napisał:

    After creating an app is there already and "index.html" file created? If not, where should it be created? I am using sublime text editor. Thanks!
  • Z dnia: Frank napisał:

    I did another lesson first before this. The series order is not always very clear, but I realize this is a WIP!
  • Z dnia: sameer napisał:

    Hey ,CSS also 2 parts Outer ,Inner and inline like that based on convince we can create CSS(cascaded Style Sheet)

    Outer :

    Inner :

    Inline :

Dodaj komentarz

Możesz się zalogować by skomentować