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