Przejdź do treści

CSS / CSS dla zielonych - Kurs CSS

W tym rozdziale dowiesz się...

Kurs języka CSS dla zupełnie początkujących. Zaprojektuj własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do internetu za darmo. Stworzenie strony WWW jest naprawdę proste. Zapraszam!

  • CSS
    Zaczynamy!

    Czy projektowanie wyglądu stron internetowych naprawdę jest tak trudne jak mówią?

  • CSS
    Edytory CSS

    Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

  • CSS
    Wstawienie arkusza stylów

    Jak wygląda typowy sposób dołączania arkusza CSS?

  • CSS
    Arkusz stylów

    Jak wygląda typowy arkusz CSS?

  • CSS
    Kolor tła oraz tekstu

    W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

  • CSS
    Czcionka

    W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

  • CSS
    Wyrównanie tekstu

    W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

  • CSS
    Kolor odsyłaczy

    Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

  • CSS
    Klasy selektorów

    W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

  • CSS

Zaczynamy!

Czy projektowanie wyglądu stron internetowych naprawdę jest tak trudne jak mówią?

Zapewne znasz już podstawy języka HTML - jeśli nie, zapraszam najpierw do lektury rozdziału: HTML dla zielonych.

Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę internetową za pomocą języka HTML, a następnie dzięki CSS można zmienić jej wygląd. Dlatego właśnie znajomość obu tych języków - HTML i CSS - jest kluczowa, aby zbudować profesjonalną stronę WWW. Jeśli jeszcze nie masz pewności, czy warto się uczyć języka CSS, zobacz rozdział: Dlaczego warto używać CSS?.

Jeśli język CSS jest dla Ciebie "czarną magią" i wydaje Ci się, że arkusz CSS (miejsce gdzie określa się wygląd strony) jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Zaprojektowanie wyglądu strony internetowej jest prostsze niż Ci się wydaje. Zatem nie trać już czasu na wymówki typu: Ja się niczego nie nauczę! i tym podobne, bo to nieprawda. Zacznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

Edytory CSS

Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

Style CSS można oczywiście pisać ręcznie, ponieważ jest to zwykły tekst - tak jak w przypadku samego HTML. Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają automatycznie zdefiniować np. wielkość i kolor czcionki, kolor odsyłaczy czy tła (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy.

Kreatory stylów (ang. wizards) są najczęściej wbudowane w edytory HTML. Zwykle wybór tego samego edytora do tworzenia dokumentów HTML i arkuszy CSS jest dobrym pomysłem. Jednak jeśli chcesz, możesz również korzystać z dedykowanego edytora do tworzenia stylów CSS - np.:

Wstawienie arkusza stylów

Jak wygląda typowy sposób dołączania arkusza CSS?

W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Tu wpisz opis zawartości strony">
	<title>Tu wpisz tytuł strony</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

Tu wpisuje się treść strony

</body>
</html>

Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje się w tym samym katalogu co dokument *.html. Można go oczywiście zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka).

Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego serwisu. Czyż to nie piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony tylko po to, aby zmienić na niej np. kolor albo rozmiar tekstu :-)

Arkusz stylów

Jak wygląda typowy arkusz CSS?

Arkusz stylów jest zwykłym dokumentem tekstowym, więc do jego stworzenia możesz użyć Twojego ulubionego edytora HTML albo, jeśli wolisz, dedykowanego edytora CSS. W pliku tym wpisuje się listę tzw. reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części:

  1. Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd
  2. Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd
selektor1 {
	Tu wpisuje się deklaracje stylów
}

selektor2 {
	Tu wpisuje się deklaracje stylów
}

selektor3 {
	Tu wpisuje się deklaracje stylów
}

Oczywiście możliwe jest wstawienie więcej niż trzech reguł stylów w jednym arkuszu - każda odpowiada za zmianę wyglądu elementu na stronie opisanego selektorem. O tym jak tworzyć selektory i co można wpisać w deklaracji stylów dowiesz się już w kolejnych punktach tego rozdziału. Zapraszam do dalszej lektury.

Kolor tła oraz tekstu

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

Aby zmienić wygląd jakiegoś elementu na stronie, trzeba go najpierw wskazać. W języku CSS robi się to za pomocą tzw. selektora. W najprostszym przypadku jest to nazwa wybranego znacznika, który wcześniej wstawiliśmy do naszego dokumentu HTML. Wszystko co znajduje się wewnątrz tak wskazanego znacznika - czyli zarówno tekst, jak i inne znaczniki - otrzyma style podane w deklaracji. Przykładowo, aby zmienić kolor tła oraz teksu na całej stronie, możemy się posłużyć selektorem body, ponieważ właśnie wewnątrz znacznika <body>...</body> znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod:

body {
	background-color: black;
	color: white;
}

Zwróć uwagę, że deklaracja stylów, którą ujmuje się w nawiasy klamrowe, składa się tutaj z dwóch linijek. Każda z nich rozpoczyna się od podania tzw. cechy (inaczej własności), po której następuje wartość. Cecha określa, co chcemy zmienić w wyglądzie wybranego elementu, natomiast wartość - w jaki sposób ma się to zmienić. Zatem gdyby przetłumaczyć powyższą regułę stylów na bardziej zrozumiały język, brzmiałaby ona mniej więcej tak: dla całej zawartości znacznika body (selektor) zmień kolor tła (cecha background-color) na czarny (wartość black) i kolor tekstu (cecha color) na biały (wartość white).

Pamiętaj, aby po wpisaniu cechy (własności) zawsze postawić znak dwukropka, a po każdej wartości - średnik. Zwróć również uwagę, że jeśli cecha (bądź wartość) zawiera znak myślnika (np. background-color), to przed nim ani po nim nie może znajdować się spacja.

Aby ustalić inny kolor tła albo tekstu, wystarczy że w miejsce wartości wstawisz wybraną definicję koloru - zobacz: Wykaz kolorów.

Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.

Czcionka

W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

Podobnie jak w przypadku koloru tła oraz tekstu dobrze jest również ustalić rozmiar i krój czcionki na całej stronie.

body {
	font-size: rozmiar;
	font-family: rodzaj;
}
gdzie jako "rozmiar" należy wpisać:
xx-small
Czcionka najmniejsza
x-small
Czcionka bardzo mała
small
Czcionka mała
medium
Czcionka średnia
large
Czcionka duża
x-large
Czcionka bardzo duża
xx-large
Czcionka największa
Natomiast zamiast rodzaj należy wpisać krój czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to trzeba ją objąć w znaki apostrofu (np.: 'Times New Roman').

Z definiowaniem kroju czcionki wiąże się pewien problem. Jeśli użytkownik oglądający Twoją stronę nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w systemie Windows najprawdopodobniej będzie to 'Times New Roman', chociaż to też nie jest pewne). Właśnie z tego powodu możliwe jest podanie po przecinku listy rodzajów czcionek, z których zostanie użyta ta, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Na przykład:

body {
	font-size: medium;
	font-family: Arial, Helvetica;
}

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Wyrównanie tekstu

W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

Tekst na stronie internetowej najlepiej jest wpisywać w akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów:

p {
	text-align: wyrównanie;
}

Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób:

  • left - wyrównanie tekstu do lewego marginesu (domyślnie)
  • right - wyrównanie do prawego marginesu
  • center - do środka (wyśrodkowanie)
  • justify - do obu marginesów jednocześnie (justowanie)

Kolor odsyłaczy

Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

a {
	color: kolor;
}

a:hover {
	color: podświetlenie;
}
gdzie "kolor" oznacza definicję koloru, jaką mają przyjąć wszystkie odsyłacze na stronie. Natomiast "podświetlenie" określa definicję koloru, jaką przyjmie odsyłacz po wskazaniu go myszką.

Zwróć uwagę, że koloru podświetlenia nie da się podać w inny sposób, niż przy pomocy języka CSS. A jest to bardzo przydatna możliwość. W ten sposób po wskazaniu elementu myszą użytkownik od razu widzi, że jest to element interaktywny, który można kliknąć, aby przejść pod podany adres.

Klasy selektorów

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów.

Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class:

<div class="menu-nawigacyjne">...</div>

Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki:

.menu-nawigacyjne {
	background-color: gray;
	color: silver;
}

Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a nazwą klasy w selektorze nie może być żadnych białych znaków - nawet spacji. W samej nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych. Nazwa klasy nie może również zawierać spacji - zamiast niej możesz użyć np. znaku myślnika.

Co ważne, nawet jeśli ustaliliśmy kolor tła oraz tekstu na całej stronie, menu nawigacyjne nadal może mieć swoje własne kolory. Deklaracje wyglądu przypisane do klasy są ważniejsze niż te przypisane do znacznika.

Możemy nawet określić oddzielny kolor odsyłaczy, które znajdują się w menu. Robi się to poprzedzając w selektorze właściwe znaczniki nazwą klasy. W tym przypadku spacja pomiędzy nazwą klasy a nazwą znacznika odsyłacza jest konieczna.

.menu-nawigacyjne a {
	color: black;
}

.menu-nawigacyjne a:hover {
	color: white;
}

Dzięki temu prostemu wpisowi w arkuszu stylów, za każdym razem kiedy na dowolnej podstronie serwisu umieścimy następujący kod:

<div class="menu-nawigacyjne">
	<a href="...">...</a>
	<a href="...">...</a>
	<a href="...">...</a>
</div>

w przeglądarce internetowej wyświetli się bloczek, w którym każdy odsyłacz będzie miał kolor czarny (black), a po wskazaniu go myszą zmieni się na biały (white).

Podsumowanie

To by było na tyle. Poznane tu polecenia powinny pozwolić Ci nie tylko na napisanie prostej strony WWW, ale zarazem określenie jej wyglądu w profesjonalny sposób. W dalszych rozdziałach Kursu CSS poznasz m.in. bardziej zaawansowane techniki tworzenia selektorów oraz rozbudowaną listę własności, dzięki którym zyskasz jeszcze większe możliwości stylizacji elementów Twojego serwisu.
Zapraszam...

Facebook