Sara Wilczynska. Referat HTML i CSS.

HTML i CSS. Sara Wilczyńska

1. Podstawowa struktura dokumentu HTML

	<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
	"http://www.w3.org/TR/html4/strict.dtd">

	<html>

	<head>

	<meta  ... tutaj są umieszczone znaczniki meta ...  >

	<title>  tutaj znajduje się tytuł strony (dokumentu)  </title>

	<LINK rel="stylesheet" href="nazwa zewnętrznego arkusza stylów" type="text/css">

	<style> 
	... tutaj umieszczone są określone style ... 
	</style>

	<script>
	 ... tutaj umieszczone są skrypty uruchamiane po stronie klienta ... 
	</script>


	</head>

	<body>
	 ... tutaj znajduje sie treść zasadnicza dokumentu ... 
	</body>

	</html>

Przykładowe znaczniki meta:

 
	<meta http-equiv="Content-Type" content="text/html; 	charset=ISO-8859-1"> 
 
	<meta http-equiv="pragma" content="no-cache"> 

	<meta http-equiv="refresh" content="3;URL=http://www.example.com/newpage.html"> 

	<meta name="keywords" content="film, filmy, produkcja, gatunek, science fiction,
	horror, dramat, komedia, animowany, manga, wiadomości, czat, bbs, dyskutować, recenzja,
	ostatni">

2. Podziały wierszy i akapity

Znaczniki:

akapitu - <p>
podziału wiersza - <br>
twardej spacji -  
łącznika opcjonalnego

znacznik <pre> zachowuje formatowanie tekstu (białe znaki, podziały wierszy itd.). Np. kod:

	<pre>
	mysql> select * from ustawienia;
	+------------------------+---------------------+
	| nazwa                  | wartość             |
	+------------------------+---------------------+
	| aktualizacja danych    | 106009013           |
	| aktualizacja zwolnienia| wtorek, 28.08, 20:18|
	| status                 | 0                   |
	| aktualizacja zasilania | 1069009861          |
	+------------------------|---------------------+
	4 rows in set (0.00 sec)	
	</pre>

da w wyniku:

	mysql> select * from ustawienia;
	+------------------------+---------------------+
	| nazwa                  | wartość             |
	+------------------------+---------------------+
	| aktualizacja danych    | 106009013           |
	| aktualizacja zwolnienia| wtorek, 28.08, 20:18|
	| status                 | 0                   |
	| aktualizacja zasilania | 1069009861          |
	+------------------------|---------------------+
	4 rows in set (0.00 sec)

nagłówki - od <h1> do <h6>
linie poziomie - <hr>
grupowanie akapitów lub innych elementów blokowych - <div>

3. Listy

Lista uporządkowana (numerowana). Składnia: <ol> określa całą listę, natomiast <li> poszczególne jej elementy. Przykład:
Kod
```
	<ol>
  	<li>W programie Internet Explorer otwórz stronę z obrazem graficznym, 
	który chcesz umieścić jako tapetę na swoim pulpicie.</li>
 	<li>Kliknij obraz prawym przyciskiem myszy, aby otworzyć menu 
	kontekstowe.</li>
  	<li> Wybierz opcję Ustaw jako tło, aby zapisać obraz i użyć go jako tapetę
	na pulpicie.</li>
	</ol>
	
```
da w wyniku:
1. W programie Internet Explorer otwórz stronę z obrazem graficznym, który chcesz umieścić jako tapetę na swoim pulpicie.
2. Kliknij obraz prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
3. Wybierz opcję Ustaw jako tło, aby zapisać obraz i użyć go jako tapetę na pulpicie.

Lista nieuporządkowana (punktowana). Składnia: <ul> określa całą listę, natomiast <li> poszczególne jej elementy. Przykład:
Kod
```
	<ul>
  		<li>waniliowe</li>
  		<li>czekoladowe</li>
  		<li>truskawkowe</li>
	</ul>
	
```
da w wyniku:
- waniliowe
- czekoladowe
- truskawkowe

Lista definicji. Każy element ma dwie części składowe: termin ( <dt> ) i definicję ( <dd> ). Całą listę okalają znaczniki <dl> . Przykład:
Kod
```
	<dl>
  	<dt>Internet Explorer</dt>
  	<dd>Program firmy Microsoft, integralna część produktów Windows.</dd>
  	<dt>Mozilla</dt>
  	<dd>Program firmy Mozilla Project, przeglądarka typu open source dla wielu 
	różnych platform.</dd>
  	<dt>Netscape</dt>
  	<dd>Program firmy Netscape Communications Corporation, jedna z pierwszych
	przeglądarek graficznych.</dd>
  	<dt>Safari</dt>
  	<dd>Program firmy Apple Computer, Inc., działa w systemie operacyjnym OSX firmy
 	Apple.</dd>
	</dl>
	
```
da w wyniku:

Internet Explorer

Program firmy Microsoft, integralna część produktów Windows.

Mozilla

Program firmy Mozilla Project, przeglądarka typu open source dla wielu różnych platform.

Netscape

Program firmy Netscape Communications Corporation, jedna z pierwszych przeglądarek graficznych.

Safari

Program firmy Apple Computer, Inc., działa w systemie operacyjnym OSX firmy Apple.

4. Rysunki

Fromaty GIF, JPEG, PNG
Podstawowa składnia umieszczania rysunku:
```
	<img alt="Zdjęcie psa" src="pies.jpg" />,
	
```
gdzie 'alt' pozwala na określenie tekstu, który zostanie wyświetlony w miejscu rysunku w przeglądarkach tekstowych, a wartością atrybutu 'scr' może być nazwa pliku znajdującego się na tym samym serwerze lub adres URL.

5. Linki

Znacznik hiperłącza - <a>
Atrybut <href> defuniuje adres docelowy łącza

Link z adresem URL:

	<a href="docelowy_adres_URL">Opis</a>
	np. <a href="http://super.przyklad.pl">Witryna firmy Super Program</a>

Witryna firmy Super Program

Link do pliku udostepnionego przez FTP:

	<a href="ftp://ftp.przyklad.pl/pub/przyklad.zip">Spakowane kopie plików</a>

Spakowane kopie plików

Link do strony otwierającej się w nowym oknie:

	<a href="http://www.przyklad.pl" target="_blank">Nowe okno</a>

Nowe okno

Link do adresu e-mail:

	<a href="mailto:adres@poczta.pl" >Napisz do mnie</a>

Napisz do mnie

Łącze bezwzględne - pełna ścieżka dostępu do pliku
Łącze względne - nie zawierają wszystkich informacji o umiejscowieniu docelowej strony, jej adres jest ustalany na podstawie adresu dokumentu, w którym łącze zostało otwarte

Tekst podpowiedzi - atrybut 'title'. Przykład:

	Więcej informacji na ten temat znajduje się 
	<a href="http://www.przyklad.pl" 
	title="Strona główna witryny przyklad.pl">tutaj</a>.

Więcej informacji na ten temat znajduje się tutaj.

"Kotwice" - odniesienia do znaczników w ramach tej samej strony. Np. aby utworzyć kotwicę o nazwie 'rozdzial101', trzeba wstawić w pożądane miejsce:
```
	<a name="rozdzial01">Rozdział 1</a>
	
```
Teraz aby zamieścić łącze do etykiety Rozdzial 1 nalezy wpisać:
```
	<a href="http://www.przyklad.pl/ksiazka.html#rozdzial01">Rozdział 1</a>
	
```
Możliwe są także łącza do elementów blokowych o określonej wartości atrybutu id. Np.
```
	<h1 id="rozdzial01">Rozdział 1</h1>
	
```

6. Formatowanie tekstu

Metody bezpośrednie (takie jak umieszczanie znacznika <font> w tekście dokumentu) zostały wycofane z języka HTML i XHTML. W ich miejsce zalecane jest stosowanie arkuszy stylów.
Dwoma znacznikami, które wytrzymały próbę czasu są <i> i <b>
Do tworzenia indeksu dolnego / górnego służą <sub> i <sup>
<span> - służy do zaznaczania fragmentów tekstu, które mają być potem sformatowane przez arkusze stylów

Do ustalenia formatu wykorzystuje się atrybuty 'style' oraz 'class'. W obydwu poniższych akapitach słowo "czerwony" zostanie napisane czerwoną czcionką:

	<head>
  	<style type="text/css">
    	.tekstczerwony { color: red; }
  	</style>
	</head>
	<body>
	<!--  Akapit 1. Definicja stylu podana jako wartość atrybutu style -->
	<p>Dokumentowi temu należy nadać kolor <span style="color:red">
	czerwony</span>.</p>


	<!--  Akapit 2. Stosujemy klasy -->
	<p>Dokumentowi temu należy nadać kolor <span class="tekstczerwony">
	czerwony</span>.</p>
	</body>

Znaki specjalne mogą być kodowane dziesiętnie, opisowo i szesnastkowo. Np. twarda spacja - dziesiętnie:   , szesnastkowo:   , opisowo:

7. Tabele

NIEZBĘDNE są znaczniki: <table> - ograniczające całą tabelę, <tr> - definiujące wiersze oraz <td> określające kolejne komórki (kolumny).

Przykładowy kod wyjaśniający składnię tworzenia tabel:

	<table border="1">
    	  <caption>Podpis tabeli</caption>
    	  <thead>
      	    <tr><td colspan="2">Nagłówek tabeli</td></tr>
    	  </thead>
    	  <tfoot>
      	    <tr><td colspan="2">Stopka tabeli</td></tr>
    	  </tfoot>
    	  <tbody>
      	    <tr><th>Pierwsza komórka nagłówka</th><th>Druga komórka nagłówka</th></tr>
      	    <tr><td>Pierwsza komórka danych</td><td>Druga komórka danych</td></tr>
    	  </tbody>
  	</table>

Wynik:

Podpis tabeli
Pierwsza komórka nagłówka	Druga komórka nagłówka
Nagłówek tabeli
Stopka tabeli
Pierwsza komórka danych	Druga komórka danych

Tabele można zagnieżdżać. Zagnieżdżoną tabelę umieszcza się w komórkach tabeli pomiędzy znacznikami <td>

Atrybut 'width' ustala rozmiar tabeli w pikselach lub procentach, np.

	
	  <table border="1" width="50%">	
	  <tr>
	    <td>Komórka 1</td><td>Komórka 2</td>
	    <td>Komórka 3</td><td>Komórka 4</td>
	  </tr>
	  </table>

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Atrybut 'align' ustala położenie tabeli względem bloku obejmującego (może przyjmować wartości: left, right, center)
'Cellspacing' - ustala odstęp między komórkami
'Cellpadding' - określa odległość pomiędzy zawartością a krawędzią komórki (oba w procentach lub pikselach)
'Border' - określa obramowanie tabeli (w pikselach)
'Frame' - ustala, które krawędzie mają być widoczne
'Rules' - służy do ustalenia widoczności krawędzi tabeli
Znaczniki <tr>, <th>, <td>,<col> i <colgroup> mają atrybuty 'align' (right, left, center, justify, char), 'valign' (top, middle, bottom, baseline), 'char' i 'charoff'

Przykład użycia nagłówka i stopki:

	<table border="1" cellpadding="3" cellspacing="2" rules="groups">
	<thead align="center">
	  <tr>
	    <th>Rozdział</th><th>Strony</th><th>Rysunki</th><th>Ilustracje</th>
	  </tr>
	</thead>
	<tfoot align="center">
	  <tr>
	    <td>Razem</td><td>51</td><td>13</td><td>6</td>
	  </tr>
	</tfoot>
	<tbody align="center">
	  <tr>
	    <td>1</td><td>10</td><td>0</td><td>2</td>
	  </tr>
	  <tr>
	    <td>2</td><td>12</td><td>4</td><td>1</td>
	  </tr>
	  <tr>
	    <td>3</td><td>9</td><td>2</td><td>0</td>
	  </tr>
	  <tr>
	    <td>4</td><td>20</td><td>7</td><td>3</td>
	  </tr>
	</tbody>
	</table>

Rozdział	Strony	Rysunki	Ilustracje
Razem	51	13	6
1	10	0	2
2	12	4	1
3	9	2	0
4	20	7	3

W tabeli widoczne są jedynie krawędzie otaczające sekcje, bo znacznik <table> ma atrybut rules='groups'.

Atrybuty 'colspan' i 'rowspan' zmieniają pionowy oraz poziomy zasięg komórek (rozciągają je). Np.

	<table border="1" cellpadding="5">
	<caption>Odpowiedzi na pytania 1-4</caption>
	<tr align="center">
	  <th>Płeć</th><th>Wiek</th><th>#1</th><th>#2</th><th>#3</th><th>#4</th>
	</tr>
	<tr>
	  <td rowspan="3">Mężczyźni</td>
	  <!--  powyższa komórka rozciąga się na trzy wiersze  -->
	  <td>23</td><td>A</td><td>C</td><td>F</td><td>B</td>
	</tr>
	<tr>
	  <!--  pierwszą komórką jest komórka rozciągająca się na trzy wiersze  -->
	  <td>29</td><td>B</td><td>F</td><td>A</td><td>A</td>
	</tr>
	<tr>
	  <!--  pierwszą komórką jest komórka rozciągająca się na trzy wiersze  -->
	  <td>25</td><td>C</td><td>C</td><td>C</td><td>C</td>
	</tr>
	<!--  koniec pierwszej komórki rozciągającej się na trzy wiersze  -->
	<tr>
	  <td rowspan="3">Kobiety</td>
	  <!--  powyższa komórka rozciąga się na trzy wiersze  -->
	  <td>28</td><td>F</td><td>E</td><td>B</td><td>B</td>
	</tr>
	<tr>
	  <!--  pierwszą komórką jest komórka rozciągająca się na trzy wiersze  -->
	  <td>21</td><td>B</td><td>B</td><td>B</td><td>A</td>
	</tr>
	<tr>
	  <!--  pierwszą komórką jest komórka rozciągająca się na trzy wiersze  -->
	  <td>23</td><td>F</td><td>F</td><td>C</td><td>C</td>
	</tr>
	</table>

Odpowiedzi na pytania 1-4
Płeć	Wiek	#1	#2	#3	#4
Mężczyźni	23	A	C	F	B
	29	B	F	A	A
	25	C	C	C	C
Kobiety	28	F	E	B	B
	21	B	B	B	A
	23	F	F	C	C

Kolumny można grupować (np. po to, aby nadać im wspólne formatowanie). Służą do tego znaczniki <col> oraz <colgroup> .
<colgroup> definiuje i ew. ustala format grupy kolumn, np.
```
	<table>
	<colgroup span="3">
	</colgroup>
	...

	
```
<col> z kolei wyróżnia poszczególne kolumny, np. poniższy kod spowoduje, że w grupie trzech kolumn wartości środkowej będą zapisane pogrubioną czcionką:
```
	<table>
	<colgroup span="3" align="center">
	
	<col></col>
	<col style="font-weight: bold;"></col>
	<col></col>
	</colgroup>
	...

	
```

8. Ramki

Implementacja wymaga utworzenia oddzielnego dokumentu zawierającego definicję rozmieszczenia ramek

W pliku zbioru ramek można wykorzystywać jedynie znaczniki związane z ramkami. Przykład szkieletowego kodu definicji:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	     "http://www.w3.org/TR/html4/frameset.dtd">
	<html>
	<head>
	...
	</head>
	  <frameset arybuty>
	    <frame atrybuty></frame>
	    <frame atrybuty></frame>
	    ...
	  </frameset>
	</html>

Znacznik <frameset> wyznacza sposób rozmieszczenia ramek w oknie. Składnia:

	<frameset cols|rows = "rozmiary_kolumn_lub_wierszy">

	Np. 

	<!-- Dwie kolumny, 25% szerokości okna, 
	   pozostałe 75% szerokości okna -->
	<frameset cols = "25%, 75%">
	
	<!-- Dwie kolumny, 25% szerkości okna, 
	   pozostałe 75% szerokości okna -->
	<frameset cols = "25%, *">
	
	<!-- Trzy wiersze, pierwszy o wysokości 50% wysokości okna, pozostałe dwa o wysokości  
	   25% wysokości okna (każdy) -->
	<frameset rows = "50%, *, *">
	
	<!-- Dwa wiersze, pierwszy o wysokości 100 pikseli, drugi
	   obejmujący pozostałą wysokość okna -->
	<frameset rows = "100px, 200px">

Znacznik <frame> określaparametry danej ramki. Składnia:

	<frame name="nazwa_ramki" src="adres_URL_treści"></frame>

Znacznik <a> może zawierać parametr target, który przybiera wartości: nazwa_ramki, _blank, _parent, _self, _top
Ramki można zagnieżdżać

Ramki pływające - znacznik <iframe> . Składnia:

	<iframe src="adres_url_dokumentu"></iframe>

9. Formularze

Składnia: wymienienie pól formularza w obrębie znaczników <form> Przykład:

<form action="obslugaformularza.php" method="post">
  <table cellspacing="20">
  <tr><td>

    <!-- Pola tekstowe -->
    <p><label for="fname">Imię: </label>
      <input type="text" name="fname" id="fname" 
       size="20"><br>
    <label for="lname">Nazwisko: </label>
      <input type="text" name="lname" id="lname" size="20">
    </p>

    <!-- obszar tekstowy -->
    <p><label for="address">Adres:</label><br>
      <textarea name="address" id="address"
        cols=20 rows=4></textarea>
    </p>

    <!-- Hasło -->
    <p><label for="password">Hasło: </label>
      <input type="password" name="password" id="password"
        size="20">
    </p>

    </td>
    <td>

    <!-- Lista opcji -->
    <p><label for="products">Jakimi produktami jesteś zainteresowany? </label><br>
    <select name="prod[]" id="products" multiple="multiple"
      size="4">
      <option id="MB">Płyty główne
      <option id="CPU">Procesory
      <option id="Case">Obudowy
      <option id="Power">Zasilacze
      <option id="Mem">Pamięć
      <option id="HD">Twarde dyski
      <option id="Periph">Urządzenia zewnętrzne
    </select>
    </p>

    <!-- Pola wyboru -->
    <fieldset>
      <legend>Przesyłanie informacji: </legend>
      <p><input type="checkbox" name="email" id="email" 
          checked>
        <label for="email">Elektronicznie</label><br>
      <input type="checkbox" name="postal" id="postal">
        <label for="postal">Listownie</label></p>
    </fieldset>

    </td>
    </tr>
    <tr>
    <td>

    <!-- Przyciski opcji -->
    <p>W jakim czasie planujesz zakup sprzętu?</p>
    <fieldset>
    <legend></legend>
    <p><input type="radio" name="buy" value="ASAP" 
        id="buyASAP">
      <label for="buyASAP">Możliwie najszybciej</label><br>
    <input type="radio" name="buy" value="10" id="buy10">
      <label for="buy10">W ciągu 10 dni</label><br>
    <input type="radio" name="buy" value="30" id="buy30">
      <label for="buy30">W ciągu miesiąca</label><br>
    <input type="radio" name="buy" value="Never" 
      id="buyNever">
      <label for="buyNever">Nigdy!</label></p>
    </fieldset>
    </td>

    <td>
    <!-- Przyciski wysłania i czyszczenia pól -->
    <p>
    <input type="submit">   
    <input type="reset">
    </p>

    <!-- Przycisk -->
    <p>
    <input type="button" name="Leave" value="Opuść stronę!">
    </p>

    <!-- Pole ukryte -->
    <input type="hidden" name="referredby" value="Google">

  </td>
  </tr>
  </table>

</form>

Podstawowa składnia znacznika <form>:

	<form action="adres_url_skryptu_przetwarzającego_dane" method="get|post">

Metoda GET zakłada przekazywanie informacji przez dołączanie ich do ciągu tekstowego adresu URL, np.
```
	http://www.przyklad.com/formularze.cgi?id=456777&dane=Tekst
	
```
Dane są zorganizowane w pary nazwa-wartość.
Metoda POST wiąże się z przekazaniem danych zakodowanych w strumieniu HTTP
Znacznik <form> ma m.in. atrybuty: accept (typy zawartości obsługiwane przez serwer), accept-charset (zestawy znaków, które mogą być wykorzystane w przesyłaniu danych), enctype (typ zawartości włąściwy dla danych formularza)

Znacznik <label> definiuje tekstową etykietę pola formularza. Składnia:

	<label for="identyfikator_odpowiedniego_znacznika>Treść_etykiety</label>

Pola tekstowe:

<input type="text" name="nazwa_pola" value="wartość_początkowa" 
  size="rozmiar_pola" maxlength="maksymalna_liczba_znaków">

Pola haseł:

<p>Hasło: <input type="password" name="password" 
value="" size="20" maxlength="20"></p>

Przyciski opcji:

<input type="radio" name="nazwa_grupy" [checked="checked"] value="wartość_wybranej_pozycji"

Pola wyboru:

<input type="checkbox" name="nazwa_pola" [checked="checked"] 
value="wartość_wybranego_pola">

Listy wyboru:

<select name="nazwa_pola" size="liczba_wyświetlanych_pozycji" [multiple="multiple"]>

	np. 

<p>Wybierz dzień tygodnia: 
<select name="AvailDays" size="6" multiple="multiple">
  <optgroup label="Dni wolne">
    <option>Sobota
    <option>Niedziela
  </optgroup>
  <optgroup label="Dni robocze">
    <option>Poniedziałek
    <option>Wtorek
    <option>Środa
    <option>Czwartek
    <option>Piątek
  </optgroup>
 </select>
</p>

Wybierz dzień tygodnia:

Obszary tekstowe:

<textarea name="nazwa_pola" cols="liczba_kolumn" rows="liczba_wierszy"></textarea>

Pola ukryte:

<input type="hidden" name="nazwa_pola" value="wartość_pola">

Przyciski:

<input type="button" name="nazwa_przycisku" value="opis_przycisku">

Rysunki:

<input type="image" name="nazwa_pola" src="adres_URL_rysunku">

Pola plików:

<input type="file" name="nazwa_pola" size="rozmiar_wyświetlanego_pola">

Kod znacznika <form> powinien mieć postać:

<form action="nazwa_programu_obsługi" method="post" enctype="form/multipart-data">

Przyciski przesyłania danych i czyszczenia pól:

<input type="submit" [value="opis_przycisku"]>

<input type="reset" [value="opis_przycisku"]>

Znaczniki pól formularza można uzupełnić o arybuty 'tabindex' i 'accesskey' (kolejność uaktywniania kontrolek i skróty klawiaturowe)
Uniemożliwienie wprowadzania zmian: atrybuty 'readonly' i 'disable'

Kontrolki można grupować - znacznik <fieldset> , np.

<fieldset>
<p><legend>Płeć</legend>
<input type="radio" name="gender" value="male"> Mężczyzna<br>
<input type="radio" name="gender" value="female"> Kobieta</p>
</fieldset>

Płeć Mężczyzna
Kobieta

10. Kaskadowe arkusze stylów

Użycie

Przykład użycia stylu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Przykładowy Styl</title>
  <style type="text/css">
    h1 { color: Red; }
  </style>
</head>
<body>
...

Daje to taki sam efekt,jak gdybyśmy każdorazowo wpisali:

<h1><font color="red">Nagłówek tekstu</font></h1>

Składnia

Podstawowa składnia reguł stylów:

selector { właściwość1: wartość1; właściwość2: wartość2; ...
właściwośćN: wartośćN; }

Selektory to elementy, do których powinien być zastosowany dany styl. Np.
```
h1 { color: Red; }
	
```
Do tej samej definicji stylu można zastosować kilka selektorów:
```
h1, h2, h3, h4, h5, h6 { color: Red; }
	
```

Deklaracja

Style można deklarować na dwa sposoby:

Korzystając z elementu <style> :

<style type="text/css">
... definicje stylów ...
</style>

Korzystając z zewnętrznych arkuszy stylu. Należy połączyć zewnętrzny arkusz stylów z dokumentem, używając znacznika <link> :

<link rel="stylesheet" type="text/css" 
href="url_do_arkusza_stylów" />

Definicje stylów umieszczamy w oddzielnym pliku. Nie umieszczamy w nim znaczników <style>, jedynie same definicje. Przykład:

/* mojestyle.css - style dla głównej strony */
h1, h2, h3, h4{ color: blue; }
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
h4 { font-size: 12pt; }
p { font-size: 10pt; }

Kolejność

Kolejność stosowania warstw stylów:
1. Ustawienia przeglądarki użytkownika
2. Wszystkie arkusze stylów dołączone do dokumentu
3. Wszystkie style określone w elemencie <style>
4. Style określone w atrybucie 'style' znacznika, np.
```
<h1 style="color: red;">Czerwony nagłówek</h1> 
```
Każdy z poziomów nadpisuje poprzedni.

* - selektor uniwersalny

* { color: red; }
tr * ol  { color: red; }

Dopasowywanie

Dopasowywanie elementów według klasy:

p.darkarea  { color: white; }

Specyfikacja klasy darkarea w znaczniku akapitu:

<p class="darkarea">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>

Zastosowanie formatowania do wszystkich znaczników należących do danej klasy:

*.darkarea  { color: white; }

.darkarea  { color: white; }

Dopasowywanie identyfikatorów elementów - w selektorze wstawiamy znak #. Poniższy styl zostanie nadany każdemu znacznikowi, którego atrybut id przyjmuje wartość comment:
```
#comment  { background-color: green; }
	
```
Dopasowywanie elementów, które zawierają określony atrybut:
```
element[atrybut="wartość"]
np. table[border="3"]
	
```
Można dopasowywać elementy, które zawierają atrybut, bez względu na jego wartość:
```
table[border]
	
```
Definicje atrybutów można łączyć:
```
table[border="3"][width="100%"]
	
```
Jeżeli dopasowujemy elementy, którego wartości atrybutu są oddzielone spacjami, używa się znaku ~= zamiast zwykłej równości, jeśli zaś są oddzielone łącznikami, używa się |=

Selektory hierarchii znaczników

Aby określić stosunki między przodkiem a potomiem (w hierarchii znaczników), należy wymienić te elementy, oddzielając je odstępami, np.
```
div.div2 li
	
```
Aby określić stosunki między rodzicem a dzieckiem, należy wymienić te elementy, oddzielając je znakiem '>', np.
```
div.div1 > table
	
```
Aby określić stosunki między rodzeństwem, należy wymienić te elementy, oddzielając je znakiem '+', np.
```
table + p
	
```

Dziedziczenie

Dziedziczenie - przejmowanie atrybutów od przodków, np.
```
body { color: blue; }
	
```
sprawi, że wszystko zostanie wyświetlone na niebiesko. Właściwości tła nie są dziedziczone.

Pseudoklasy

Pseudoklasy łączy, np.

:link  { color: blue; }
:visited { color: red; }
:hover {color: green; }

Uwaga! Ważna kolejność definicji!

Pseudoklada :first-child . Powoduje zastosowanie wyznaczonego stylu w pierwszym elemencie potomnym wybranego elementu.
```
div > p:first-child { text-indent: 25px; }
	
```

Pseudoklada :lang . Umożliwia tworzenie selektorów opartych na ustawieniach języka dla określonych znaczników.

/* Dwa poziomy cudzysłowu dla dwóch języków */
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }

/* Dodaje cudzysłów (przed i po) do cytatu */
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

Pseudoelementy

:first-line
:first-letter
:before
:after

Poniżej zamieszczona jest tabelka z niektórymi, podstawowymi właściwościami CSS.

2.1 Czionka

Właściwość	Opis	Wartość	Odnosi się do	Przykład
font-family	Określa typ czcionki	nazwa czcionki	wszystkie elementy	{font-family: Arial} Przykład: Tekst
font-style	Określa styl czcionki	normal, italic, oblique	wszystkie elementy	{font-style: italic} Przykład: Tekst
font-variant		normal, small-caps	wszystkie elementy	{font-variant: small-caps} Przykład: Tekst
font-weight	Określa grubość czcionki	normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900	wszystkie elementy	{font-weight: bolder} Przykład: Tekst
font-size	Określa rozmiar czcionki	xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller , punkt (pt), inch (in), centymetr (cm), piksel (px)	wszystkie elementy	{font-size: 20px} Przykład: Tekst
font	Zawiera w sobie wszystkie właściwości dotyczące czcionki	font-family, font-size, font-variant, font-weight, font-size	wszystkie elementy	{font: 12pt sans-serif bold italic} Przykład: Tekst

2.2 Kolor i tło

Właściwość	Opis	Wartość	Odnosi się do	Przykład
color	Określa kolor czcionki	nazwa koloru, wartość hex	wszystkie elementy	{color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst
background-color	Określa kolor tła	nazwa koloru, wartość hex	wszystkie elementy	{background-color: #FF5500}
background-image	Określa grafikę pełniąca rolę tła	none , adres URL	wszystkie elementy	{background-image: url(tlo.gif)}
background-repeat	Określa powtrzalność tła	repeat, repeat-x, repeat-y, no-repeat	wszystkie elementy	{background-repeat: repeat-x}
background-attachment	Określa czy tło ma się przesuwać wraz z zawartością (scroll) czy ma być stałe (fixed)	scroll, fixed	wszystkie elementy	{background-attachment: scroll}
background-position	Określa pozycję początkową tła	[ top, center, bottom], [left, center, right ], procent, punkt (pt), inch (in), centymetr (cm), piksel (px)	elementy będące blokiem	{background-position: 100% 30%}
background	Zawiera w sobie wszystkie właściwości dotyczące tła	background-color, background-image, background-repeat, background-attachment, background-position	wszystkie elementy	{background: red url(tlo.jpg) left top no-repeat}

2.3. Tekst

Właściwość	Opis	Wartość	Odnosi się do	Przykład
word-spacing	Określa odległość między wyrazami	normal , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{word-spacing: 1.2em} Przykład: Tekst
letter-spacing	Określa odległość między literami	normal , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{letter-spacing: 0.2em} Przykład: Tekst
text-decoration	Określa czy tekst ma być podkreślony, przekreślony, itd.	none, underline, overline, line-through, blink	wszystkie elementy	{text-decoration: line-through} Przykład: Tekst
vertical-align	Określa położenie tekstu w pionie względem elementu poprzedzającego	baseline, sub, super, top, text-top, middle, bottom, procent	elementy wewnętrzne	{vertical-align: top}
text-transform	Określa sposób przemiany tekstu	capitalize, uppercase, lowercase, none	wszystkie elementy	{text-transform: uppercase} Przykład: Tekst
text-align	Określa położenie tekstu wewnątrz elementu	left, right, center, justify	elementy będące blokiem	{text-align: center}
text-indent	Określa odległość od lewego marginesu	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	elementy będące blokiem	{text-indent: 20%}
line-height	Określa odległość między dwoma sąsiednimi liniami	normal , liczba, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{line-height: 120%}

2.4. Elementy kwadratowe

Właściwość	Opis	Wartość	Odnosi się do	Przykład
margin-top	Określa odległość od górnej krawędzi strony	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{margin-top: 3em}
margin-right	Określa odległość od prawej krawędzi strony	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{margin-right: 4px}
margin-bottom	Określa odległość od dolnej krawędzi strony	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{margin-bottom: 13%}
margin-left	Określa odległość od lewej krawędzi strony	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{margin-left: 4em}
margin	Określa odległość od krawędzi strony według kolejności: górna, prawa, dolna, lewa	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{margin: 2em 3em 1em 4em}
padding-top	Określa górny odstęp elementu	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{padding-top: 0.2em}
padding-right	Określa prawy odstęp elementu	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{padding-right: 12px}
padding-bottom	Określa dolny odstęp elementu	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{padding-bottom: 0.4em}
padding-left	Określa lewy odstęp elementu	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{padding-left: 7%}
padding	Określa odstęp elementu według kolejności: górna, prawa, dolna, lewa	procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{padding: 2em 1em 3em 4em}
border-top-width	Określa szerokość górnej granicy (ramki) elementu	thin, medium, thick , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{border-top-width: thin}
border-right-width	Określa szerokość prawej granicy (ramki) elementu	thin, medium, thick , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{border-right-width: medium}
border-bottom-width	Określa szerokość dolnej granicy (ramki) elementu	thin, medium, thick , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{border-bottom-width: thick}
border-left-width	Określa szerokość lewej granicy (ramki) elementu	thin, medium, thick , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{border-left-width: 3px}
border-width	Określa szerokość granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa	thin, medium, thick , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	wszystkie elementy	{border-width: thin thick medium thick}
border-color	Określa kolor granicy (ramki) elementu	nazwa koloru, wartość hex	wszystkie elementy	{border-color: red}
border-style	Określa styl granicy (ramki) elementu	none, dotted, dashed, solid, double, groove, ridge, inset, outset	wszystkie elementy	{border-style: double}
border-top	Określa szerokość, kolor i styl górnej granicy (ramki) elementu	border-top-width, border-style, color	wszystkie elementy	{border-top: thin blue solid}
border-right	Określa szerokość, kolor i styl prawej granicy (ramki) elementu	border-right-width, border-style, color	wszystkie elementy	{border-right: }
border-bottom	Określa szerokość, kolor i styl dolnej granicy (ramki) elementu	border-bottom-width, border-style, color	wszystkie elementy	{border-bottom: }
border-left	Określa szerokość, kolor i styl lewej granicy (ramki) elementu	border-left-width, border-style, color	wszystkie elementy	{border-left:}
border	Określa szerokość, kolor i styl granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa	border-width, border-style, color	wszystkie elementy	{border: }
width	Określa szerokość elementu (np. grafiki)	auto , procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	elementy będące blokiem	{width: 80px}
height	Określa wysokość elementu (np. grafiki)	auto , punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px)	elementy będące blokiem	{height: 170px}
float		left, right, none	wszystkie elementy	{float: left}
clear		none, left, right, both	wszystkie elementy	{clear: right}

2.5. Klasyfikacja

Właściwość	Opis	Wartość	Odnosi się do	Przykład
display	Określa w jaki sposób dany element ma być wyświetlony	block, inline, list-item, none	wszystkie elementy	{display: none}
white-space	Określa w jaki sposób należy obchodzić się z odstępami wewnątrz elementu	normal, pre, nowarp	elementy będące blokiem	{white-space: pre}
list-style-type		disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none	elementy z display = list-item	{list-style-type: lower-roman}
list-style-image		adres URL, none	elementy z display = list-item	{list-style-image: url(rysunek.gif)}
list-style-position		inside, outside	elementy z display = list-item	{list-style-position: outside}
list-style		disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, inside, outside, adres URL, none	elementy z display = list-item	{list-style: circle outside}

HTML i CSS. Sara Wilczyńska

1. Podstawowa struktura dokumentu HTML

2. Podziały wierszy i akapity

3. Listy

4. Rysunki

5. Linki

6. Formatowanie tekstu

7. Tabele

8. Ramki

9. Formularze

10. Kaskadowe arkusze stylów

Użycie

Składnia

Deklaracja

Kolejność

Dopasowywanie

Selektory hierarchii znaczników

Dziedziczenie

Pseudoklasy

Pseudoelementy

2.1 Czionka

Właściwość

Opis

Wartość

Odnosi się do

Przykład

font-family

Określa typ czcionki

nazwa czcionki

wszystkie elementy

{font-family: Arial} Przykład: Tekst

font-style

Określa styl czcionki

normal, italic, oblique

wszystkie elementy

{font-style: italic} Przykład: Tekst

font-variant

normal, small-caps

wszystkie elementy

{font-variant: small-caps} Przykład: Tekst

font-weight

Określa grubość czcionki

normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

wszystkie elementy

{font-weight: bolder} Przykład: Tekst

font-size

Określa rozmiar czcionki

xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller , punkt (pt), inch (in), centymetr (cm), piksel (px)

wszystkie elementy

{font-size: 20px} Przykład: Tekst

font

Zawiera w sobie wszystkie właściwości dotyczące czcionki

font-family, font-size, font-variant, font-weight, font-size

wszystkie elementy

{font: 12pt sans-serif bold italic} Przykład: Tekst

2.2 Kolor i tło

Właściwość

Opis

Wartość

Odnosi się do

Przykład

color

Określa kolor czcionki

nazwa koloru, wartość hex

wszystkie elementy

{color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst

background-color

Określa kolor tła

nazwa koloru, wartość hex

wszystkie elementy

{background-color: #FF5500}

background-image

Określa grafikę pełniąca rolę tła

none , adres URL

wszystkie elementy

{background-image: url(tlo.gif)}

background-repeat

Określa powtrzalność tła

repeat, repeat-x, repeat-y, no-repeat

wszystkie elementy

{font-family: Arial}
Przykład: Tekst

normal,
italic,
oblique

{font-style: italic}
Przykład: Tekst

normal,
small-caps

{font-variant: small-caps}
Przykład: Tekst

normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900

{font-weight: bolder}
Przykład: Tekst

xx-small, x-small, small, medium, large, x-large, xx-large,
larger, smaller ,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)

{font-size: 20px}
Przykład: Tekst

font-family,
font-size,
font-variant,
font-weight,
font-size

{font: 12pt sans-serif bold italic}
Przykład: Tekst

nazwa koloru,
wartość hex

{color: red}
Przykład: Tekst
{color: rgb(0,0,255)}
Przykład: Tekst

nazwa koloru,
wartość hex

none ,
adres URL

repeat,
repeat-x,
repeat-y,
no-repeat

scroll,
fixed

[ top, center, bottom],
[left, center, right ],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)

background-color,
background-image,
background-repeat,
background-attachment,
background-position

normal ,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

{word-spacing: 1.2em}
Przykład: Tekst

normal ,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

{letter-spacing: 0.2em}
Przykład: Tekst

none,
underline,
overline,
line-through,
blink

{text-decoration: line-through}
Przykład: Tekst

baseline,
sub,
super,
top,
text-top,
middle,
bottom,
procent

capitalize,
uppercase,
lowercase,
none

{text-transform: uppercase}
Przykład: Tekst

left,
right,
center,
justify

procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

normal ,
liczba,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)