Kurs CSS – Od podstaw cz.1

Kurs CSS - Od podstaw cz.1

Kurs CSS – Od podstaw cz.1

Witam w pierwszej części kursu. Kurs CSS – Od podstaw ma na celu przybliżyć Ci działanie języka CSS w możliwie najłatwiejszy i najbardziej przyjazny sposób. Jednak nie wszystko da się prosto wyjaśnić.

Pamiętaj, że tylko ćwiczenia pozwalają utrwalać nabytą wiedzę i ją poszerzać. Zdobywasz w ten sposób cenne doświadczenia.

Czym jest CSS i do czego służy?

CSS – Cascading Style Sheets (Kaskadowy arkusz stylów).
Współpracuje ściśle z jeżykiem HTML. Jeśli nie wiesz czym jest HTML, to zapraszam do kursu HTML – od podstaw.

HTML opisuje treść, czyli co ma się znaleźć na stronie. Np. obrazek, link, akapit tekstu itp.
CSS mówi, jak ma dany element wygląda. I, w którym miejscu ma się znaleźć. Od kilku lat kod CSS i kod HTML zapisujemy w oddzielnych plikach.
Dlatego, że dzięki temu kod jest bardziej czytelny i przejrzysty.
Oddzielenie treści strony (HTML) od jej wyglądu (CSS).

Dlaczego należy pisać kod CSS w osobnym pliku?

  • Kod jest bardziej czytelny i łatwej się w nim odnaleźć.
  • Za pomocą jednego pliku CSS może nadać wygląd dla kilku stron jednocześnie.
  • Łatwej zarządzać kodem i wyglądam strony.
  • Można pisać mniej kodu.
  • Znacznie przyśpiesza pracę.

Przykład:
Mamy 4 strony HTML. Na każdej z nich jest czarne tło, biały font i kilka akapitów tekstu. Nagle chcemy zmienić kolory na inne, to musimy zrobić to ręcznie w kilku lub nawet kilkunastu miejscach na każdej ze stron.

Kurs CSS - Od podstaw, Zalezy CSS.

Poza tym największym minusem umieszczania kodu CSS bezpośrednio w pliku HTML jest to, że generuje, to zwyczajnie więcej kodu. Co z kolei sprawia, że przeglądarka internetowa musi go więcej wczytać. Więc strona będzie się dużej ładować użytkownikowi, który na nią wejdzie.

A to z punktu widzenia optymalizacji strony nie jest najlepszy zabieg. Taki kod nie dość, że jest „ciężki” dla przeglądarki, to jest dodatkowo mało czytelny i trudno się w nim połapać.

Rodzaje stylów i hierarchia.

Wyróżniamy trzy rodzaje dodawania stylów CSS:

  1. Style inline, czyli lokalnie bezpośrednio w kodzie HTML.
    W hierarchii ważności stylów, będą nadpisywały zewnętrze style CSS i style w sekcji head.
    Te style dla przeglądarki zawsze będą ważniejsze niż style zapisane w innym miejscu na stronie.

    <p style="color:red;">
    	Akapit tekstu
    </p>
    
    Ten kawałek kodu umieszczony w pliku HTML mówi, że akapit ma mieć kolor czerwony.
  2.  Style w sekcji HEAD.
    To style, które umieszczamy w dokumencie HTML, ale już nie w samym kodzie, a w sekcji HEAD.
    Co pozwala bardziej uporządkować kod.
    Ten rodzaj stylów w hierarchii jest na drugim miejscu. Czyli będzie ważniejszy od zewnętrznych stylów w oddzielnym plik CSS.  I będzie je nadpisywał. Ale nie będzie ważniejszy i nie nadpisze stylów inline.

    <head>
           <style type="text/css">
    			body {background:white; text-align:center; font-size:16px;}
    			p { font-size:18px; color:red;}
    	</style>
    		
    </head>
    
    Ten Kawałek kodu mówi, że body, czyli cała strona ma mieć białe tło 
    i wyśrodkowany tekst wielkości 16px. 
    A każdy akapit ma mieć kolor czerwony i wielkość tekstu 18px.
  3. Zewnętrzne style, czyli w osobnym pliku np. style.css.
    Są w hierarchii najniżej, bo nadpisują tylko wbudowane style przeglądarki.
    Ale i tak uważam je za jedyny słuszny wybór jeśli chodzi o CSS.

    body
    {
        background-color: #272f33;
        background-image: url("images/tlo.jpg");
        font-family: 'Lato', sans-serif;
        margin: 0;
    }
    #container
    {
        width: 1000px;
        height: 890px;
        margin-left: auto;
        margin-right: auto;
    }
    
    Przykład kodu w zewnętrznym pliku CSS.

    Ze wszystkich wymienionych stylów tylko zewnętrzne są wstanie zapewnić najmniejszą ilość kodu, przejrzystość, uniwersalność.
    Można jeden plik przypisać do wieku stron, nie dublując kodu.
    Taki sposób daje też dużo więcej możliwości CSS niż inne.

    Jak dołączyć taki zewnętrzny plik ze stylami do pliku HTML?

    W sekcji HEAD podajemy link do pliku CSS.
    Od tej pory każda strona, w której podany link będzie korzystać z tych stylów.

    <link rel="stylesheet" type="text/css" href="style.css"/>
    
    w atrybucie href="" podajemy adres do pliku CSS

    Pamiętaj, że jest to Kurs CSS – Od podstaw cz.1.
    Myślę, że taka ilość wiedzy wystarczy na część pierwszą.
    Trzeba to sobie wyjaśnić zanim zacznie się cokolwiek kodować.
    W następnej części kursu przejdziemy już do kodu i praktyki.

    Pozdrawiam.

4 thoughts on “Kurs CSS – Od podstaw cz.1

  1. 1) w linii href=”” podajemy adres do pliku CSS
    powinno być dla atrybutu href, albo w atrybucie href

    2)
    type=”text/css” w wersji HTML5 jest opcjonalny i niewymagany

    3) p { font-size:18px; color:red;
    brakuje klamry – }

    4) Zgadzam się że powinna być kolorowa składnia kodu

    1. Witaj, masz rację rzeczywiście przeoczyłam klamrę, co do kolorowej składni pojawi się na pewno. Dziękuję za sugestię 🙂
      Pozdrawiam.

  2. Fajna stronka, ale na boga, proszę o mniej błędów. Chodzi mi nie tylko o literówki, ale także stylistykę zdań. Po drugie, kod ładniej wygląda po dodaniu odpowiednich kolorów dla jakichś funkcji czy argumentów itp. 🙂 Powodzenia w prowadzeniu bloga!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *