Witryny aplikacji internetowych - Kaskadowe arkusze stylów (CSS)
1. Język CSS określa układ graficzny dokumentu HTML: parametry czcionki, wysokości i szerokość obrazków, ich położenie, rodzaj tła itp.
Cechy języka CSS:
Cechy języka CSS:
- Oddziela strukturę informacyjną witryny od jej warstwy prezentacyjnej
- Daje większe możliwości formatowania tekstu
- Pozwala zapisać wszystkie informacje dotyczące wyglądu dokumentu w oddzielnym pliku tekstowym dołączanym później do dokumentów HTML
- Umożliwia formatowanie wielu dokumentów przy użyciu jednego arkusza stylów
- Umożliwia stosowanie różnych układów graficznych w zależności od typu urządzenia, na którym zamierzamy wyświetlać projektowaną stronę
2. W dokumencie HTML istnieje kilka sposobów na dołączanie stylów CSS:
- styl lokalny (w linii)
- wewnętrzny arkusz stylów
- zewnętrzny arkusz stylów
3. Styl lokalny - korzystając z niego możemy zdefiniować formatowanie pojedynczego elementu strony. Taki styl jest definiowany w tej samej linii, w której znajduje się element formatowany.
np.
<p style="color: red">Jakiś tekst</p>
4. Wewnętrzny arkusz stylów umieszczany jest w dokumencie HTML, dzięki zastosowaniu znacznika <style>, który zawsze występuje w części nagłówkowej dokumentu (<head>). Metodę tę stosujemy wtedy, gdy elementy formatowane pojawiają się na stronie wielokrotnie.
np.
<html>
<head>
<title>Żenada</title>
<style>
caption {caption-side:bottom}
h6{color: yellow font-size:12px;}
</style>
</head>
5. Zewnętrzny arkusz stylów - plik tekstowy z rozszerzeniem .css, zawierający definicję wszystkich stylów używanych w projektowanej witrynie. Odnośnik umieszczony w dokumencie HTML powinien mieć postać:
[...]
<head>
<link rel="stylesheet" type="text/css" href="arkusz.css">
<style>
[...]
Wartością atrybutu href powinna być ścieżka dostępu do pliku zawierającego zdefiniowane style.
Odnośnik do arkusza stylów powinien znaleźć się w <head>.
np.
<html>
<head>
<title>Żenada</title>
<style>
caption {caption-side:bottom}
h6{color: yellow font-size:12px;}
</style>
</head>
5. Zewnętrzny arkusz stylów - plik tekstowy z rozszerzeniem .css, zawierający definicję wszystkich stylów używanych w projektowanej witrynie. Odnośnik umieszczony w dokumencie HTML powinien mieć postać:
[...]
<head>
<link rel="stylesheet" type="text/css" href="arkusz.css">
<style>
[...]
Wartością atrybutu href powinna być ścieżka dostępu do pliku zawierającego zdefiniowane style.
Odnośnik do arkusza stylów powinien znaleźć się w <head>.