(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])

Transkrypt

CSS (kaskadowe arkusze stylów) to narzędzie do formatowania
dokumentu. Obecna wersja to CSS 2.1
Wstawianie stylów
Przeglądarka wyświetla strony pozbawione stylów autorskich, stosując
własne, wbudowane w program style.
Gdy czytana strona zawiera style zdefiniowane przez jej autora, to
właśnie te style są uwzględniane w pierwszej kolejności podczas
przeglądania strony, gdyż są one ważniejsze.
Style autora strony mogą być umieszczane w dokumencie na kilka
sposobów:
1
CSS można osadzać w kodzie strony na kilka sposobów. Są więc:
style wewnętrzne
lokalne (in-line style)
• Kody formatujące są umieszczane w środku tekstu i dotyczą jednego,
wybranego znacznika dokumentu, jak p czy td. Przykład:
<p style="definicja stylu">Treść akapitu</p>
• Kody formatujące są umieszczane w środku tekstu, obejmują większy
fragment dokumentu i nie są związane z wybranymi znacznikami rozciąganie stylu (span) i wydzielone bloki (div)
zagnieżdżone
• Kody formatujące są umieszczane na początku strony, w nagłówku
head, i oddziałują na cały dokument
2
Rozciąganie stylu
Rozciąganie stylu polega na objęciu stylem pewnego fragmentu
dokumentu HTML. Posługujemy się tutaj poleceniem
<span> </span>
Na przykład:
<p> Jakiś akapit i <span style="font-family: Courier; font-size: 15pt;
font-weight: bold; color: red; ">fragment objęty poleceniem span
</span> oraz reszta akapitu</p>
Efekt:
Jakiś akapit i fragment objęty poleceniem span oraz reszta akapitu
3
Styl zagnieżdżony
<html>
<head>
…
<style type=”text/css”>
p
{
color:green;
font-family:Arial;
}
</style>
</head>
<body>
…
</body>
</html>
4
style zewnętrzne
dołączone
• Kody formatujące są umieszczane w zewnętrznym pliku tekstowym o
nazwie bez polskich liter i z rozszerzeniem css
nazwa-pliku.css
• W dokumentach wstawiamy odwołania do tych stylów zewnętrznych
za pomocą znacznika <link /> umieszczonego w nagłówku strony
importowane
• Kody formatujące są importowane z innej strony za pomocą
polecenia @import
kaskadowość stylów, czyli hierarchia stylów w danym dokumencie
styl lokalny → styl zagnieżdżony → styl zewnętrzny → styl
importowany 5
Aby dołączyć arkusz do strony, trzeba napisać polecenie w ramach head:
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
określa relację
– w przypadku
CSS zawsze ma
wartość
stylesheet
href odpowiada za określenie nazwy
oraz lokalizacji wybranego arkusza
stylów. Arkusz może być ulokowany w
tym samym katalogu co strony, które się
do niego odnoszą. Wszystkie definicje
zewnętrznego arkusza stylów są
automatycznie przyjmowane przez
elementy danej strony.
type zawsze
ma wartość
text/css
Stosowanie zewnętrznego arkusza ma zalety:
• nie jest konieczne wprowadzanie stylów na konkretnej stronie
• zmniejsza się objętość plików
• za pomocą zmiany jednego parametru w arkuszu stylów możemy zmienić wygląd
wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość
czcionki akapitów)
6
Import arkusza stylów
Każdą stronę można opisać za pomocą arkusza stylów importowanego
z innej witryny. Funkcję tę realizują Internet Explorer 4 i 5, Netscape 6
i Opera 5. Import jest definiowany za pomocą następującego
polecenia, umieszczanego w ramach head:
<style>
@import url("http://www.jakisadres.pl/arkusz.css");
</style>
Wygląd dokumentu będzie się oczywiście zmieniać za każdym razem,
gdy webmasterowi owej strony przyjdzie do głowy zmienić zawartość
arkusza.
7
Jednostki miary i nazewnictwo kolorów stosowane w CSS
8
Jednostki miary
Do dyspozycji mamy dwa rodzaje jednostek miary
względne
bezwzględne
Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0,1in itd.
Jednostki względne
• px - piksele, odniesienie do rozdzielczości monitora, np.
p {margin-left: 20px;}
• em – zależność między wysokością elementu a wielkością zdefiniowanej
czcionki, np.
p {margin-left: 2em}
dokładniej:
P
dla bloku tekstu zdefiniowano czcionkę o
{
wysokosci 12 punktów – to odpowiada 1em
font-size: 12pt;
lewy margines będzie więc równy 2em czyli
margin-left: 2em;
24 punkty
}
9
• ex – proporcje do wysokości litery x
p {margin-left: 2ex;}
stosowanie jednostki ex wiąże się z rodzajem użytej czcionki – każda
czcionka ma inna wielkość podstawową więc np. Arial o wielkości 2ex
nie będzie równy Times New Roman o wielkości 2ex
• % -- procenty
p {font-size: 10%;}
określa wielkość względem wartości domyślnej. Tutaj wielkość czcionki
zostanie ustawiona na poziomie 1/10 domyślnego rozmiaru, jaki został
skonfigurownany w przeglądarce
10
Jednostki bezwzględne
• in – cale, 1in = 2,54cm
p {margin-left: 2in;}
• pt – punkty (72pnkty odpowiadają 1 calowi)
p {font-size: 12pt;}
• cm – centymetry (1 cm odpowiada 0,39 cala)
p {font-size: 1cm;}
• mm – milimetry
p {font-size: 11mm;}
• pc – pica (1 pc równa się 12 punktom)
p {font-size: 12pc;}
11
Nazwy kolorów
• można używać nazw angielskich dla pewnych kolorów (bleck, white,
red, green, blue, silver, gray, navy, teal, aqua, maroon, purple, fucksia,
lime, olive, yellow)
div
{
color: red;
}
• dla innych kolorów możemy stosować zapis w postaci RGB (model RGB
przypisuje liczby z przedziału od 0 do 255 każdemu z kolorów
podstawowych red, green, blue palety RGB)
div
{
color: rgb(255,0,0);
}
12
• można też definiować procent nasycenia danej barwy podstawowej
div
{
color: rgb(100%,0%,0%);
}
• zapis szesnastkowy
div
{
color: #FF0000;
}
• można używać odwołań do kolorów użytych przez osobę czytającą
stronę, np.
wartość
background
opis i przykład
pobiera kolor pulpitu
body {background-color: background;}
window
pobiera kolor tła z okna
body {background-color: window;}
13
wartość
opis i przykład
windowframe
pobiera kolor ramki okna
body {background-color: windowframe;}
windowtext
pobiera kolor tekstu z okna
p {color: windowtext;}
ActiveCaption
pobiera kolor paska tytułu aktywnego okna
p{color: ActiveCaption;}
ButtonFace
pobiera kolor z powierzchni przycisków
p{color: ButtonFace;}
CaptionText
pobiera tekst z nagłówkó
p{color: CaptionText;}
Highlight
pobiera kolor z wybranego elementu
p{color: Highlight;}
HighlightText
pobiera kolor z tekstu w wybranych elemenachu
p{color: HighlightText;}
Menu
pobiera kolor z tła menu
p{color: Menu;}
Scrollbar
pobiera kolor tła z paska przewijania
p{color: Scrollbar;}
14
Przykłady wielkości absolutnych
<h1 style="font-size: 1.5cm;">Tytuł stopnia 1</h1>
Tytuł stopnia 1
<p style="font-size: 2pc;">Akapit 2 pika</p>
Akapit 2 pika
15
<ul style="margin-left: 30mm;">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>
</ul>
• punkt 1
• punkt 2
• punkt 3
16
Przykład wielkości względnych
<p style="text-indent: 3em; font-size: 12pt;">Akapit z czcionką 12punktową, o wcięciu równym trzykrotnej wysokości czcionki.</p>
Efekt:
Akapit z czcionką 12-punktową, o wcięciu równym trzykrotnej
wysokości czcionki.
<p style="text-indent: 100px; font-size: 12pt;">Akapit z czcionką 12punktową, o wcięciu 100 pikseli.</p>
Efekt:
Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.
17
Stosowanie miar relatywnych ma sens przede wszystkim w
sytuacjach, w których chcemy zachować proporcje wyświetlania
różnych elementów.
Na przykład na monitorze piksel ma inną wartość w centymetrach
w rozdzielczości 800x600 niż 1024x768
18
Styl lokalny
<p style="definicja stylu">Treść akapitu</p>
”cecha: wartość; cecha: wartość;”
Przykład 1
<p style="font-size: 20pt; font-weight: bold; background: green; color: red;
width: 60%;">Style to doskonałe narzędzie dla autora witryny.</p>
Efekt:
Style to doskonałe narzędzie dla autora witryny.
19
Styl lokalny
Przykład 2:
BODY Definiując ciało dokumentu możemy wstawić dodatkowo kilka
informacji o stylach, które zadecydują o graficznym tle strony.
Kolor tła strony
<body style="background-color: wartość_koloru; ">
<body style="background-color: yellow; ">
Uwaga: w zasadzie powinno się deklarować kolor tła własnej strony, gdyż
jeśli tego nie zrobimy, to czytelnik strony zobaczy tło zależne od ustawień
w jego przeglądarce - autor strony nie ma na to wpływu
20
Obrazek jako tło strony
<body style="background-image: url(nazwa_obrazka);">
Np:
<body style="background-image: url(../grafika/pies.gif); ">
Jeśli obrazek pies.gif jest niewielki objętościowo, to zostanie powielony
na szerokość i długość strony.
21
Przykład 3:
<h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sansserif; ">Treść tytułu</h1>
Treść tytułu
Przykład 4:
<ul style="font: italic bold 14pt Times; color: red; ">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
•pierwszy punkt
•drugi punkt
•trzeci punkt
22
Przykład 5:
Pozioma linia z kilkoma atrybutami (tylko IE)
<hr style="height: 10px; width: 200px; color: lime; ">
Przykład 6:
Wykaz numerowany
<ol style="list-style: lower-roman inside;">
<li>pierwszy punkt
<li>drugi punkt
punktor jest schowany w
<li>trzeci punkt
tekście listy,
</ol>
może być też outside
i.
pierwszy punkt
ii.
drugi punkt
iii. trzeci punkt
23
Zewnętrzny arkusz stylów
Ogólne polecenie stylu ma postać
selektor { cecha: wartość;}
• Selektorem jest po prostu polecenie języka, np. p, li, td, body itd. ,
czyli znacznik ale bez nawiasów kątowych
• Cechą jest pewna własność danego znacznika, np. wielkość i styl
czcionki dla akapitu. Cechy są ściśle określone przez specyfikację CSS
• Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.
Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy
łącznie mianem deklaracji stylu.
24
Przykład 2
p {font-family: Times New Roman;}
Selektorem jest p, cechą - rodzina czcionek, wartością - Times New
Roman.
To jest czcionka Times New Roman
Przykład 3
h1 {font-size: 30pt;}
Selektorem jest h1, cechą - wielkość czcionki, wartością - 30 punktów.
30-punktowy tytuł stopnia pierwszego
25
Budowa stylu
26
Selektory
wykorzystywane podczas tworzenia własnych CSS mogą przybierać
różne formy
selektory proste
selektory uniwersalne
selektory potomka
selektory dziecka
selektory rodzeństwa
selektor atrybutu
selektory proste
p {color: red; font-size: 14pt;}
ten styl będzie odnosić się tylko do akapitów zamkniętych w znacznik
<p> </p> i nie będzie wpływał na pozostałe elementy strony www
27
selektory uniwersalne
typ formatowania działający na cały dokument. Przykładem jest tło, które
zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl
może przyjąć następującą postać
* {background-color: white;}
Selektorem jest tu *. Użycie * zwalnia od wpisywania nazw poszczególnych
selektorów.
Innym selektorem uniwersalnym jest body
body {color: red;}
uniwersalność body wynika z jego roli w hierarchii dokumentu
28
selektory potomka
zobaczmy na przykładzie
definiujemy styl nagłówka stopnia pierwszego
h1 {fontsize: 20pt;}
jeśli chcemy aby jakiś fragment tego nagłówka był inaczej sformatowany,
to używamy dodatkowej konstrukcji, tj. selektora potomka
h1 span {fontsize: 10pt;}
Kod strony korzystający z selektora potomka:
<h1> Nagłówek stopnia pierwszego</h1>
<h1> Nagłówek stopnia pierwszego,<span>w którym stosuję selektor
potomka</span> </h1>
pierwszy z nagłówków ma wysokość 20 punktów
w drugim nagłówku użyto selektora potomka, dzięki czemu część tekstu
ma wysokość 20pt a druga część tekstu, objęta znacznikiem <span>
</span> , ma wysokość 10pt
29
Inny przykład
Arkusz stylów:
p {font-size: 14pt;}
p span {font-style: italic; font-size: 20pt;}
Kod strony:
<p> Przykładowy kod HTML wykorzystujący <span> selektor
potomka</span> zadeklarowany powyżej może przybrać następującą
postać.</p>
efekt działania selektora potomka zobaczymy tylko dla tej części akapitu,
która dodatkowo jest zamknięta w znacznik <span> </span>
30
selektory dziecka, rodzeństwa i atrybutu nie są obsługiwane przez
przeglądarkę Internet Explorer
Identyfikator – id
p { color: green; font-size: 14pt;}
ten styl formatuje jednakowo wszystkie akapity.
Można jednak wprowadzić zróżnicowania akapitów:
p { color: green; font-size: 14pt;}
#pochyly {font-style: italic; font-size: 20pt;}
wpis składa się z selektora, do którego planujemy przypisać identyfikator
oraz z nazwy poprzedzonej znakiem #
Kod strony wywołujący tak przygotowany identyfikator:
<p> Blok tekstu w kolorze zielonym i czcionce 14pt</p>
<p id=”pochyly”> Blok tekstu w kolorze zielonym i czcionce 20pt</p>
<p> Blok tekstu w kolorze zielonym i czcionce 14pt</p>
31
Raz zdefiniowany identyfikator może być użyty w innych akapitach (nie
jest to zgodne ze specyfikacją ale działa)
Identyfikator uniwersalny, którego można użyć w dowolnym
elemencie strony:
#czerwony {color: red;}
wywołanie tego identyfikatora może nastąpić w dowolnym znaczniku,
np.
<p id=”czerwony”> Treść akapitu </p>
<h1 id=”czerwony”> Treść nagłówka stopnia pirwszego </h1>
<td id=”czerwony”> Tekst wewnątrz komórki </td>
32
klasy
ta kropka jest bardzo ważna
ich budowa ma postać
selektor.nazwaklasy {font-size: 12pt; color: green;}
tak zdefiniowana klasa może być użyta tylko w tym selektorze, do którego
została przypisana
p.moje {color: green; font-size: 14pt; }
i powinna być wywołana w znaczniku <p></p> za pomocą atrybutu class
(może on być umieszczony w wielu różnych znacznikach)
<p class=”moje”>Treść akapitu</p>
Wg specyfikacji klasa, której użycie jest możliwe w różnych znacznikach
powinna być zdefiniowana jako
.moje { color: red; font-size: 12pt; font-style: italic;}
wywołanie jej to
<h1 class=”moje”> Przykład nagłówka z określoną klasą </h1>
33
przeglądarki nie są niestety do końca zgodne ze specyfikacją ale dlatego
właśnie zarówno nie-uniwersalnych identyfikatorów jak i klas możemy
używać w dokumencie tyle razy ile chcemy (wg specyfikacji dany
identyfikator może wystąpić w dokumencie tylko raz!)
p { font-size: 14; color: green;}
.moje {font-style: italic; font-size: 20pt; color: red;}
przykładowy kod strony:
<p> Blok tekstu o kolorze zielonym i czcionce 14pt </p>
<p class=”moje”> Blok tekstu, w którym używam klasy o nazwie .moje
</p>
<p> Blok tekstu o kolorze zielonym i czcionce 14pt </p>
<ol class=”moje”>
<li> lista, w której używam klasy o nazwie .moje </li>
<li> lista, w której używam klasy o nazwie .moje </li>
</ol>
34
pseudoklasy
są ściśle określone klasy, pozwalające na formatowanie niektórych
elementów dokumentu
pseudoklasy odsyłaczy
ten dwukropek jest bardzo ważny
a:link { color: red;}
a:visited { color: green;}
odpowiada za wygląd hiperłącza, jeśli nie
zostało ono jeszcze odwiedzone
dla hiperłącza już odwiedzonego
są jeszcze inne pseudoklasy, np.
a:hover umożliwia dokonanie zmiany pewnych elementów po najechaniu
na nie myszką (ogólnie – elementem wskazującym)
Przykład prostego arkusza stylów dla jednakowego formatowania wyglądu
wszystkich odnośników na stronie
elementy wspólne dla
wszystkich odsyłaczy
a {font-size: 12pt; text-decoration: none; }
a:link { color: navy;}
a:hover {color: red; text-decoration: underline;}
35
Arkusz stylów z dwoma rodzajami odnośników
a.maly {font-size: 12pt;}
definicja odsyłacza
podstawowego
definicja odsyłacza mniejszego
Aby rozróżnić rozmiary czcionki w odnośnikach w kodzie strony należy
skorzystać z klasy o nazwie maly
<ul>
<li> <a href=”http://mitr.p.lodz.pl” class=”maly”> Instytut </a> </li>
<li> <a href=”http://onet.pl” >Portal Onet.pl </a> </li>
<li> <a href=”http://helion.pl”> Wydawnictwo Helion</a> </li>
</ul>
36
Można określić oddzielnie formatowanie dla każdego stanu odnośnika:
a.maly {font-size: 12pt;}
a.maly:link {color: silver;}
a.maly:visited {color: yellow;}
a.maly:hover {color:black; text-decoration:none;}
inna pseudoklasa to
a:active pozwala nadać dowolne formatowanie elementowi po
nakierowaniu na niego wskaźnika myszy i wciśnięciu przycisku
ale przed jego zwolnieniem
a:active { color: silver;}
a:focus pozwala aby właśnie wyświetlany odsyłacz z menu był
formatowany innym kolorem
a:focus { color: brown;}
37
Pseudoelementy
:first-letter pozwala na formatowanie pierwszej litery w bloku tekstu
np. chcemy powiększyć pierwszą literę do 100pt i nadać jej czerwony kolor
p {color: navy; font-size: 30pt;}
p:first-letter {color: red; font-size: 100pt;}
Przykładowy kod dokumentu
<html>
<head>
<style type="text/css">
p{color: navy; font-size: 30pt}
p:first-letter{color: red; font-size: 100pt;}
</style>
<head>
<body>
<p> Pierwsza litera akapitu powiększona za pomocą :first-letter </p>
</body>
38
</html>
pseudoelement :first-letter można stosować z innymi znacznikami np.
h1 {color: navy; font-size: 30pt;}
h1:first-letter {color: red; font-size: 100pt;}
Przykładowy kod
<h1> Wydawnictwo PWN </h1>
:first-line obejmuje formatowaniem całą pierwszą linię a nie tylko
pierwszą literę
p {color: navy; font-size: 12pt;}
p:first-line {color: red; font-size: 20pt; font-weight: bold;}
39
grupowanie selektorów
przykład arkusza stylów określającego kolor dla nagłówków i akapitów
h1 {color: green;}
h2 {color: green;}
p {color: green;}
uproszczenie – selektory można zgrupować rozdzielając je przecinkami
h1, h2, p {color: green;}
40
body {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top:
1cm;}
p {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; textindent: 3 em;}
a, a:active, a:visited, a:hover {text-decoration: none; color: blue;}
h1, h2, h3 {font-family: Arial, Helvetica; font-weight: bold; color: #808000;}
td {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal;}
li {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal;}
41
Dziedziczność i kaskadowość
Dziedziczenie wiąże się z hierarchią
ważności poszczególnych
znaczników języka
określenie np. koloru tekstu dla
body spowoduje użycie tego koloru
dla każdego elementu strony
znajdującego się niżej w hierarchii
o ile nie zdefiniujemy stylu dla
elementu niższego w hierarchii, to
styl dla tego elementu będzie
dziedziczony z elementów
nadrzędnych
42
Kaskadowość
Wykaz ważności arkuszy stylów
1. Arkusze stylów przeglądarki
2. Arkusze stylów internauty
3. Arkusze stylów projektanta strony
zewnętrzne arkusze stylów
style osadzone w <head></head> dokumentu HTML
style osadzone bezpośrednio w znaczniku
Jeżeli internauta wejdzie na stronę, na której twórca nie zastosował
żadnych stylów, strona ta zostanie wyświetlona za pomocą domyślnego
arkusza przeglądarki.
Jeśli internauta ma przygotowany własny arkusz stylów, to zostanie on
użyty do wyświetlenia strony.
itd.
43
Formatowanie wyglądu tekstu
44
W ramach CSS można kontrolować
poziome i pionowe wyrównywanie
wcięcie
odstępy między wierszami
odstępy między wyrazami
odstępy między literami
dekorację tekstu (podkreślony, przekreślony, itd. )
przekształcanie tekstu (małe i duże litery)
pustą przestrzeń (dodatkowe spacje w tekście)
45
wyrównywanie tekstu
p {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}
za pomocą cechy text-align można wyrównywać wszystkie elementy blokowe
Elementy umieszczone w komórce tabeli oraz wewnątrz innych elementów
blokowych można wyrównywać w pionie
td {vertical-align: top;}
td {vertical-align: middle;}
td {vertical-align: bottom;}
p span {vertical-align: sub;}
p.inny span {vertical-align: super;}
Kod
<p> Indeks <span>Dolny</span> </p>
<p class=”inny”> Indeks <span>Górny</span> </p>
46
wcięcie pierwszego wiersza akapitu
p {text-indent: 1cm;}
odstępy
p {line-height: 9pt;}
między wierszami akapitu
p {line-height: -3pt;}
zagęszczenie tekstu
h1 {word-spacing: 1cm;}
odstępy między wyrazami
h1 {word-spacing: -3pt;}
zagęszczenie wyrazów
a:link {letter-spacing: -2pt;}
zagęszczenie liter
47
Dekoracja tekstu
używamy cechy text-decoration aby spowodować, że tekst na stronie
będzie podkreślony, przekreślony, nadkreślony (kreska u góry) lub
migający
selektor { text-decoration: wartość;}
jako wartość przyjmujemy
underline
overline
line-through
blink
dekorację możemy wyłączyć, np.
a {text-decoration: none;}
48
przekształcenie małe – duże litery
selektor {text-transform: wartość;}
uppercase tylko duże litery
lowercase tylko małe litery
capitalize pierwsza litera każdego słowa jest duża
none
np.
h1 {text-transform: uppercase;}
kontrola pustej przestrzeni
selektor {white-space: wartość;}
normal spacje są redukowane do jednej
pre
wymusza taką liczbę spacji jaka faktycznie znajduje się w tekście
nowrap każdy wiersz akapitu jest automatycznie łamany przez
przeglądarkę, ta wartość powoduje zablokowanie łamania wierszy
49
Formatowanie wyglądu czcionki
Cechy czcionki
rodzaj
rozmiar
waga
styl
wariant
50
rodzaj czcionki
selektor {font-family: nazwa_czcionki;}
to nazwa własna czcionki np. Arial Times New Roman, itd.
lub
nazwa rodzajowa czcionki np. serif, fantasy, monospace, cursive, fantazy
body {font-family: arial, helvetica, verdana}
body {font-family: serif;}
serif – są proporcjonalne i maja ozdobniki (np. Times New Roman)
sans-serif – są proporcjonalne ale nie maja ozdobników (np. Arial)
monospace – nieproporcjonalne
cursive – są podobne do odręcznego pisma (np. Comic Sans MS)
fantasy – jeszcze inne
body {font-family: arial, helvetica, verdana, sans-serif}
w takiej kolejności czcionki będą wybierane
51
rozmiar czcionki
selektor {font-size: wartość;}
h1 { font-size: 20pt;}
jednostki względne i bezwzględne
inne przykłady
body {font-size: 2pt;} domyślny tekst
.wiekszy {font-size: 40pt;} tekst w bloku, który ma przypisaną klasę .większy
.procenty {font-size: 200%} procent względem tekstu podstawowego
można też używać wielkości
xx-small, x-small, small, medium, large, x-large, xx-large
lub określić względny rozmiar czcionki
larger, smaller
body {font-size: large;}
.większy {font-size: larger;}
lub
.mniejszy {font-size: smaller;}
52
waga czcionki
selektor {font-weight: wartość;}
p { font-weight: bold;}
styl czcionki
grubość czcionki, liczba z przedziału 100 do 900
lub nazw
bold
bolder
lighter
normal
w specyfikacji są dwa rodzaje italic i oblique (tak naprawdę to nie różnią się)
p { font-style: italic;}
p { font-style: oblique;}
wariant czcionki
odpowiada za przekształcenie tekstu w kapitaliki (wielkie litery i pierwsza
litera każdego słowa jest większa niż pozostałe litery)
h1 {font-variant: small-caps;}
53
Formatowanie wyglądu list punktowanych, numerowanych i
definicji
Cechy specyficzne dla list
typ
graficzny punktor
pozycjonowanie względem punktora
54
typ listy
listy punktowane i numerowane różnią się pod względem
punktora (różny kształt, np. kwadrat, koło czy okrąg) i
sposobu numeracji (litery małe lub duże, liczby rzymskie lub arabskie)
selektor {list-style-type: wartość;}
dla listy punktowanej
dla listy numerowanej
none
disc
circle
square
none
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
brak punktora
wypełniony okrąg
okrąg
wypełniony kwadrat
brak punktora
liczby arabskie
małe liczby rzymskie
duże liczby rzymskie
małe litery
duże litery
brak wypunktowania
ul {list-style-type: square;}
ol {list-style-type: upper-alpha;}
55
punktor graficzny
jako własnego punktora możemy użyć obrazka w formacie gif, jpg lub
png
ul {list-style-image: url(”punktor.gif”);}
nazwa własnego obrazka
pozycjonowanie listy względem punktora
mamy możliwość pozycjonowania tekstu względem punktora
selektor {list-style-position: wartość;}
ul , ol
outside
punktor wyraźnie poza listą
inside
punktor schowany w tekście listy
ol {list-style-position: inside;}
ol {list-style-type: circle; font-size: 12px;}
56
Kolor i tło poszczególnych elementów
57
kolor
selektor {color: wartość;}
tak możemy kolorować tylko tekst, np.
h1 {color: red;}
h1 {color: #9999e4;}
tło
tłem może być definicja koloru lub obrazek
można ustawić tło dla każdego elementu wykorzystywanego na stronie,
np. tabeli, komórki akapitu, itd.
selektor {background-color: wartość;}
selektor {background-image: URL(nazwa.gif);}
mały obrazek może być powielany w poziomie i w pionie
58
powielanie tła
selektor {bakground-repeat: wartość;}
no-repeat
repeat-x
repeat-y
repeat
tło nie będzie powielane i wyświetli się tylko raz
tło powielane tylko w poziomie
tło powielane tylko w pionie
tło powielane w pionie i w poziomie
zatrzymywanie tła
tak aby przesuwało się razem z zawartością strony
schemat blokowania tła dla całej strony
body {background-image: url(tlo.jpg);
beckground-attachment: fixed;}
59
pozycjonowanie graficznego tła
względem lewego górnego narożnika
body
{
backgroung-image: url(tlo.gif);
background-repeat: no-repeat;
background-position: wartość;
}
wartość może przybierać formę
center
tło będzie wyśrodkowane
left
tło będzie z lewej strony
right
tlo będzie z prawej strony
top
tło znajdzie się u góry
bottom
tło znajdzie się u dołu
wartości liczbowe podaję oddalenie tła od lewego
górnego narożnika okna przeglądarki
60
body
{
backgroung-image: url(tlo.png);
background-position: right bottom;
}
body
{
background-position: 2cm 2cm;
}
body
{
background-position: right bottom;
}
można łączyć tła będące kolorem lub
obrazkiem
nie można ustawić dwóch obrazków w
tle dla jednego elementu
61
Marginesy i dopełnienia
62
możemy definiować dwa rodzaje odstępów między elementami
margines zewnętrzny
selektor {margin-strona: wartość;}
left
strona lewa
right strona prawa
top
góra
bottom dół
• przyjmuje wartości liczbowe
uzupełnione o jednostki względne lub
bezwzględne
• może przyjmować wartości ujemne
• może mieć inną wartość dla każdego
elementu strony
np. określamy margines całej strony
body {margin-left: 1cm; margin-right: 1cm; margin-top: 2cm;
margin-bottom: 3cm;}
gdy ustawiamy jednakowe marginesy
body {margin: 1cm;}
marginesy różnych elementów się sumują
używaj marginesów do centrowania tabeli na stronie www
table {margin-left: auto; margin-right: auto;}
63
margines wewnętrzny – dopełnienie
selektor {padding-strona: wartość;}
left , right
top , bottom
liczby dodatnie, ujemne
jednostki względne, bezwzględne
h1 {padding-top: 1 cm; padding-bottom: 1 cm;}
zwiększa się tu obramowanie wokół tekstu
gdy ustawiamy jednakowe marginesy wewnętrzne, to
h1 {padding: 1cm;}
marginesy wewnętrzne i zewnętrzne się sumują
64
Obramowanie elementów
65
możemy kontrolować obecność i radzaj obramowaia np. bloku tekstu czy
też tabeli
selektor {border-strona: wartość;}
left , right
top , bottom
określa styl lub grubość
obramowania
np. obramowanie dla akapitu
p {border-left: solid; border-right: solid; border-top: solid; borderbottom: solid;}
p{ border: solid;}
66
styl obraowania
selektor {border-strona: wartość;}
p {border-style: none;}
p {border-style: hidden;}
p {border-style: dotted;}
p {border-style: dashed;}
p {border-style: solid;}
p {border-style: double;}
p {border-style: groove;}
p {border-style: ridge;}
p {border-style: inset;}
p {border-style: outset}
ramka z podwójnej linii sprawiająca
wrażenie wypukłości
67
aby kontrolować wygląd tylko wybranych krawędzi tabeli
border-top-style
border-left-style
border-bottom-style
border-right-style
górna krawędź
lewa krawędź
dolna krawędź
prawa krawędź
np.
h1 {border-top-style: dashed; border-right-style: double;}
szerokość obramowania
selektor {border-width: wartość;}
dla wybranych krawędzi
border-top-width
border-left-width
border-right-width
border-bottom-width
kolor obramowania
border-color
border-top-color
border-left-color
border-right-color
border-bottom-color
68
można podawać za jednym zamachem kilka własności obramowania
(najpierw podajemy rodzaj obramowania, potem jego szerokość, na
końcu kolor
utworzymy tabelę o szarym tle we
p {border: solid 3mm green;}
wszystkich komórkach i z
table {background-color: navy;}
td {background-color: siver;}
granatowymi liniami podziału
znaczniki <thead></thead>, <tbody></tbody> , <tfoot></tfoot>
pozwalają na kontrolowanie nagłówka, ciała i stopki tabeli
69
Pozycjonowanie elementów
70
metody pozycjonowania
static (statyczne) – każdy element na stronie ma nadane pozycjonowanie statyczne
relative (względne) – punktem odniesienia do określenia położenia względnego
elementu jest jego domyślna lokalizacja na stronie. Pozycjonowanie względne jest
powiązane bezpośrednio z konkretnym znacznikiem lub może zostać rozciągnięte za
pomocą <div> </div>
p {position: relative; top: 1cm; left: 1cm;}
absolute (bezwzględne) – polega na określeniu dokładnego położenia elementu
względem lewego górnego narożnika okna przeglądarki o współrzędnych (0,0).
Podajemy pozycję lewego górnego rogu pozycjonowanego elementu
p {position: absolute; left: 80px; top: 80px;}
fixed (ustalone) – podobnie jak bezwzględne ale element, którego dotyczy zawsze
pozostaje w widocznej części okna przeglądarki
71
Określanie pozycji
niezależnie od metody ustawiania elementów na stronie ich pozycja jest
okreslana za pomocą poleceń left, right, top oraz bottom, uzupełnionych
o wartość liczbową lub procentową.
Przykłady
p
div.lewa
{
{
position: relative;
position: fixed;
top: 1cm;
top: 10px;
left: 1cm;
width: 180px;
}
}
72
Wymiarowanie elementów
dla wybranych elementów można zdefiniować wysokość oraz szerokość
służą do tego dwa polecenia: width oraz height
<html>
<head>
p.jeden {position: absolute; left: 10px; top: 1cm; text-align:
justify; border: 1mm solid; width: 250px;}
p.dwa {position:absolute; left: 300px; top: 1cm; text-align:
justify; border: 1mm solid; width: 250px;}
</style>
</head>
<body>
<p class=”jeden”>Przykładowy blok tekstu</p>
<p class=”dwa”>Drugi przykładowy blok tekstu</p>
</body>
</html>
73
Pływanie i tamowanie elementów
pływanie elementów to kontrola sposobu oblewania jednego elementu
przez inny, np. obrazek oblany z jednej strony przez tekst
Do kontrolowania oblewania używamy polecenia float o wartości left,
right lub none
<img src=”obrazek.jpg” style=”float: left;”>
<img src=”obrazek.jpg” style=”float: right;”>
<img src=”obrazek.jpg” style=”float: none;”>
tekstem możemy oblewać nie tylko obrazki ale i inne elementy (np.
zawartość znacznika <div> </div> )
Jeśli nie chcemy aby jakiś element był oblany, to używamy polecenia clear
i wartości left, right, both oraz none
<h1 style=”clear: left;”>
74
Przykład: tabela oblana przez blok tekstu
<html>
<head>
div {width: 400px;}
td {border: solid 1px black;}
table{width: 200px; height: 400px; float: left;}
h1 {clear: left;}
nagłówek h1 będzie
</style>
bezpośrednio pod
</head>
tabelą i nie będzie jej
<body>
oblewał
<div>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td> <td>4</td>
</tr>
</table>
75
<p> Przykładowy blok tekstu oblewającego tabelę. Przykładowy blok tekstu
oblewającego tabelę. Przykładowy blok tekstu oblewającego tabelę.
Przykładowy blok tekstu oblewającego tabelę. Przykładowy blok tekstu
Przykładowy blok tekstu oblewającego tabelę. Przykładowy blok tekstu
Przykładowy blok tekstu oblewającego tabelę. </p>
<h1>Nagłówek H1, który ma znaleźć się pod tabelą <h1>
</body>
</html>
76
Tworzenie arkusza stylów za pomocą edytora kED
edytor daje nam wsparcie:
pozwala na skorzystanie z szablonu gotowego zewnętrznego arkusza, w którym
wprowadzamy tylko niezbędne poprawki
automatycznie zamyka nawiasy { } w których wpisujemy definicje stylów
możemy skorzystać z pomocy i jednym kliknięciem myszy wstawić potrzebną
definicje stylu
Gotowy szablon
z menu Plik
o wybierz Nowy z szablonu
o wybierz Szablon arkusza CSS
kED daje szybki dostęp do listy stylów i umożliwia ich wstawianie do dokumentu
w lewym panelu przejdź do zakładki Ściąga
z listy wybierz opcje Własności i wartości CSS
ustawiamy kursor w miejscu, gdzie ma być wstawiona odpowiednia definicja
stylu,
odszukaj tą definicję na liście po lewej stronie i
77
dwukrotnie kliknąć lewym przyciskiem myszy
Przykład 4
ul {font-weight: bold;}
Selektorem jest ul, cechą - waga czcionki, wartością - pogrubienie.
•punkt pierwszy wykazu
•punkt drugi wykazu
•punkt trzeci wykazu
Przykład 5
h2 {color: #FF0000;}
Selektorem jest h2, cechą - kolor, wartością - kolor czerwony.
Czerwony nagłówek stopnia drugiego
78
Przykład 6
Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie
ze schematem:
Selektor { cecha1: wartość1; cecha2: wartość2; }
Proszę zwrócić uwagę na średnik rozdzielający pary cecha:wartość.
h3 {font-variant: small-caps; font-size: 15pt; color: green; fontfamily: Courier;}
Tytuł stopnia trzeciego, 15-punktowy, zielony, kapitaliki
79
Zagnieżdżanie definicji stylu w nagłówkowej części dokumentu
Należy wpisać odpowiedni blok informacji między poleceniami <head> i
</head>.
Przykład:
<head>
body {margin-left: 1cm; margin-right: 1cm; }
p {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal; }
</style>
</head>
Zdefiniowano tu 1-centymetrowe marginesy strony oraz 10-punktową
czcionkę Arial (oraz inne czcionki "rezerwowe") dla akapitów.
80
Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których
stosuje się unikatowe style. Gdy kilka stron jest formatowanych za
pomocą tego samego zestawu stylów, lepiej jest stosować dołączanie
wspólnego, zewnętrznego arkusza stylów.
81
Obrazek jako tło strony
Jeśli obrazek np. greendot.gif
jest niewielki objętościowo, to zostanie powielony na szerokość i długość
strony.
Sposób powtarzania
Tło elementu może się powtarzać tylko w pionie (repeat-y), tylko w poziomie
(repeat-x), w obu kierunkach (repeat) lub nie powtarzać się w ogóle (norepeat).
body { background: #c0c0c0 url(greendot.gif);
background-repeat: repeat-y }
82
<html>
<head>
body { background: #C0C0C0 url(./greendot.gif);
background-repeat: repeat-y }
</style>
</head>
<body>
</body>
</html>
83
84
Kolor
Aby zdefiniować kolor tekstu, należy wpisać w definicji stylu color:
wartość
<h2 style="color: #FF0000; ">Czerwony tytuł drugiego stopnia</h2>
Czerwony tytuł drugiego stopnia
85
Numerowany wykaz w kolorze niebieskim
<ol style="color: blue; ">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>
1. punkt pierwszy
2. punkt drugi
3. punkt trzeci
86

(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])

Transkrypt

Podobne dokumenty

Kaskadowe arkusze stylów - BK-S

okapi w - Nomad Sport

Tusz Epson T0520 color | Stylus Color 400/440

Kliknij aby pobrać dokument w formacie PDF

Proste menu wyboru linków html-a.

Ćw.2.Arkusze stylów w dokumentach HTML

Trelek.pl DEKUPAŻ I MALOWANIE KWITNĄCY OGRÓD

Product Specifications PDF

budowa strony www w html