Prezentacja CSS
Download
Report
Transcript Prezentacja CSS
Tworzenie stron internetowych
CSS – Kaskadowe Arkusze Stylów
„Ucz się, jak gdybyś miał żyć wiecznie,
żyj – jak gdybyś miał umrzeć jutro”
Św. Izydor z Sewilli
Tomasz Piłka
Kaskadowe Arkusze Stylów
(ang. Cascading Style Sheets)
mechanizm pozwalający przypisywać style elementom
definiowanym przy pomocy języków opisu dokumentu
(przede wszystkim (X)HTML lub XML),
opisuje sposób prezentacji dokumentu przez przeglądarkę,
zwiększenie przejrzystości kodu HTML poprzez oddzielenie
struktury i treści dokumentu od opisów formatowania
poszczególnych elementów,
style pozwalają kontrolować takie atrybuty jak:
rodzaj, rozmiar i kolor czcionki,
wyrównywanie,
wielkość marginesów,
głębokość wcięcia akapitu,
kolor i grafikę tła,
odstępy między elementami,
wzajemne położenie elementu i otaczającego go tekstu.
Krótka historia
pierwotnie HTML jako języki wyłącznie do opisu struktury
dokumentu,
potrzeba ożywienia wyglądu dokumentów HTML, dodanie nowych
znaczników pozwalających kontrolować kolory, typografię, dodawać
nowe media (np. obrazki),
powstanie znaczników działających tylko w konkretniej grupie
przeglądarek, konieczność wysyłania do klienta różnych wersji tej
samej witryny w zależności od użytej przeglądarki,
1994 - powstanie CHSS (Cascading HTML Style Sheets) - Håkon
Wium Lie,
możliwość stosowania stylów do innych języków podobnych do
HTML, stąd nowa nazwa – CSS,
1996 – wydanie oficjalnej dokumentacji: „CSS, Kaskadowe arkusze
stylów, poziom 1” przez organizację World Wide Web Consortium,
która przejęła prace nad CSS,
aktualnie dostępne są następujące wersje:
- CSS1, CSS2, CSS2.1, CSS3.
Wstawianie CSS do HTML
sposoby umieszczania styli CSS w dokumencie HTML:
styl lokalny,
styl zagnieżdżony,
wydzielanie bloków,
CSS z pliku zewnętrznego,
importowanie arkusza z innej strony.
oznaczenia przyjęte w prezentacji:
<p style="text-align: center;"> tekst </p>
tekst zwykły,
znaczniki HTML,
elementy CSS.
Styl lokalny
bezpośrednie wstawienie stylu w obrębie
danego znacznika,
formatowany jest jedynie znacznik, w którym
styl został umieszczony, pozostałe znaczniki
(nawet tego samego typu) pozostają bez
zmian,
Przykład:
<p style="text-align: center;"> tekst </p>
Styl osadzony
definicję stylu umieszcza się w nagłówku dokumentu
HTML (<head>),
w otwierającym tagu <style> należy dodać jego typ, czyli
type="text/css"
niektóre
przeglądarki
mogą
niepoprawnie wyświetlić stronę jeżeli nie dodamy tego
elementu,
samą definicję stylu (pomiędzy <style> a </style>)
umieszczamy jako komentarz (<!-- -->), aby ukryć
definicję stylu przed przeglądarkami, które nie obsługują
CSS.
Styl osadzony – przykład
Przykład:
<head>
<style type="text/css">
<!-body {scrollbar-face-color: black;}
p {text-align: center; font-family:
"Tahoma";}
h1 {color: red;}
-->
</style>
</head>
Wydzielanie bloków
wydzielanie formatowanych bloków za pomocą znaczników:
<div> </div> i <span> </span>,
następny krok można wykonać na dwa sposoby:
definicja stylu umieszczona bezpośrednio w wydzielonym bloku
(styl lokalny),
definicja stylu umieszczona w nagłówku dokumentu (styl
zagnieżdżony),
w przypadku pierwszym zasada taka jak przy stylu
lokalnym, z tą różnicą, że w typowym stylu lokalnym
formatowany był konkretny znacznik, a tutaj formatowany
jest cały blok (może w nim być więcej znaczników),
w przypadku drugim, definiując styl, należy wskazać który
blok definiujemy, a następnie zdefiniować dla niego styl
(przykład na następnym slajdzie),
różnica pomiędzy <div> i <span>: <div> może zawierać w
sobie więcej elementów niż <span>, mogą w nim być
umieszczone nawet następne bloki.
Wydzielanie bloków – przykład
Przykład:
definicja stylu „blok1” w nagłówku dokumentu:
#blok1 {font-family: verdana; font-size: 14px;}
#blok1 - niepowtarzalna nazwa (id) konkretnego bloku w
dokumencie,
wydzielenie bloku:
<div id="blok1"> tekst, grafika itp. </div>
tym sposobem przypisujemy temu blokowi parametr id, dla
którego styl został zdefiniowany w nagłówku dokumentu.
Wszystkie elementy, które znajdą się w tym bloku (tekst,
grafika itp.), zostaną sformatowane zgodnie ze stylem
określonym w #blok1.
CSS z pliku zewnętrznego
dołączenie do strony zewnętrznego arkusza stylów
(plik z rozszerzeniem .css), w którym definiujemy
poszczególne style, przykład takiego pliku na
następnym slajdzie,
powiązanie każdej ze stron naszej witryny z
powyższym arkuszem stylów poprzez dopisanie w ich
nagłówkach znacznika:
<link rel=”stylesheet” href="nazwa_pliku.css"
type="text/css">
CSS z pliku zewnętrznego – przykład
Przykład zewnętrznego arkusza stylów (np. plik styl.css):
<html> <style type="text/css">
<!-hr {color: darkgoldenrod; width: 80%;}
h1 {font-family: "Tahoma"; font-size: 20pt;}
p {text-align: justify; font-size: 10pt;}
.maly_tekst {font-size: 5pt;}
li {text-align: justify; font-size: 10pt;}
a {color: goldenrod;}
.img_oplyw {float: left}
-->
</style> </html>
Kaskadowość stylów
hierarchia źródeł stylów, od lokalizacji stylu zależy
zasięg jego oddziaływania,
rodzaje arkuszy stylów zaczynając od najbardziej
ogólnych:
→ styl importowany z zewnątrz (z innej witryny),
→ styl z pliku zewnętrznego,
→ styl osadzony,
→ styl lokalny,
kaskadowość stylów objawia się w przypadku
korzystania z przynajmniej dwóch z wymienionych
wcześniej rodzajów arkuszy,
gdy jakiś element znajduje się w zasięgu więcej niż
jednego stylu, obowiązuje zasada, że styl znajdujący
się "bliżej" formatowanego elementu znosi działanie
stylu "odległego".
Budowanie stylu
ogólna postać arkusza stylu:
selektor {cecha: wartość; cecha: wartość;}
dowolność zapisu:
selektor {
cecha: wartość;
cecha: wartość;
cecha: wartość;
}
selektor – element, dla którego chcemy zdefiniować
styl,
cecha – to, co chcemy określić dla danego elementu
(np. kolor),
wartość – np. 12px, blue, small, bold.
Budowanie stylu – przykłady
Przykład:
chcemy ustalić kolor czcionki dla zwykłego akapitu
(<p>),
p {color: green;} lub P {COLOR: #00FF00;}
Przykład:
chcemy ustalić szerokość i kolor linii poziomej (<hr>),
hr {width: 100px; color: silver;}
Przykład:
chcemy wyjustować listy wypunktowane (<li>),
li {text-align: justify;}
Selektor – class
Przykład - class jako selektor:
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
<STYLE TYPE="text/css">
H1.naglowek1 {color: #00FF00;}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=naglowek1>Rozdział 1</H1>
</BODY>
</HTML>
Selektor – class c.d.
H1.naglowek1 {color: #00FF00;}
można użyć tylko dla znaczników <H1>
prawidłowo:
<H1 CLASS=naglowek1>Rozdział 1</H1>
nieprawidłowo: <P CLASS=naglowek1>Tekst</P>
.naglowek1 {color: #00FF00;}
można użyć dla dowolnych znaczników
prawidłowo:
<H1 CLASS=naglowek1>Rozdział 1</H1>
prawidłowo:
<P CLASS=naglowek1>Tekst</P>
H1 {color: #00FF00;}
domyślnie stosowany dla każdego znaczników <H1>
prawidłowo:
<H1>Rozdział 1</H1>
prawidłowo:
<H1 CLASS=naglowek1>Tekst</H1>
tutaj zostanie zasłonięty przez styl naglowek1 (bardziej
szczegółowy)
Przykład
…
body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm}
h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF}
p {font-size: 14pt; text-indent: 4cm}
.lewa {text-align: left}
.prawa {text-align: right}
…
<h2>Czerwony nagłówek na białym tle</h2>
<p class=lewa>
Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak
do nagłówka. Wyrównamy go do lewego marginesu.
</p>
<p class=prawa>
Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak
do nagłówka. Akapit został wyrównany do prawego marginesu.
</p>
<h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2>
<p class=left>
Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak
do nagłówka. Wyrównamy go do lewego marginesu.
</p>
<p class=prawa>
Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak
do nagłówka. Akapit został wyrównany do prawego marginesu.
</p>
…
Selektor – id
definicje stylu:
#tytul_3 {font-size: 16;}
H1#tytul_3 {font-size: 16;}
formatowany element (w <body>):
<P ID=tytul3>Jakiś tytuł</P>
analogia do selektora class:
przy definicji pierwszej takie formatowanie jest
poprawne,
przy definicji drugiej jest niepoprawne, ponieważ ten
styl można zastosować tylko do znacznika <H1>.
Rozciąganie stylu
Rozciąganie stylu polega na objęciu stylem pewnej sekcji
dokumentu HTML. Służy do tego para znaczników <span>
</span>
Element span jest szczególnie przydatny, gdy konieczne
jest odmienne sformatowanie kilku znaków w obszarze, w
którym styl narzucają arkusze stylów, lecz można go
także wykorzystać, aby zastosować styl do większej sekcji
dokumentu
<span style=”definicja_stylu”> </span>
.kolorowa {font-size: 24pt; color: #FFFFFF}
<span class="kolorowa">
Przykład:
<h2>Ala <span style="font-variant: small-caps;
color:blue; text-decoration: underline">ma</span>
kota</h2>
Cechy – tekst
font-family – krój czcionki
nazwa czcionki np. verdana, Arial
font-size – wielkość czcionki
w jednostkach np. 11px
jeżeli jest wielowyrazowa, to musi zostać ujęta w cudzysłów
np. ‘Arial CE‘
w procentach
nazwa: xx-small, x-small, small, medium, large, xlarge, xx-large, larger, smaller
font-weight – grubość czcionki
nazwa: normal, bold, bolder, lighter
liczba: 100-900
font-style – określa czy czcionka jest pisana kursywą czy
nie
nazwa: normal, italic, oblique
font-variant – kapitaliki
nazwa: normal, small-caps
color – kolor tekstu
test-decoration – dekoracja tekstu
nazwa: none, underline, overline, line-through, blink
text-transform – transformacja tekstu
nazwa: none, capitalize, uppercase, lowercase
text-align – wyrównanie tekstu
nazwa: left, center, right, justify
text-indent – wcięcie tekstu
dowolna wartość procentowa
wartość wyrażona w jednostkach np. 10pt
line-height, letter-spacing, word-spacing – odstępy
między:
wierszami, literami, wyrazami
nazwa: normal
nazwa angielska np. white
wartość szesnastkowa np. #FFFFFF
dowolna wartość procentowa
wartość wyrażona w jednostkach np. 10pt
vertical-align – pionowe wyrównanie tekstu
nazwa: baseline, sub, super, top, text-top, middle,
bottom, text-bottom
Cechy – tło
background-color – kolor tła
transparent (przezroczystość), nazwa angielska, wartość
szesnastkowa
background-image – rysunek w tle
none lub url (nazwa_pliku)
background-attachment – przewijanie tła wraz z tekstem
scroll, fixed
background-repeat – powtarzanie się tła
repeat, no-repeat, repeat-x, repeat-y
background-position – pozycja tła
left, right, center, bottom, top
Pozostałe cechy
Oprócz wyżej wymienionych elementów można formatować
jeszcze wiele innych (wykazy, marginesy, tabele, opływanie
rysunku tekstem, warstwy, pozycjonowanie itp.).
Działanie jest analogiczne, a wszystkich możliwości jest
bardzo dużo.
Pełny opis możliwości CSS znajduje się w oficjalnej
specyfikacji na stronie World Wibe Web Consortium, pod
adresem:
http://www.w3.org/Style/CSS/
Przykład – zmiana wyglądu tabeli w HTML
przykładowa prosta strona stworzona za pomocą HTML;
index.html:
<HTML>
<HEAD><TITLE>CSS</TITLE></HEAD>
<BODY>
<CENTER><H2>obramowanie i paski przewijania</H2><CENTER>
<TABLE BORDER=1 BGCOLOR=yellow ALIGN=center>
<TR ALIGN=center>
<TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3>
ELEMENT</FONT></TD>
<TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3>
OPIS</FONT></TD>
<TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3>
MOŻLIWE WARTOSCI</FONT></TD>
</TR>
<TR ALIGN=center>
<TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3>
border-width</FONT></TD>
<TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3>
grubosc obramowania</FONT></TD>
<TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3>
w punktach (pt), procentach lub pikselach</FONT></TD>
</TR>
[...]
<TR ALIGN=center>
<TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3>
scrollbar-darkshadow-color</FONT></TD>
<TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3>
wszystkie dostępne kolory HTML</FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
w przeglądarce powyższa strona wygląda następująco (Firefox
2.0.0.7):
modyfikacja wyglądu tabeli – np. zmiana czcionki w komórkach –
wymaga zmiany w każdej komórce z osobna; biorąc pod uwagę,
że jest 26 komórek zawierających tekst – należy 26 razy
wpisać/skopiować to samo, np. w miejsce:
<FONT FACE=Arial COLOR=green SIZE=3>
wkleić:
<FONT FACE=Arial COLOR=darkgreen SIZE=3>
problem się potęguje, gdy dopiero szukamy pasującego układu
kolorów i w tym celu sprawdzamy różne możliwości
Przykład c. d. – teraz w HTML + CSS
tym razem stosujemy CSS; index.html:
<HTML>
<HEAD><TITLE>CSS</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="style.css">
</HEAD>
<BODY>
<H2>obramowanie i paski przewijania</H2>
<TABLE BORDER=1 BGCOLOR=yellow ALIGN=center>
<TR ALIGN=center>
<TD WIDTH=200>ELEMENT</TD>
<TD WIDTH=150>OPIS</TD>
<TD WIDTH=250>MOŻLIWE WART.</TD>
</TR>
[...]
</TABLE>
</BODY>
</HTML>
style.css:
<HTML>
<STYLE TYPE="text/css"> <!H2 {
FONT-FAMILY: Arial;
FONT-SIZE: 20;
COLOR: darkgreen;
TEXT-ALIGN: center;
LETTER-SPACING: 0;
}
td {
BORDER WIDTH: 1pt;
BORDER-STYLE: dashed;
BORDER-COLOR: darkgreen;
}
table {
BORDER-WIDTH: thick;
BORDER-STYLE: groove;
FONT-FAMILY: Arial;
FONT-SIZE: 14;
FONT-WEIGHT: 200;
COLOR: #333300;
TEXT-ALIGN: center;
LETTER-SPACING: 1;
}
--> </STYLE>
</HTML>
nowa strona wygląda następująco:
zmiana czcionki w komórkach wymaga zmiany jedynie w pliku
style.css, w opisie formatowania tabeli, np. zamiast:
FONT-SIZE: 14;
piszemy:
FONT-SIZE: 12;
i wszystkie komórki tabeli zostaną zaktualizowane
dodając do tego więcej możliwości formatowania w CSS niż w
HTML, użycie CSS jest tutaj bardzo korzystne
Podsumowanie
zalety stosowania CSS w HTML:
o wiele krótsze wprowadzanie zmian w formatowaniu
dokumentu HTML, a co za tym również idzie – mniej
możliwości popełnienia błędu,
więcej możliwości formatowania,
oddzielenie struktury dokumentu (HTML) od opisów
formatowania (CSS).
przydatne linki:
specyfikacja na oficjalnej stronie W3C:
http://www.w3.org/Style/CSS/
kursy, artykuły:
http://www.kurshtml.boo.pl/
http://www.webinside.pl/
http://www.webhelp.pl/
Dziękuję za uwagę
W prezentacji wykorzystano materiały Politechniki Krakowskiej
Wydział Inżynierii Elektrycznej i Komputerowej:
Tomasz Jasik, Grzegorz Sroka