Style CSS - lekcja 1.

 

W pierwszej części samouczka CSS dowiesz się:

  • gdzie szukać informacji o stylach CSS,
  • jak używać style CSS,
  • jak może wyglądać przykładowy template strony w CSS bez tabelek.

Warto również wspomnieć, że przydatna jest podstawowa wiedza z zakresu (X)HTML (przykłady będą pisane w XHTML).

Zaczynajmy...

Gdzie szukać?

Po pierwsze, warto znać podstawowe źródła dotyczące CSS. Są to:

Ponadto w sieci aż roi się od tutoriali, więc ten samouczek możesz uznać za zbędny. Ale mimo wszystko postaram się pokrótce omówić najważniejsze moim zdaniem kwestie, abyś szybko dotarł/dotarła do szukanej informacji.

Jak używać style CSS

Po pierwsze, style CSS mają specyficzną konstrukcję. Wygląda ona tak:

selektor { własność: wartość; }

Całe zagadnienie związane z selektorami mogłoby zająć cały oddzielny samouczek. Jeśli chodzi o pary "własność - dopuszczalne wartości", to są one opisane bardzo dobrze na wymienionych wcześniej stronach (szczególnie W3Schools).

Zanim przejdziemy do kolejnego etapu, analizując przykład zastosowania kodu CSS, powinniśmy się dowiedzieć, gdzie można umieszczać style CSS. Można to robić na trzy sposoby:

  • w zewnętrznym pliku CSS,
  • wewnątrz sekcji head,
  • w atrybucie style znacznika.

Pierwszy sposób polega na dopisaniu odpowiedniego tagu, np.:

<link rel="stylesheet" type="text/css" href="style.css" />

Należy zrobić to w sposób odpowiedni dla danego formatu dokumentu, czyli w przypadku XHTML należy umieścić tą linijkę w obrębie tagu head (pomiędzy "<html>" i "</html>").

Użyta wartość "style.css" to w tym przypadku lokalizacja pliku z arkuszem stylów.

Drugi sposób polega na umieszczeniu arkuszy stylów nie w zewnętrznym pliku, ale w tym samym dokumencie, wewnątrz kodu HTML. Dzieje się to w sposób analogiczny do opisanego powyżej, tyle że zamiast tagu z określeniem lokalizacji pliku należy dodać znacznik z treścią stylów:

<style type="text/css">
<!--
selektor { własność: wartość; }
-->
</style>

Oczywiście zamiast "selektor", "własność" i "wartość" podajemy odpowiednio prawdziwe: selektor, własność i wartość dla danej własności.

Trzecia metoda to tzw. style lokalne. W tym wypadku nie będziemy już potrzebować selektora, bo styl będzie się odnosił do konkretnego elementu, w którego atrybucie zostanie umieszczony. I tak zapis:

<p style="własność: wartość;">testowy akapit</p>

spowoduje, że cały akapit w widocznym tagu "p" otrzyma styl określony za pomocą zapisu "własność: wartość". Jeśli to będzie np. "font-weight: bold", to cały tekst akapitu powinien zostać pogrubiony.

Przykładowy template bez użycia tabelek

Od początku istnienia standardu HTML twórcy stron WWW starali się organizować wygląd stron w bardziej "przystępnej" do czytania formie. Niestety działo się to najczęściej przy użyciu tabelek, co z kolei utrudniało prawidłową interpretację tekstu przez automatyczne mechanizmy.

W tej części tutoriala pokażę, jak można wykorzystać CSS do ładnego ułożenia zawartości na stronie, tak jak to czyniono w przeszłości najczęściej przy użyciu tabelek.

Na początek zajmijmy się zdefiniowaniem struktury dokumentu HTML, a konkretnie sekcji body:

<body>
  <div id="wrapper">
    <div id="header">#header</div>
    <div id="main">#main</div>
    <div id="right">#right</div>
    <div id="footer">#footer</div>
  </div>
</body>

Jak widzimy, sekcja body zawiera jeden znacznik div, w którym znajdują się pozostałe cztery. Spośród tych znajdujących się wewnątrz pierwszy będzie przeznaczony na nagłówek, drugi na właściwą treść, trzeci na pasek po prawej stronie, a czwarty na stopkę. Dopóki nie stworzymy do nich arkusza stylów, będą się wyświetlać jeden po drugim. Zawartość arkusza (umieszczona w odpowiedni sposób w sekcji head albo w oddzielnym pliku .css) przedstawiać się będzie następująco:

#wrapper {
  background-color: #faa;
  margin: 0 auto;
  width: 350px;
}
#header {
  background-color: #afa;
  clear: both;
}
#main {
  background-color: #aaf;
  float: left;
  width: 250px;
}
#right {
  background-color: #ffa;
  float: left;
  width: 100px;
}
#footer {
  clear: both;
}

W efekcie powstanie nam taki układ, wyśrodkowany w oknie przeglądarki, jak można zobaczyć w załączniku do tego wpisu. Dla ułatwienia każdy element uzyskał inny kolor, a szerokości każdego z nich zmniejszone do potrzeb kursu - nic nie stoi na przeszkodzie, żeby dopasować go do swoich potrzeb.

Do ściągnięcia

image/png iconPrzykład prostego layoutu CSS
tutorial-css-1-layout.png 4.84 KB