CSS

CSS (Cascading Style Sheets) - Kaskadowe Arkusze Stylów - tworzony i rozwijany od 1994 roku język służący do programowania wyglądu stron HTML.

Zanim stworzono CSS do opisu wyglądu strony używano specjalnych znaczników (np. <font size="3" face="arial"> , <center>) albo atrybutów (np. color="green"). Programowanie wyglądu strony przy użyciu tych znaczników było: (1) uciążliwe dla dużych stron (poza tym zwiększało ich rozmiar); (2) zaciemniało strukturę treści dokumentu. Poza tym w przypadku, gdy trzeba było zmienić wygląd strony należało przeglądać i zmieniać wszystkie pliki *.html, które tą stronę tworzyły.

W przypadku CSS możliwe jest zakodowanie wyglądu strony w jednym pliku (np. style.css), a później w każdym z plików HTML wskazywanie na ten plik jako źródło styli używanych do wyświetlania strony. W ten sposób zmieniając jeden plik, możemy zmieniać wygląd wszystkich dokumentów HTML.

Arkusze stylów

Reguły stylów mogą być zawarte w zewnętrznym pliku z rozszerzeniem .css (arkuszu stylów).
Arkusze stylów dodajemy do dokumentu HTML przy pomocy znacznika link wewnątrz nagłówka dokumentu. Poniższy kod oznacza, że do kontroli wyglądu danego dokument HTML używane będą style CSS zapisane w pliku style.css (umieszczonym w tym samym katalogu, co dany plik HTML).

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

Atrybuty:

  • rel - definiuje typ relacji między dołączanym dokumentem, a dokumentem HTML — w tym przypadku stylesheet (arkusz stylów)
  • href - adres dołączanego elementu (pełny adres URL lub nazwa pliku)

Struktura arkusza stylów jest taka sama jak zawartość omówionego powyżej znacznika style — jest to zbiór reguł opisanych przez selektory i cechy stylów.

Podsumowując - aby formatować wygląd dokumentu HTML przy pomocy CSS trzeba w pliku HTML (w sekcji <head>) umieścić <link rel="stylesheet" href="style.css />, a poza tym stworzyć plik style.css (nazwa moze byc inna, np. zielonastrona.css, ale nazwa style.css jest powszechnie stosowana).


Selektory i cechy — definiowanie stylu

Style definiujemy w formie reguł:

selektor {
    cecha: wartość;
    inna-cecha: wartość;
}

Selektor wskazuje do których elementów dokumentu HTML mają być dodane wymienione między nawiasami style.
Najprostszym selektorem jest podanie nazwy znacznika. Wtedy style będą dodane do wszystkich obiektów danego typu.

Przykładowo:

p {
    font-size: 20px;
}

Więcej cech

Oto przykład obrazujący różne cechy dla akapitu:

p {
    font-size: 20px;
    font-family: Arial, Verdana, sans-serif;
    color: white;
    background-color: black;
    text-align: right;
    text-decoration: underline;
}

Formatowanie tła:

1. Tło o jednolitym kolorze:
trzy sposoby określania koloru (słowo/wartość RGB w systemie szesnastkowym/wartość składowych RGB)

background-color: red;
background-color: #FF9900;
background-color: rgb(255,0,0);

Składowe RGB to wartości pomiędzy 0 a 255 określające odpowiednio "ilość" koloru czerwonego (Red), zielonego (Green) oraz niebieskiego (Blue). Wartość rgb(255,40,0) oznacza, że barwa składa się z maksymalnej ilości koloru czerwonego (255), 40 koloru zielonego i w jej skład nie wchodzi kolor niebieski. Do modeli przestrzeni barw jeszcze wrócimy na zajęciach z KCK :).

2. Obrazek jako tło elementu

background-image: url('obrazek.png');

Domyślnie obrazek będzie się powtarzał. Można to kontrolować:

background-repeat: no-repeat;

Zamiast no-repeat można wpisać repeat-x albo repeat-y, które mówią, iż obrazek ma się powtarzać tylko wzdłuż osi X albo tylko wzdłuż osi Y.

Jeśli obrazek nie ma się powtarzać można ustawić jego położenie:

background-position: top right;

3. Skrótowy zapis
To wszystko można skrótowo zapisać:

background: #FE24A3 url('obrazek.png') no-repeat top right;

Możemy używać tych cech do określania wyglądu tła elementów - np. Możemy ustawić, żeby tło akapitu było zielone.

p {
    background-color: green;
}

Możemy również ustawić tło całej strony:

body {
    background-color: red;
}

Formatowanie tekstu

h1 {
    color: blue;
    text-align: justify; /*tekst justowany, mozna też wpisać: right albo left - wyrównanie do prawej/lewej*/
    text-decoration: underline; /*inne wartości: none, line-through, ...*/
    font-family: arial, verdana, sans-serif; 
    font-style: italic; /*moze byc też normal*/
    font-size: 20px;
}

Wyróżnianie i grupowanie elementów

CSS oferuje wiele sposobów na wyróżnienie pojedynczych obiektów lub ich klas, niezależnie od tego, do jakiego typu obiektu należą — umożliwia więc także grupowanie elementów.

Identyfikator

Można wskazać w stylach element o konkretnym identyfikatorze id.

/* szary kolor tła ważnego elementu */
#important{
    background-color: #CCCCCC;
}
 
/* usunięcie stylów listy o identyfikatorze references */
ul#references {
    list-style: none;
    padding: 0;
    margin: 0;
}

Klasa

Identyfikator id ma pewne ograniczenie — w dokumencie może znajdować się tylko jeden element z identyfikatorem o danej wartości. Jeśli chcemy w pewien sposób wyróżnić kilka elementów możemy im nadać klasę (lub klasy) przy pomocy atrybutu class

Np.

<ul id="mustsee">
    <li class="first">About time</li>
    <li>O autorze</li>
    <li class="new current">Interstellar</li>
    <li class="new last">Mama</li>
</ul>
 
<p class="new">To jest nowość!</p>

Dany element może mieć kilka klas (oddzielonych spacjami). Kolejność wymienionych klas nie ma znaczenia.

Selektory wykorzystujące klasy wyglądają następująco:

/* dowolny element z klasą //new// ma być czerwony */
.new {
    color: red;
}
 
/* element li z klasą //current// ma być pogrubiony */
li.current {
    font-weight: bold;
}
 
/* element li z klasą //first// ma mieć ramkę z prawej strony */
li.first {
    border-right: solid 1px blue;
}
 
/* element li z klasami //last// i //current// ma mieć tekst pochylony i kolor zielony
    UWAGA: wskazywanie kilku klas jednocześnie może nie działać w IE6 :P
 */
li.last.current {
    font-style: italic;
    color: green;
}

Nazwy klas powinny być związane z semantycznym znaczeniem danych elementów, a nie z ich stylami.

Przykładowo dobre nazwy klas to first, last, new, important itp.


Hierarchia elementów

W selektorach możemy też wykorzystać wiedzę o strukturze stylowanego dokumentu HTML i odwoływać się do elementów znajdujących się wewnątrz innych elementów.

/* element em wewnątrz paragrafu ma być pogrubiony */
p em {
    font-weight: bold;
}
 
/* element em wewnątrz nagłówka ma być pochylony */
h1 em {
    font-style: italic;
}
 
/* element li wewnątrz listy o identyfikatorze #menu ma mieć tło żółte */
ul#mustsee li {
    background-color: yellow;
}
 
/* element li o klasie //current// wewnątrz listy o identyfikatorze #mustsee ma mieć tło szare */
ul#mustsee li.current {
    background-color: #CCCCCC;
}

UWAGA!!!
Taki selektor wyznacza wszystkie elementy niżej w hierarchii — nie tylko bezpośrednie dzieci. Może to stwarzać problemy np. przy zagnieżdżonych listach.


Grupowanie elementów

Jeśli te same style dotyczą różnych elementów, można je pogrupować:

/* wszystkie nagłówki mają być pogrubione */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
 
/* elementy listy o id #mustsee i elementy list o klasie //links// mają być niebieskie */
#mustsee li, ul.links li {
    color: blue;
}

