CSS. Kaskadowe Arkusze Stylów

Wielkość: px

Rozpocząć pokaz od strony:

Download "CSS. Kaskadowe Arkusze Stylów"

Paulina Wróbel
8 lat temu
Przeglądów:

1 CSS Kaskadowe Arkusze Stylów

2 CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać problem rozdziału struktury dokumentu od wyglądu strony Zewnętrzne arkusze stylów umieszczane w plikach CSS Zewnętrzne arkusze stylów umożliwiają szybką zmianę wyglądu wielu stron Różne definicje stylów dla tego samego dokumentu są kaskadowo łączone w jeden wirtualny styl

3 Łączenie kaskadowe stylów Porządek łączenia (od najniższego priorytetu)» domyślny styl przeglądarki» zewnętrzny arkusz stylów» wewnętrzny arkusz stylów (w znaczniku <head>)» styl elementu

4 Dodawanie arkuszy stylów w HTML-u Trzy sposoby:» zewnętrzny arkusz» wewnętrzny arkusz» styl elementu

5 Zewnętrzny arkusz stylów Zalecany, gdy taki sam styl ma być stosowany dla wielu stron Zapisywany w osobnym pliku.css Plik nie powinien zawierać znaczników HTML Efekty zmian w tym pliku będą widoczne na wielu stronach Strona odwołuje się do pliku za pośrednictwem znacznika <link> Przykład: <head> <link rel="stylesheet" type="text/css" href="arkusz_stylow.css" /> </head>

6 Wewnętrzny arkusz stylów Zalecany, gdy pojedyncza strona ma być wyświetlana według innego stylu niż pozostałe strony serwisu Zapisywany w tym samym pliku.html, w którym zapisana jest strona www Definiowane w sekcji <head>... </head> za pośrednictwem znacznika <style>... </style> Przykład: <head> <style type="text/css"> h1 {color: blue} p {margin-left: 20px} </style> </head> Uwaga! Starsze wersje przeglądarek mogą nie obsługiwać znacznika <style>... </style>. W takim przypadku jest on ignorowany, ale niestety zawartość zostanie wyświetlona. Można tego uniknąć wpisując zawartość jako komentarz HTML-a.

7 Styl elementu Zalecane tylko w szczególnych przypadkach Zawartość dokumentu i sposób jego prezentacji określone wewnątrz tych samych znaczników Zasięg takiego stylu ogranicza się do elementu HTML, w którym został on użyty Definiowany za pomocą atrybutu style, którego wartość może być równa dowolnej właściwości CSS Przykład: <h1="color: blue; margin-left: 20px; font-size: 14pt"> Nagłówek </h1>

8 Składnia CSS Trzy części: selektor, właściwość, wartość» selektor {właściwość:wartość} selektor element HTML właściwość cecha wizualna elementu, która ma być zmieniona wartość wartość na jaką ma być zmieniona cecha wizualna, jeżeli składa się ona z kilku słów to całość należy ująć w znaki ""» można zdefiniować kilka właściwości dla jednego selektora, wówczas sąsiednie pary "właściwość: wartość" są oddzielone średnikami np. p {text-align: center; font-family="sans serif"» można grupować selektory (należy je wtedy oddzielić przecinkami) np. h1,h2,h3 {color: red}

9 Klasy Dzięki klasom elementy tego samego typu mogą mieć w ramach tej samej strony różne właściwości przykład:» arkusz stylów: p.klasa1 {text-align: left} p.klasa2 {text-align: right} p.klasa3 {color: red; text-decoration: bold}» plik HTML: <p class=klasa1> tekst wyrównany do lewej </p> <p class=klasa2> tekst wyrównany do prawej </p> Łączenie klas: <p class="klasa1 klasa3"> wytłuszczony czerwony tekst wyrównany do lewej </p> Uwaga! Nazwa klasy nie powinna zaczynać się cyfrą, ponieważ takie klasy nie są obsługiwane w Firefoxie

10 Style dla wszystkich elementów HTML Definiowane za pomocą klas bez selektora (.klasa) Przykład» arkusz stylów:.center {text-align: center}» plik HTML: <h1 class="center"> Wycentrowany nagłowek</h1> <p class="center"> Wycentrowany paragraf </p>

11 Style dla elementów o określonych atrybutach Składnia:» selektor[atrybut="wartość"] {właściwość:wartość} Przykład» arkusz stylów: input[type="text"] {background-color: green}» plik HTML: Nazwisko: <input type="text" name="nazwisko">

12 Selektor id Możliwość definiowania stylów dla elementów HTML z określonym atrybutem id W arkuszu stylów atrybutowi id odpowiada symbol # Przykład:» arkusz stylów: #niebieski {color: blue} h1#nagl1 {text-align: right; color: green}» w pliku HTML każdy element z atrybutem id="niebieski" zostanie wyświetlony w kolorze niebieskim, a nagłówki z atrybutem id="nagl1" będą wyświetlone w kolorze zielonym z wyrównywaniem do prawej strony

13 Pseudoklasy Składnia:» selektor.nazwaklasy:pseudoklasa {właściwość: wartość;}» służą do formatowania elementów HTML w zależności od akcji użytkownika, umiejscowienia na stronie, języka, itp. Przykład:» hiperłącza» arkusz stylów: A:link {color:black;} A:visited {color:green;} A:hover {color:red;} /* musi wystąpić po a:link i a:visited */ A:active {color:blue;} /* musi wystąpić po a:hover */» plik HTML <a href="index.html" target="_blank">to jest hiperłącze w kolorze czarnym, pod kursorem myszy zmienia kolor na czerwony, po kliknięciu na niebieski, a po odwiedzeniu na zielony</a>

14 Komentarze Ujęte w parę znaków: /* oraz */ Są ignorowane przez przeglądarki

15 Dziedziczenie Przejęcie niektórych cech stylu zdefiniowanych dla obiektu nadrzędnego Na kilku płaszczyznach:» miejsca definiowania stylu (arkusze zewnętrzne, arkusze wewnętrzne, style elementu)» po obiektach nadrzędnych (przykład na rysunku obok)» po obiektach bez klasy przykład: arkusz stylów: <head> <html> <body> p {color: blue;} p.klasa1 {font-size: 8pt;} p.klasa2 {color:red; font-size: 12pt;} plik HTML: <p> Niebieski tekst </p> <title> <p> <h1> <p class="klasa1"> Tekst niebieski (odziedziczony) rozmiar 8 punktów </p> <p class="klasa2"> Tekst czerwony o rozmiarze 12 pt </p> <table> <td>

16 Style tła dokumentu Umożliwiają:» określenie koloru tła elementu» ustawienie obrazka jako tła» powtarzanie obrazka tła w pionie i/lub w poziomie» określenie pozycji obrazka tła

17 Ustawianie koloru tła Właściwość: background-color Wartości:» rgb(n,n,n)» #xxxxxx» nazwa koloru» transparent Przykład: body {background-color: blue} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

18 Obrazek jako tło Własność:» background-image Wartości:» url -» none Przykład: body {background-image: url('tlo.jpg') }

19 Powtarzanie obrazka tła Własność:» background-repeat Wartości:» repeat» repeat-x» repeat-y» no-repeat

20 Określanie stałej pozycji tła Własność:» background-position Wartości:» top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right (pominięcie jednej wartości oznacza, że będzie miała ona wartość center)» x% y% (pominięta wartość ustawiona na 50%)» xpx ypx (pominięta wartość ustawiona na 50%) Można mieszać wartości procentowe i pikselowe

21 Własność background-attachment Decyduje o tym, czy obrazek tła ma być nieruchomy, czy też skrolowany razem z resztą strony Wartości:» scroll» fixed Przykład: body {background-image: url('tlo.gif'); background-repeat:no-repeat; background-attachment: fixed }

Podobne dokumenty

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu