PROGRAMOWANIE i WEBMASTERKA

Informacje i porady dla programistów i webmasterów. Wersja bardzo beta

Podstawy CSS

Niniejszy wpis adresowany jest do webmasterów, lub może lepiej: do właścicieli stron internetowych, którzy nie bardzo mają pojęcie o tworzeniu stron internetowych ale zarządzają np. blogiem i od czasu do czasu, niewielkim nakładem sił chcieli by np. dodać na swoją stronę jakiś element i zmodyfikować jego wygląd. Jeśli masz jakiekolwiek doświadczenie z CSS myślę, że lekturę poniższego artykułu możesz sobie odpuścić, jeśli natomiast jesteś początkującym webmasterem, który korzysta z gotowych szablonów i chciałbyś zmodyfikować wygląd swojej strony lub dodanego na nią gadżetu, ten wpis może cię zainteresować i, mam nadzieję, czegoś nauczyć.


Co to jest CSS? Kompletne podstawy

Skrót css pochodzi od angielskiej frazy Cascading Style Sheets (po polsku: Kaskadowe Arkusze Stylu). Za pomocą owego CSS’a określamy wygląd, położenie, kolory itp. elementów na stronie internetowej. O ile język HTML opisuje strukturę danych na stronie, pozwala grupować dane, osadzać elementy (np. zdjęcia i grafiki), określa działanie elementów (np. link), o tyle CSS, jak było powiedziane powyżej, pozwala na określenie wyglądu tychże danych. Tak naprawdę pewne elementy języka HTML i CSS niekiedy się pokrywają np. pogrubienie tekstu można zrealizować poprzez umieszczenie go w tagach<b>…</b> lub użycie stylu ‚font-weight:bold’, zmianę koloru tła można uzyskać poprzez ustawienie html’owego atrybutu bgcolor lub css’owego background itd.

Gdzie umieszczona jest informacja o wyglądzie elementu na stronie?

Kiedy w przeglądarce internetowej wprowadzasz adres strony, owa przeglądarka z reguły pobiera z serwera plik zapisany w języku HTML (piszę ‚z reguły’ ponieważ nie zawsze jest to prawda, możesz pobierać przecież bezpośrednio obrazki, pliki binarne, PDF’y itd. ale znakomita większość przesyłanych w internecie danych to właśnie HTML). Jak było powiedziane powyżej HTML opisuje strukturę danych zawartych na stronie. Możesz np. grupować niektóre dane w tzw. kontenery np. <div>To jest tekst pomiędzy znacznikami DIV, za pomocą CSS będzie mu można nadać określony wygląd lub określić jego położenie</div>, określać funkcję/działanie np: <a href=’adres strony’>To jest link po kliknięciu, którego przejdziesz na stronę określoną przez atrybut href</a>, umieszczać na stronie grafikę <img src=’adres obrazka’> itd. Każdemu elementowi strony, zawartemu między znacznikami (tagami), w powyższych przykładach DIV i A, lub opisanymi przez IMG możemy, za pomocą stylów określić wygląd i pozycję na stronie. Aby to osiągnąć należy określić styl elementu. Można to osiągnąć na dwa sposoby:

  1. Dodać styl bezpośrednio do interesującego nas elementu
  2. a) umieścić style bezpośrednio na stronie ale nie w elemencie lub b) dodać do strony Kaskadowy Arkusz Stylu (czyli CSS)

W pierwszym przypadku styl opisujemy za pomocą atrybutu ‚style’ dodanego do tagu HTML np. <div style=’color:blue’>…</div>, <img style=’width:300px’> (określamy kolor tekstu między tagami DIV i szerokość obrazka na 300 pikseli – ale szczegóły później)

Druga opcja jest nieco bardziej skomplikowana bo nasze style elementów umieszczamy poza owymi elementami, których może być przecież sporo i należy określić, który styl tyczy się którego elementu. O tym z chwilę, najpierw odpowiedzmy na pytanie: gdzie? W przypadku 2a styl elementów umieszczamy na stronie HTML pomiędzy tagami <style> … </style> z reguły zaraz za znacznikiem </head>, w przypadku 2b dodajemy do naszej strony HTML plik o rozszerzeniu .css. Robimy to np. poprzez dodanie w sekcji ‚head’ czegoś takiego: <LINK rel=stylesheet type=”text/css” href=”plik_stylu.css” />.

Podsumujmy, styl elementów naszej strony możemy umieścić w:

1) Bezpośrednio w elemencie,np:
<div style="background: blue; color: yellow;">Ten blok tekstu będzie w kolorze żółtym na niebieskim tle</div>
2) W pliku HTML w tagach <style>, np:
<head>
....
</head>
<style>
.zoltoniebieski {background:blue;color:yellow}
.waski {width:200px}
</style>

3) W zewnętrznym pliku styli dołączanym do naszej strony HTML,np:
<head>
....
<LINK rel=stylesheet type="text/css" href="plik_stylu.css" />
</head>

Gdzie umieścić style strony/CSS strony?

No dobrze, jeśli mamy trzy sposoby umieszczania informacji o stylach, to który z nich wybrać? Wbrew pozorom odpowiedź jest bardzo prosta. Strony publikowane w sieci powinny posłużyć się sposobem trzecim, a więc umieszczać style w dołączanym pliku CSS. Dlaczego? Są na to dwa główne powody: wydajność i wygoda.

Wydajność – w dobrze zaprojektowanych witrynach, jeden plik css ‚obsługuje’ wiele stron (taki sam plik dołączony jest do wielu, być może wszystkich stron witryny), przeglądarka raz pobiera taki plik a później korzysta z jego lokalnej kopii na komputerze przeglądacza – mamy więc zaoszczędzony transfer i moc serwera, a przeglądaczowi szybciej otwierają się strony.

Wygoda – zdecydowanie łatwiej jest modyfikować/poprawiać wygląd strony, że nie wspomnę o czytelności źródła, mając zewnętrzny plik css, nie mówiąc o tym, że jeśli zdecydujemy się na redesign strony, w niektórych przypadkach, wystarczy podmienić tylko plik stylu i gotowe.

Dwa pierwsze sposoby świetnie sprawdzają się na etapie projektowania strony. Nie musimy ‚biegać’ po kilku plikach, wszystko mamy w jednym miejscu. Ja osobiście, projektując jakiś element, używam notorycznie styli w elementach lub w sekcji <style> kiedy całość jest gotowa przenoszę je do zewnętrznego pliku css.

Selektory, czyli co do czego

Przechodzimy powoli do ‚mięsa’, czyli do określania stylu elementów i tworzenia pliku CSS. Jak było powiedziane wcześniej, w przypadku zdefiniowania stylu jako atrybutu elementu, nie mamy, z oczywistych powodów, problemów z określeniem, któremu elementowi styl ten jest przypisany. W przypadku umieszczenia stylu na zewnątrz, musimy mieć sposób określenia, któremu elementowi odpowiada dany styl. W tym celu używamy tzw. selektorów

Typowy opis stylu w pliku .css lub między tagami <style> wygląda tak:
selektor {definicja stylu}, dokładna składnia: [selektor] {[definicja stylu]}
np.
div {color:blue;border:1px solid black}
.zolty {color:yellow}
#pomarancz {background:orange}
</div>

Selektor niczym nie poprzedzony odnosi się do wszystkich elementów zawartych między tagami określonymi przez ten selektor. W powyższym przykładzie, wszystkie elementy DIV strony html będą miały tekst koloru niebieskiego i będą otoczone czarną ramką o grubości jednego piksela

Selektor poprzedzony kropką odnosi się do elementów danej klasy, czyli elementów posiadających atrybut class=’nazwa_klasy’, np. <div class=”zolty”>..</div>, <a class=”zolty”>>link</a>. W naszym przykładzie elementy o klasie ‚zolty’ będą miały żółty kolor tekstu

Selektor poprzedzony krzyżykiem (#) wskazuje na element o identyfikatorze określonym nazwą selektora, czyli na element z ustawionym atrybutem id=’ident’ np. <div id=’pomarancz’>

Style przetwarzane są sekwencyjnie czyli w jeśli nastąpi konflikt (dwa selektory pasują do jednego elementu), decyduje styl późniejszy. W naszym przypadku jeśli w pliku HTML wystąpi <div class=”zolty”> kolor tekstu w między tagami DIV będzię żółty nie niebieski

Selektory można łączyć!!! (trzy wykrzykniki bo to bardzo ważna cecha) np. div.zolty dopasuje się do wszystkich div’ów z klasy ‚zolty’, nie dopasuje się do np. <p class=”zolty”> Selektor .zolty div odpowiada wszystkim div’om w elemencie o klasie zolty

Kilka selektorów może mieć taką samą definicję stylu w tym przypadku selektory oddzielamy przecinkiem. Np. div, td.zolty, a.zolty

Powyższy krótki opis selektorów nie wyczerpuje wszystkich ich możliwości ale myślę, że na początek to wystarczy. Podałem tu najważniejsze i najczęściej używane selektory CSS.

Dla rozjaśnienia i nabrania wprawy jeszcze kilka przykładów
p, div // wszystkie elementy <P> i <DIV>
p.moj-paragraf //wszystkie elementy <P class='moj-paragraf'>
.moja-klasa // wszystkie elementy z atrybutem class='moja-klasa' niezależnie od użytego tagu
#obiekt01 // element o id='obiekt01', niezaleznie od użytego tagu
div#obiekt01 // element o id='obiekt01' ale tylko jeśli jest DIV'em
#obiekt01 a // wszystkie linki w elemencie o id='obiekt01'
.klasa a // wszystkie linki w elementach klasy .klasa
.klasa01 a,.klasa02 a // wszystkie linki w elementach klasy .klasa01 i klasy .klasa02

Niektóre definicje stylu

Aby wpis był pełny podam poniżej, w dość dużym skrócie, niektóre, częściej używane, definicje stylu. Prawdopodobnie już niedługo pojawią się na tym blogu wpisy dokładniej opisujące to zagadnienie. Na razie jednak aby uświadomić jak to wszystko wygląda kilka przykładów. Pełną listę definicji stylów można znaleźć np. tu: http://www.w3schools.com/css/ (strona w języku angielskim ale jedna z popularniejszych i najlepszych)

Właściwość Opis Przykłady
color kolor tekstu color:yellow, color:#909090
background wygląd tła (nie tylko kolor) background:yellow, background:url(‚obrazek-tla.jpg’)
border obramowanie elementu border:1px solid black (czarna ramka o grubości jednego piksela)
margin odstęp od elementów zewnętrznych margin:10px (odstęp ze wszystkich stron 10 pikseli), margin 10px 20px 5px 15px (odstęp od góry, prawej, dołu, lewej)
padding odstęp wewnętrznych elementów od skraju elementu opisywanego stylem padding:20px (20 pikseli odstępu od skraju elementu)
width szerokość elementu width:200px (dwieście pikseli)
height wysokość elementu height:200px (dwieście pikseli)
font-family czcionka tekstu w elemencie font-family:tahoma (tekst będzie wypisany ‚tahomą’)
font-size wielkość czcionki font-size:10px, font-size:60%
font-weight pogrubienie tekstu font-weight:normal, font-weight:bold, font-weight:600
text-decoration dekoracja tekstu text-decoration:underline (podkreślenie), text-decoration:line-through (przekreślenie)

To na razie tyle podstaw CSS, już niedługo, mam nadzieję, że w przeciągu kilku dni, postaram się popełnić więcej wpisów na temat CSS dla początkujących. Bądźcie cierpliwi.

komentarzy 2 do “Podstawy CSS”


  1. Asia

    Super stronka dużo wyjaśnia:) Mam pytanie odnosnie artykułu. Mam strone w joomla. W katalogu szablonu css jest plik templates_css.php i kod z tego pliku wyświetla się w kodzie strony. Jest go bardzo dużo. Nie wiem jak to usunąć, żeby go nie wywietlało. Nie wiem czy przyczyną nie jest brak czegos w stylu <link href="http://www.nazwastrony.pl/templates/nazwa/css/template_css.css&quot; rel="stylesheet"?czy moze inna przyczyna?


  2. admin

    @Asia, po pierwsze przepraszam, że tak długo nie odpowiadałem. Inne obowiązki itd. … Mam nadzieję, że już sobie poradziłaś. Niestety joomli za bardzo nie znam, polecam jakieś forum joomlowców.

Komentuj

*