Grupować możemy dowolne selektory oddzielając je przecinkami.


Pseudo-klasy dla linków (i nie tylko)

Specyfikacja CSS definiuje pewne pseudo-klasy pozwalające wskazywać elementy o pewnych specyficznych własnościach.

Przykładowo dla linków mamy 4 pseudo-klasy (uwaga na pisownię — używamy dwukropka, a nie kropki):

/* link w stanie "spoczynku" ma być niebieski z podkreśleniem */
a:link {
    color: blue;
    text-decoration: underline;
}
 
/* link odwiedzony ma być szary */
a:visited {
    color: #CCCCCC;
}
 
/* link nad którym jest kursor myszy ma być pomarańczowy z niebieskim tłem */
a:hover {
    color: orange;
    background-color: blue;
}
 
/* link który jest klikany ma być pomarańczowy bez tła */
a:active {
    color: orange;
    background-color: transparent;
}

Aby wszystko dobrze działało, należy trzymać się kolejności definiowanej przez zasadę LoVe HAte (:link :visited :hover :active).

Pseudo-klasa :hover pozwalająca wskazać elementy nad którymi znajduje się kursor myszy może być używany nie tylko do linków:

tr:hover {
    background-color: #CCCCCC;
}

Dziedziczenie

Dziedziczenie jest dość naturalną cechą stylów CSS. Polega ono na tym, że elementy dokumentu HTML dziedziczą reguły stylów po elementach, w których się znajdują.

Przykładowo wszystkie elementy em i strong znajdujące się wewnątrz paragrafu dziedziczą po tym paragrafie czcionkę, jej kolor i rozmiar (o ile ich własne style tego nie definiują na nowo).

Należy jednak pamiętać, że nie wszystkie cechy stylów są dziedziczone!

Dziedziczone są wszystkie właściwości czcionki i tekstu, także kolor tekstu color, ale już tło i kolor tła background-color nie są dziedziczone!

Model "pudełkowy" - box model

Tzw model pudełkowy służy definiowaniu rozmiarów i odstępów między elementami blokowymi dokumentu HTML.
Rozmiary elementów blokowych opisywane są wysokością i szerokością (width height), odstępem padding, ramką border i marginesem margin.

http://www.hicksdesign.co.uk/boxmodel/

Walidator CSS

Pod adresem http://jigsaw.w3.org/css-validator/ znajduje walidator pozwalający sprawdzić poprawność stylów CSS dołączonych do strony o podanym adresie, przesłanych jako plik lub wpisanych/wklejonych w okno (analogicznie do walidatora CSS).

Co trzeba przeczytać

Ponieważ opracowywane przez nas zagadnienia są już dobrze opracowane w innych źródłach, dlatego nie wszystkie podstawowe zagadnienia z CSSa zostały tu poruszone. Aby przejść szybki pełny kurs CSSa, proponujemy stronę http://www.w3schools.com/css/default.asp , w menu po lewej pozycje CSS Basic od CSS Introduction do CSS table.


Pomoce naukowe



Doprecyzowanie tematu własności float

Przy rozmieszczeniu jednego z elementów przy pomocy własności float możemy otrzymać efekt nakładania się elementu opływającego na element opływany (np. gdy mają one różne tło). Żeby tego uniknąć możemy np. dobrać odpowiednio szerokość elementu opływającego lub zwiększyć jego margines po stronie elementu opływanego.

Słowem wstępu

W trakcie projektowania układu strony należy zdawać sobie sprawę, że różne przeglądarki internetowe mają swoje domyślne style CSS. Co prawda (w wyniku działania kaskady) zawartość naszych arkuszy stylów ma wyższy priorytet (style domyślne przeglądarek mają najniższy priorytet), ale i tak może to rodzić różnego rodzaju trudności:

  • W trakcie rozmieszczania elementów na stronie okaże się, że domyślne ustawienia przeglądarki powodują zamieszanie przy wyświetlaniu naszej witryny
  • Nawet jeśli uda nam się tak zdefiniować arkusze stylów, żeby nasza strona wyglądała poprawnie pod jedną przeglądarką, inne przeglądarki (z innymi arkuszami) mogą źle (czyli nie tak jak chcemy) wyświetlać zawartość naszej strony

Aby uniknąć tego rodzaju kłopotów należy zacząć naszą pracę z edytowaniem stylów od "zresetowania" CSS. Resetowanie to nic innego, jak ustawienie (zdefiniowanie) wszystkich istotnych selektorów, domyślnie definiowanych przez przeglądarki, w pewien ustalony sposób. W wyniku "działania" kaskady nastąpi "dezaktywacja" domyślnych ustawień przeglądarek i "standaryzacja" naszego arkusza.

Dla przykładu możemy zresetować marginesy i odstępy dla znaczników <body> i <p>:

body, p {
    margin: 0;
    padding: 0;
}

Znaczniki <div> i <span>

Własności block i inline

Przy okazji omawiania dwóch nowych znaczników warto wspomnieć o różnicy między elementami blokowymi (block) i inline:

  • Elementy blokowe "zabierają" całą dostępną szerokość (width) i domyślnie "korzystają" z końca linii (line break) przed i po własnym wystąpieniu
          • przykładowe elementy blokowe to: <p>, <h_z dowolnym numerem>, <div>
  • Elementy inline zajmują tylko tyle szerokości ile im potrzeba i nie wymuszają końca linii.
          • przykładowe elementy: <a>, <span>

Dodatkowo warto wiedzieć, że można wymusić własność block\inline na elementach, które jej nie posiadają. Służy do tego cecha display:

a {
    display:block;
}

<div> i <span>

  • Znacznik <div> (skrót od ang. division) pozwala "wydzielić" jakiś fragment naszego kodu XHTML
          • Pozwala to na grupowanie poszczególnych elementów naszej strony tak, aby móc je następnie "zespołowo" edytować przy użyciu arkuszy stylów:
          • <div> jest elementem blokowym
          • Przy pomocy znacznika <div> możemy podzielić naszą stronę na stosowne sekcje. Podział ten następnie możemy wykorzystać w celu projektowania układu naszej strony
  • Znacznik <span> działa analogicznie do <div>. Różnica polega na tym, że jest elementem inline

W ramach HTML5 do tworzenia układu strony stosuje się nie tylko znaczniki <div>, ale także należące do tego samego typu znaczników blokowych elementy, których nazwy pochodzą od id lub class nadawanych konwencjonalnie divom o danej funkcji:

  1. <header> (nagłówek strony)
  2. <nav> (lista menu)
  3. <footer> (stopka strony)
  4. <aside> (boczna kolumna bez menu bocznego)
  5. <section>
  6. <article>

(patrz: http://www.w3schools.com/html/html_layout.asp)

Menu będzie wobec tego wyglądać na przykład tak :

<nav>
    <ul>
        <li> Strona główna </li>
        <li> Jak się zakłada buty </li>
    </ul>
</nav>

… a tak kod CSS:

nav {
    text-align:right;
    color: blue;
}

Układ elementów na stronie

Istnieją różne sposoby na to, aby sensownie rozmieścić elementy na naszej stronie. Jednym z często używanych jest wykorzystanie własności float i clear w arkuszach stylów w CSS.

  • Własność float umożliwia nam takie rozmieszczenie elementu, że następujące po nim inne elementy będą go otaczały ("opływały") ze strony przeciwnej do tej, po której go chcemy ustawić:
          • Własność float można zdefiniować tak:
                  • float:right
                  • float:left
                  • float:none
  • Przykład:

Poniższy kod (w XHTML'u) bez użycia stylów…

<h2> Floatowanie i clearowanie strony</h2>
...
<znacznik_elementu blokowego ... /> To jest naturalny układ strony
...

… da następujący ("domyślny") efekt:

1-naturalny.png

Gdy w kodzie CSS nadamy elementowi blokowemu własność: float:left otrzymamy następujący efekt:

2-floated.png

A gdy tekstu jest trochę więcej:

3-otoczony.png

W sytuacji gdy używamy własności float, wszystkie elementy następujące po tym elemencie będą "dążyły" do tego, żeby ustawić się po odpowiedniej stronie ( Jeśli "floatowany" obiekt jest odpowiednio duży, to również kolejne elementy - też i te, które chcielibyśmy "zachować" pod spodem - będą zmieniały swoją pozycję)

7-znow_zle.png
  • W tym wypadku warto, abyśmy zapoznali się z własnością clear. Własność ta powoduje, że kolejny element nie będzie opływał obiektu "floatowanego"
          • clear można zdefiniować tak:
                  • clear:left
                  • clear:right
                  • clear:both
                  • clear:none
          • Zasada jest taka, że wartość własności clear ma odpowiadać wartości float (tzn. gdy float:left, to clear:left). Zalecane jest jednak ustawianie jako wartości clear:both :

Odnosząc się do powyższego przykładu, odpowiednie "wyczyszczenie" da następujący efekt:

8-spacer_pomaga.png

Gdy "floatowany" element "wystaje" poza element nadrzędny (tj. ma od niego większą wysokość) - w przykładzie jest to element z białym tłem (np. <div>)…:

4-problem.png
  • … można posłużyć się "sztuczką", używając własności overflow.
          • overflow przyjmuje wartości:
                  • scroll
                  • visible
                  • hidden
                  • auto
          • Własność ta "mówi" jak postępować z elementami podrzędnymi wykraczającymi poza element nadrzędny (w nim też jest definiowana). I tak deklaracja: overflow:hidden z reguły powoduje ukrycie fragmentów "wystających".
          • W przypadku jednak wystających obiektów "floatowanych"… działa odwrotnie :) - tzn. dopasowuje element nadrzędny do elementu "floatowanego":
6-rozwiazanie.png
  • Oprócz własności float i clear pracę nad układem stron może ułatwić jeszcze własność position
          • przyjmuje ona wartości:
                  • static - (standardowa) przeglądarka decyduje o położeniu elementu
                  • relative - położenie ustalone względnie, w stosunku do pozycji standardowej
                  • absolute - położenie w stosunku do elementu nadrzędnego
                  • fixed - położenie w stosunku do okna przeglądarki
          • Dodatkowo przy definiowaniu położenia należy podać współrzędne (top, right, bottom, left) w jakichś jednostkach (np. pikselach [px]). Oczywiście w przypadku wartości "static" nie czynimy tego.

Przykład:

p
{
    position:fixed;
    top:120px;
    right:100px;
    left:150px;
}

Szablon

Jako wzór pomocny do realizacji zadania domowego proponujemy:

twocolumn.gif

Określone sekcje układu strony (jak header lub sidebar ) zalecamy wyróżnić przy pomocy stosownego znacznika.

Pomoce naukowe

I jeszcze:

Na przyszłość



Co jeszcze warto wiedzieć:



Zadanie 02

  1. Utworzenie strony o zaproponowanym układzie (layout) lub innym, sensownym (i przynajmniej podobnie skomplikowanym).
  2. Należy wykorzystać model pudełkowy do ustalenia rozmiarów elementów i ich odstępów.
  3. Wykorzystać elementy graficzne uatrakcyjniające wygląd (np. obrazki tła dla strony / nagłówka)
  4. Wysłać stronę na adres e-mail prowadzącego (adres oraz pliki źródłowe).

Punktacja za zadanie:

  • 1 punkt - wykorzystanie własności CSS;
  • 1 punkt - zbudowanie layoutu wykorzystywanego do przynajmniej dwóch plików html (np. strona główna oraz jedna podstrona), do nagłówku każdego dokumentu podpiąć ten sam plik style.css znacznikiem link;
  • 1 punkt - spójność, przejrzystość, czytelność layout-u;
  • razem: 3 punkty.

UWAGA: nie trzeba stosować elementów HTML, CSS, które nie są przydatne do prezentowanej treści (poprzednio używaliśmy wszystkich w celach ćwiczeniowych). Od teraz liczy się przejrzystość oraz czytelność strony, co można osiągnąć odpowiednim formatowaniem CSS.

Co z pewnością powinno się pojawić: div-y zawierający całą stronę, element zawierający treść (tekst), menu jako lista, akapity, nagłówki, odnośniki, obrazki (najlepiej floatujące wewnątrz akapitów), etc.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy