P-Programowanie

Podstawy arkusza stylów CSS

Ostatania modyfikacja: 9 sierpnia 2014, kategoria: Html & Css

cssss Język CSS został opracowany przez organizację W3C do prezentowania elementów języka HTML w różnych formach. Arkusz stylów CSS jest obecnie dołączony do każdej witryny znajdującej się w internecie. Arkusz stylów to zbiór określonych reguł odpowiedzialnych za wygląd strony. Dzięki takiemu rozwiązaniu dokumenty są łatwiejsze do modyfikacji a sam kod HTML zajmuje mało miejsca. CSS jest bardzo łatwy do opanowania, wystarczy poznać kilka podstawowych dyrektyw.

Dołączenie arkusza stylów do dokumentu

Style CSS możemy dopisać w dokumencie HTML, są to tzw. style wewnętrzne. Style można dopisywać lokalnie do poszczególnych obiektów dodając im atrybut style=””.  Powinno się jednak trzymać je w osobnych plikach i wczytywać w sekcji head dokumentu:

W importowanym pliku możemy wskazać kolejne pliki arkusza. Dzięki temu możemy utrzymać porządek i hierarchię odpowiednich plików:

Klasa obiektu

Każdy obiekt może posiadać określoną klasę. Wiele różnych obiektów może korzystać z tej samej klasy tak samo jak jedna klasa może być użyta wiele razy. Nazwę klasy poprzedza kropka:

Klasy można łączyć. Jeden obiekt może mieć odwołania do kilku różnych klas jednocześnie:

Identyfikator obiektu

Każdy obiekt może posiadać swój określony identyfikator. Identyfikator może zostać użyty tylko raz. Nie może być dwóch obiektów korzystających z tego samego identyfikatora. Identyfikator poprzedza krzyżyk (hash).

Identyfikatory mogą być łączone z klasami. Nie mogą być natomiast łączone z innymi identyfikatorami:

Znaczniki

Za pomocą CSS możemy ustalić wygląd określonych znaczników nie nadając im klas ani identyfikatorów. Znaczniki nie są poprzedzone w arkuszu stylów żadnym znakiem. Należy pamiętać że po określeniu wyglądu znacznika jego wygląd zmienia się w całym dokumencie, a nie tylko w określonym obiekcie.

<pre><code class=”css”><span class=”tag”>b</span> <span class=”rules”>{
<span class=”rule”><span class=”attribute”>color</span>:<span class=”value”> red</span>;</span>
<span class=”rule”>}</span></span></code></pre>

 

 

 

 

 

Możemy uściślić w jakim miejscu modyfikujemy znacznik. Wystarczy przed nazwą znacznika dodać nazwę obiektu, klasy lub identyfikatora w jakim się znajduje:

Dzięki temu zabiegowi nie zmienimy wyglądu znacznika dla całego dokumentu.

Selektor potomka

W CSS istnieje wiele selektorów i wszystkich nie opiszę w tym artykule. Jednym z ważniejszych jest selektor Potomka. Odpowiada on za atrybuty elementów znajdujących się w określonej hierarchii w dokumencie. Możemy np. ustalić atrybuty wykazu znajdującego się w prawym menu bez używania klas i identyfikatorów.

W pokazanym wyżej przykładzie atrybuty zostaną nadane odsyłaczowi (a), który znajduje się w wykazie (li ul), który to wykaz znajduje się w obiekcie o identyfikatorze menu. Początkujący często mylą Selektor potomka z grupowaniem selektorów. W grupowaniu selektorów używa się przecinków do oddzielenia znaczników, a w selektorze potomka znaczniki leżące niżej w hierarchii oddziela się spacją. Tak wygląda grupowanie:

A tak wygląda grupowanie selektora Potomka:

Selektor uniwersalny

Selektor uniwersalny oznaczony jest gwiazdką (*). Określa on wygląd i atrybuty dla wszystkich elementów strony. Należy używać go ostrożnie.

W ten sposób marginesy wewnętrzne i zewnętrzne wszystkich elementów zostały usunięte.

Podsumowanie

Istnieje wiele innych selektorów lecz są dość rzadko używane przez początkujących. Wszystkie najważniejsze cechy CSS niezbędne przy tworzeniu pierwszej strony opisałem wyżej.

Użytkownik xxx napisał:

19 kwietnia 2013


Spoko jest :) !

Użytkownik Piotr napisał:

27 października 2013


Szczerze wyrażając swój pogląd w temacie przedmiotu którym jest ów bloog, ujmę prostym orzeczeniem: „jest pomocny i służy wyjaśnieniu faktów z których wyciagane są wnioski w świetle wiedzy programistów do celów potrzebnych początkującym webmasterom”.

Użytkownik Maciek napisał:

07 września 2014


Nie wiem czy źle zrozumiałem, czy to Twój błąd, ale czytamy w artykule powyżej:
„Identyfikator może zostać użyty tylko raz.”,
a za chwilę w przykładzie mamy:
karol kowalski
arek kowalski
Proszę o wyjaśnienie tej kwestii i pozdrawiam :)

Użytkownik Karol napisał:

09 września 2014


Dzięki za wypatrzenie błędu. Klasa jest typem bardziej ogólnym więc będzie „osobą”, „imiona” to typ sprecyzowany, muszą być identyfikatorami. Należy zamienić definicję klasy oraz identyfikatora.

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0