Download
1 / 17
170 likes | 343 Views
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.
E N D
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 Definicje 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> Użycie 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 • 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 Padding 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/
