Transcript HTML cz.5
Arkusze stylu
Podstawy
CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) jest
językiem służącym do opisu sposobu prezentowania informacji na
stronach WWW, który został opracowany przez organizację W3C.
Arkusz CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób
ma być renderowany przez przeglądarkę tekst znajdujący się
wewnątrz danego elementu HTML/XHTML/XML. Ustalać można
w ten sposób wszystkie właściwości odpowiedzialne za wygląd
elementów HTML, takie jak rodzaj czcionki tekstu, kolor,
marginesy, odstęp międzywierszowy itp., a nawet pozycję danego
elementu względem innych elementów lub całej strony.
Ogólnie można powiedzieć że arkusze stylu służą ujednoliceniu
wyglądu tworzonych witryn oraz ułatwieniu pracy webmastera.
Podstawy
Rozwój języka HTML oraz potrzeba coraz bogatszego
w grafikę oraz inne efekty przedstawiania treści stron
internetowych spowodował powstawanie różnych
znaczników. Każda spośród znaczących przeglądarek IE,
Netscape, Opera, Mozilla itp. Zaczęła wprowadzać swoje
własne znaczniki celem wzbogacenia możliwości
webmastera. Spowodowało to niekompatybilność różnych
systemów jak i wynikające z tego różnego rodzaju
problemy.
Rozwiązanie tego problemu przyniósł standard
HTML4.01 gdzie dużą część parametrów znaczników jak i
samych znaczników zstąpiono stylami zewnętrznie
definiującymi (niezależnie od samego HTML) sposób
wyglądu strony.
Podstawy
Style pozwalają na modyfikację parametrów takich jak
położenie, kolor czcionki i tła, krój czcionki, podkreślenie
czcionki, obramowanie, itp. Celem ułatwienia procesem
zarządzania stylami wprowadzono w nich znane z
podstaw programowani klasy oraz pojęcie dziedziczenia.
Dowolny styl może być przypisany takim znacznikom jak
a, p, table, body, h1, …,h5, tr, td, itp.
Najprostszą metodą użycia stylu jest:
<p style=”color:red; font-size:8 pt”>
Czyli nazwa znacznika, parametr style= oraz w
cudzysłowach definicja stylu
Przykład wykorzystania styli
<html>
<head>
</head>
<body>
Oto wyniki:
<p style="color:red; text-decoration:overline">To jest tekst
pierwszy</p>
<p style="color:blue; text-decoration:underline">To jest tekst
drugi</p>
</body>
</html>
Podstawy
Taka konwencja powoduje jednak, że w każdym kolejnym
paragrafie będziemy musieli całą definicję stylu powtórzyć.
Dlatego też całą grupę styli wraz z różnymi klasami
można zdefiniować w nagłówku strony.
Klasy stylu to podstyle do których odwołujemy się
poprzez nazwy. Innymi słowy można powiedzieć że klasa
stylu to jego nazwa.
Przykład:
Przykład – wykorzystanie klas
Użycie
klasy
<html>
<head>
<title>Tytuł strony</title>
<style type="text/css">
p.klasa1 {color:red; text-decoration:overline;}
p.klasa2 {color:blue; text-decoration:underline;}
</style>
</head>
<body>
Oto wyniki:
<p class="klasa1">To jest tekst określony klasą
pierwszą</p>
<p class="klasa2">To jest tekst określony klasą drugą</p>
</body>
</html>
Definicje
klasy
Podstawy
Najczęściej stosowaną metodą tworzeniaa styli jest osobny
plik zwierający definicje wszystkich używanych styli i ich
klas.
Taka konwencja pozwala na zminimalizowanie pracy
projektanta strony, gdyż style definiowane są tylko raz dla
całej witryny. Powoduje to również przyspieszenie
wczytywania kolejnych stron, gdyż raz pobrany plik
arkuszy styli jest pamiętany przez przeglądarkę, tym
samym raz wczytana definicja styli używana jest
wielokrotnie przez różne strony tej samej witryny.
Przykład zewnętrznego pliku styli
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" // 1
href="plikstyli.css" // 2
type="text/css" /> // 3
</head>
<body>
W tym miejscu umieszczasz treść strony. Możesz skorzystać
ze wszystkich klas opisanych w pliku 'plikstyli.css'.
</body>
</html>
Gdzie:
1 - każę przeglądarce nastawić się na to, że za chwilę będzie wczytywać plik css
[stylesheet].
2 - Podaję ściężkę do pliku, w którym są opisane style. Powinien to być plik o
rozszerzeniu *.css.
3 - Określamy typ.
Pseudoklasy
Czasemi istnieje potrzeba, aby jakiś element strony reagował na zachowanie użytkownika,
lub był inny w zależności od swojego umiejscowienia itp. Za idealny przykład mogą tu
posłużyć linki - po najechaniu, kliknięciu, odwiedzeniu, zmieniają swój wygląd. Do tego
służą właśnie pseudoklasy. Trzymajmy się dalej naszego przykładu linków. Odnośniki mają
kilka właściwości, które mogą być opisywane jako osobne znaczniki i wywoływane
stosownie do akcji wywołanej przez internautę.
Psełdoklasy definiowane są jako selektor : psełdoklasa {właściwość : wartość;…} lub
selektor.nazwaklasy:pseudoklasa {właściwość : wartość;}
Przykład:
A:active {color : blue;} // 1
A:link {color : black;} // 2
A:visited {color : green;} // 3
A:hover {color : red; text-decoration : underline;} // 4
Opis:
1 - : active oznacza link odwiedzany (aktywny, czyli strona aktualnie jest wczytana)
2 - : link oznacza link nieaktywny, czyli czekający na kliknięcie
3 - : visited oznacza link odwiedzony. Uwaga! w pamięci niektórych przeglądarek może
zostać wiadomość o odwiedzeniu jakieś strony i wtedy zawsze, nawet przy starcie link
będzie uznany za 'visited'.
4 - : hover link gotowy do kliknięcia - kursor nad napisem (chyba najczęściej używany)
Parametry
margin: 10px 10px 0 10px; oznacza odległość od obramowania (text także może je
mieć!) na zewnątrz.
padding: 2px 20px 2px 0; określa odległość od obramowania do wewnątrza;
kolejność parametrów: góta, prawa, dół, lewa
font-size: X; - określam rozmiar czcionki Najczęściej podaje się w pixelach[px] lub
punktach[pt]
font-weight: nazwa; określam jakiej "wagi" ma być text, możliwości: normal, bold,
bolder, lighter;
text-align: nazwa; wyrównanie textu, left, right, center
font-family: krój1, krój2, krój3; krój czcionki
background-color:#B1BBBE; tło tekstu
Padding
border-left: 1px solid white; - ramka wokół
akapitu: grubość, typ, kolor
border-right: 1px solid white;
border-bottom: 1px solid white;
border-top: 1px solid white;
Kolejność opcji dla pól margin i padding:
góra, prawa, dół, lewa
Margin
Typy obramowań:
żadne, zapis: border: 1px none white,
kropkowane, zapis: border: 1px dotted white,
kreskowane, zapis: border: 1px dashed white,
normalnie, zapis: border: 1px solid white,
podwójna ciągła, zapis: border: 1px double white,
cieniowane, zapis: border: 1px groove white,
odwrotnie cieniowane, zapis: border: 1px ridge white,
cieniowane, zapis: border: 1px inset white,
odwr. cieniowane, zapis: border: 1px outset white;
Dziedziczenie
Dziedziczenie styli polega na przejmowaniu właściwości
danej klasy po klasie nadrzędnej np.:
p {color: blue;} // 1
p.klasa1 {font-size:8 pt;} // 2
p.klasa2 {color:red; font-size:8 pt;} // 3
Opis
1 – definiujemy kolor w klasie macierzystej
2 – klasa1 dziedziczy po klasie p jej kolor
3 – tekst napisany w p.klasa2 będzie czerwony ponieważ
pokryliśmy pole koloru z klasy nadrzędnej
Identyfikatory „ID”
Identyfikatory używane są równoważnie z
klasami jedynie zamiast sumbolu (.) definiujemy
je jako (#nazwa), w pewnym sensie są więc one
równoważnikami klas.
Kiedy stosować Klasy a kiedy Identyfikatory
Identyfikatory stosujemy gdy dany obiekt
występuje tylko raz na stronie, np.. Boczne
menu, zaś klasy stosujemy dla obiektów
powtarzających się wielokrotnie na stronie
display
None : Element nie będzie wyświetlony
Block : Element zostanie wyświetlony jako poziomy blok z
linijką przerwy przed i po elemencie
Inline : Element zostanie wyświetlony jako poziomy blok bez
przerw przed i po elemencie
list-item : Element zostanie wyświetlony jako element listy
run-in : Element zostanie wyświetlony jako Block lub Inline w
zależności od kontekstu
Table : Element zostanie wyświetlony jako tabela z linijką
przerwy przed i po tabelce
inline-table : Element zostanie wyświetlony jako tabela bez linijki
przerwy przed i po tabelce
HTML - iframe
Iframe to ramka pływająca – ramka osadzana pozwalająca
na wyświetlenie pewnej strony wewnątrz innej
Składnia <iframe name=„” width=„” height” src=„”
style=„”> </iframe>
Name – nazwa ramki
Width – szerokość ramki
Height – wysokość ramki
Src – strona źródłowa wyświetlana jako pierwsza w ramce
style – domyślny styl przypisany do strony w ramce
Przykład galerii z wykorzytsaniem plików css i polecenia
iframe dostępny jest tutaj
Na podstawie:
http://webmade.org/kursy/kurs_css/
http://www.w3schools.com/css/
http://www.tizag.com/cssT/