Download
1 / 49
500 likes | 674 Vues
CSS. Tworzenie stron WWW. Cz.2 - CSS Ver. 1c. mgr Piotr Kania piotrventuro@wp.pl http://www.piotrkania.ovh.org. CSS. Wstęp do CSS. CSS Kaskadowe arkusze stylów. CSS - Cascading Style Sheets.
E N D
CSS Tworzenie stron WWW Cz.2 - CSS Ver. 1c mgr Piotr Kania piotrventuro@wp.pl http://www.piotrkania.ovh.org
CSS Wstęp do CSS CSS Kaskadowe arkusze stylów CSS - Cascading Style Sheets Za pomocą CSS definiujemy wygląd strony WWW. Powinniśmy rezygnować z opcji HTML-a które służą do określania szczegółowych własności obiektu na rzecz właśnie CSS. Wracając do historii HTML-a miał on właściwie pełnić rolę tylko szkieletu strony. Jednak ewolucję tego języka wywołały firmy wiodące na rynku przeglądarek internetowych. Rozpoczął się wyścig w interpretacji przez ich przeglądarki coraz to nowych znaczników HTML, odpowiadających za formatowanie wizualne strony WWW. Przykład to np. polecenie HTML "marquee", które początkowo interpretowała tylko przeglądarka IE. A miało być inaczej. Znaczniki HTML miały w znikomym stopniu formatować zawartość strony. Współcześnie powracamy do tych założeń i zaleca się formatowanie stron WWW za pomocą CSS. Reasumując - tworząc nowoczesną stronę WWW powinniśmy używać tylko niezbędnych znaczników HTML-a.
CSS Ćwiczenie • Tworzymy dokument „bazę” do wykonywania dalszych ćwiczeń. • Proszę utworzyć dokument html, w sekcji <BODY> umieszczamy kilka znanych znaczników np. <p>, <table>,<b>,<i> itp.. • Nie formatujemy strony poleceniami HTML !!! • Tworzymy pusty dokument style.css, który będziemy uzupełniać poznawanymi definicjami selektorów.
CSS Ogólna budowa stylów Selektor {cecha:wartość} Cecha niekiedy nazywana jest właściwością Selektorem jest znacznik języka HTML, cechą może być np. wielkość czcionki, czy jej kolor, a wartość to konkretna wartość przypisana do cechy. B{color:red}
CSS Ćwiczenie Proszę wymienić, zapisać na tablicy znaczniki HTML, które pamiętacie. Pamiętajmy, że prawie wszystkie mogą być selektorami w CSS ! Które nie mogą być selektorami ??? DLACZEGO ???
CSS Przypisanie kilku cech jednemu selektorowi Selektor {cecha:wartość; cecha:wartość; cecha:wartość} B {color:red; font-family:Verdana; font-size:12pt}
CSS Grupowanie selektorów B {color:navy; font-size:10pt} I {color:navy; font-size:10pt} U {color:navy; font-size:10pt} Aby unknąć zbędnego powtarzania selektorów dla których definiujemy te same cechy i ich wartości stosujemy grupowanie selektorów wg poniższego schematu : selektor1, selektor2, selektor3 {cecha:wartość; cecha:wartość}
CSS Sposoby umieszczania stylów na stronie WWW 1) w zewnętrznym pliku (style zewnętrzne), dostępne globalnie w ramach całego serwisu 2) style globalne (tzw. osadzone) - dostępne w całym dokumencie, zdefiniowane w nagłówku konkretnego dokumentu w sekcji HEAD 3) style lokalne (tzw. wpisane) - dotyczące tylko i wyłącznie jednego elementu przy którym zostały zdefiniowane
CSS Sposoby umieszczania stylów na stronie WWW cd.. 1) w zewnętrznym pliku (style zewnętrzne), dostępne globalnie w ramach całego serwisu Plik taki posiada rozszerzenie css np: styl_strony.css W pliku tym umieszczamy definicje różnych selektorów BODY {margin-top : 20pt; margin-left:20pt} A {color:#FFFFFF} W źródle strony w sekcji HEAD umieszczamy deklarację która dołączy dane z zewnętrznego pliku css do właściwego dokumentu. Składnia tej deklaracji przedstawia się następująco : <link href="sciezka_do_pliku.css" rel="stylesheet" type="text/css">
CSS Sposoby umieszczania stylów na stronie WWW 2) style globalne (tzw. osadzone) - dostępne w całym dokumencie, zdefiniowane w nagłówku konkretnego dokumentu w sekcji HEAD <head><style type="text/css"><!--BODY {margin-top : 20pt; margin-left:20pt} A {color:#FFFFFF} --></style></head>
CSS Sposoby umieszczania stylów na stronie WWW 3) style lokalne (tzw. wpisane) - dotyczące tylko i wyłącznie jednego elementu przy którym zostały zdefiniowane <b style="font-family:Arial; font-size:12pt; text-align : center">
CSS Hierarchia ważności - kaskadowość Nazwa kaskadowe arkusze stylów odzwierciedla ułożenie hierarchii ważności stylów. Dlaczego coś takiego wymyślono ? Jak widzieliśmy powyżej style mogą znajdować się w odrębnym pliku, mogą być zdefiniowane w nagłówku strony, czy też bezpośrednio przy konkretnym elemencie. Zakładamy, czysto teoretycznie, że zdefiniowano w każdym z tych trzech miejsc różne (podkreślam różne) cechy i wartości dla selektora "p". W tym momencie przeglądarka nie będzie wiedziała z którego źródła ma zastosować formatowanie elementu. Aby zapobiec tej sytuacji wymyślono kaskadowe arkusze stylów. "Mówią one" przeglądarce który styl (z kilku) zdefiniowanych ma największy priorytet, a który najmniejszy. Najwyższy priorytet ma styl lokalny zdefiniowany przy konkretnym elemencie. Drugi w hierarchi znajduje się styl zdefiniowany w nagłówku konkretnego dokumentu, a ostatni w kaskadzie priorytetów to styl zewnętrzny. Tak więc przeglądarka analizując dokument w pierwszej kolejności sprawdza czy dla danego elementu został zdefiniowany styl lokalny. Jeżeli nie "zagląda" w nagłówek dokumentu. Jeżeli tam znajdzie określony selektor zastosuje formatowanie dla tego selektora, jeżeli nie ma definicji w nagłówku, analizuje plik zewnętrzny.
CSS Hierarchia ważności – kaskadowość cd.. styl lokalny -> styl zagnieżdżony -> styl zewnętrzny można powiedzieć, że im styl bliżej elementu, który definiuje, tym jest ważniejszy w hierarchii formatowania
CSS Ćwiczenie • Tworzymy plik style.css – w tym pliku wpisujemy: b {color:blue} • Tworzymy dowolny dokument HTML. W sekcji HEAD dodajemy wywołanie naszego zewnętrznego pliku css. • W sekcji HEAD definiujemy style CSS i dodajemy : b {color:yellow} • W sekcji <BODY> dokumentu wstawiamy znacznik <b> po czym wpisujemy dowolny tekst : <b> text </b> • Do znacznika <b> dodajemy styl wpisany : <b style=”color:red ”> • Wywołujemy stronę. Sprawdzamy jaki kolor ma pogrubiony tekst. Następnie usuwamy styl wpisany i sprawdzamy efekt itd…
CSS Ćwiczenie W pliku style.css zapisujemy : B {color:red; font-size:14pt; font-style: italic; background-color:yellow;} W pliku *.html zapisujemy : <B style=" color:navy; font-size:12pt; font-style: italic; background-color:yellow;"> Które właściwości tekstu się zmieniły, a które nie ? DLACZEGO ? Sformatuj znacznki B za pomocą HTML-a – które właściwości są brane pod uwagę CSS, czy HTML ?
CSS Dziedziczenie stylów Poprzez dziedziczenie należy rozumieć hierarchiczne przekazywanie elementom niższym w strukturze drzewa cech od elementów nadrzędnych. Zobaczmy poniższy przykład : body {font-family:Verdana; color:navy}table {font-family:Helvetica} Przy tak zdefiniowanych selektorach j.w. wszystko co znajdzie się pomiędzy BODY będzie miało krój czcionki Verdana o kolorze Navy. Czyli wszystkie znaczniki wew. BODY będą dziedziczyły ten styl ponieważ są niżej w strukturze drzewa np. P, B, I itd. Ale czy faktycznie wszystkie ??? Otóż nie ... tekst, który znajdzie się w TABELI będzie miał inny krój (Helvetica), ponieważ zostało to jawnie zdefiniowane. Ale kolor tekstu dla tabeli w tym przypadku zostanie taki sam, czyli Navy. Jeżeli chcielibyśmy zmienić kolor tekstu tabeli powinniśmy do selektora table dodać cechę "kolor" i określić dla tej cechy konkretną wartość np. "red". Wtedy tekst w tabeli byłby koloru czerwonego. table {font-family:Helvetica; color:red}
CSS Dziedziczenie stylów cd..
CSS Ćwiczenie • Zapisujemy na tablicy znaczniki HTML wg hierarchii np. • <table> • <TR> • <TD>
CSS Ćwiczenie Zastanówmy się jak można zmienić wygląd dwóch akapitów <p></p> zawartych wewnątrz jednego dokumentu HTML … wykorzystując hierarchię stylów CSS … Teraz zobaczmy, jak inaczej można to bardzo prosto zdefiniować …
CSS Klasy selektorów i ich definiowanie W jakim celu stosujemy klasy w CSS??? Klasy stosujemy po to, aby w tym samym dokumencie używać tego samego selektora z przypisanymi innymi wartościami jego cech. Selektor.klasa {cecha:wartość} Table {color:red; font-size:12pt} Table.kolor {color:navy} Warto zauważyć, że klasy danego selektora dziedziczą od niego samego jego cechy ! Tak, więc tekst pogrubiony zdefiniowany klasą „kolor” będzie dziedziczył rozmiar czcionki 12 pt ! Jeżeli chcielibyśmy zmienić wielkość czcionki należałoby zdefiniować w tej klasie inną wielkość.
CSS Klasy selektorów – wywołanie w dokumencie Składnia : <znacznik_html class=„nazwa_klasy"> Przykłady : <Tableclass="dolna"> <B class="maly">
CSS Definiowanie id i wywołanie w dokumencie Składnia definiowania : znacznik_html#id {cecha/y:wartość} Przykład definicji : Table#menu {color:yellow; font-size:14pt} Przykład wywołania : <table id="menu"> identyfikator w działaniu przypomina klasę, ponieważ zmienia wygląd danego selektora lecz UWAGA ! Możemu go wywołać tylko w jednym miejscu ! Wywołania identyfikatora można użyć tylko raz. Najczęściej znajduje on zastosowanie w pozycjonowaniu bloków, tak aby nie nałożyć na siebie dwóch bloków.
CSS Pseudo klasy Selektor:pseudo_klasa {cecha:wartość} Pseudo klasa odpowiada za wygląd elementu strony, który po wykonaniu na nim jakiejś akcji ma przyjąć zdefiniowane przez nie cechy. A:hover {color:red} Więcej na ten temat powiemy przy omawianiu konkretnego przykładu definiowania odnośników (linków).
CSS Pseudo klasy cd.. Style CSS normalnie są dodawane do elementów, na podstawie ich pozycji w drzewie dokumentu. Taki model nie zawsze jednak jest wystarczający. Pseudoklasy klasyfikują elementy inaczej niż po ich nazwie, atrybutach czy zawartości, tzn. w zasadzie nie są ustalane na podstawie drzewa dokumentu. Mogą być dynamiczne w tym sensie, że element "nabywa" lub "traci" pseudoklasę podczas interakcji z użytkownikiem. Przykładem jest podświetlenie elementu po wskazaniu go myszką przez użytkownika. Wszystkie pseudoklasy można podzielić na trzy grupy: Pseudoklasy linków: :link, :visited Pseudoklasy dynamiczne: :active, :hover, :focus Inne: :lang(), :first-child IE interpretuje tylko i wyłącznie pseudoklasy dla odsyłaczy !!! Źródło: http://www.kurshtml.boo.pl/css/co_to_sa_pseudoklasy,pseudoklasy.html
CSS Jednostki miary w CSS źródło : Komputer Świat 1/03 "Kurs HTML" str. 84.
CSS Właściwości czcionki font-family, określa rodzinę czcionki, czcionek, np. Arial, font-style, określa styl czcionki, np. normal, italic, oblique, font-weight, określa wagę (grubość) czcionki, np. normal, bold, bolder, lighter, 100, 200 ... 900, font-size, określa wielkość czcionki, np. xx-small, x-small, small, medium, large, larger, smaller, Xpt, Xpx, Xcm, Xin, font, kumuluje wszystkie powyższe właściwości czcionek, przykład: BODY{font: 12pt sans-serif bolder italic} color, określa kolor czcionki, możemy podawać anglojęzyczną nazwę koloru, lub wartość hex.
CSS Ćwiczenie Formatujemy tekst za pomocą CSS wykorzystując poznane właściwości czcionek.
CSS Właściwości tekstu word-spacing, definiuje odległość między wyrazami, np. normal, Xpt, Xcm, Xpx, letter-spacing, definiuje odległość między literami, np. normal, Xpt, Xcm, Xpx, text-decoration, definiuje podkreślenia tekstu itp., np. normal, overline, underline, line-through, blink, word-spacing, definiuje odległość między wyrazami, np. normal, Xpt, Xcm, Xpx, vertical-align, definiuje położenie tekstu w pionie względem elementu poprzedzającego, np. baseline, sub, super, top, text-top, middle, bottom, procent, text-align, definiuje wyrównanie tekstu, np. left, center, right, justify, text-indent, definiuje odległość od lewego marginesu, np. X%, Xpt, Xcm, Xpx, line-height, definiuje odległość między sąsiednimi liniami, np. normal, X%, Xpt,
CSS Ćwiczenie Formatujemy tekst przy pomocy CSS wykorzystując poznane właściwości tekstu.
CSS Właściwości tła background-color, określa kolor tła elementu, background-image, określa grafikę tworzącą tło definiowanego elementu, np. none (brak grafiki), lub adres URL do grafiki, np. background-image:url(nazwa_pliku.gif)background-repeat, określa czy tło ma się powtarzać (np. obrazek), np. repeat, norepeat, background-attachment, określa przesuwanie się tła wraz z zawartością (scroll), czy ma pozostać w miejscu (fixed), background-position, określa pozycję początkową tła elementu, wyrównanie poziome np. left, center, right, oraz pionowe np. top, center, bottom, background, kumuluje wszystkie powyższe właściwości tła, przykład : BODY {background: yellow url(obrazek_tla.gif) left top no-repeat}
CSS Ćwiczenie Zmieniamy kolor tła wybranych elementów przy pomocy CSS wykorzystując poznane właściwości.
CSS Właściwości el. kwadratowych pozycjonowanie margin-top, określa odległość elementu od górnej krawędzi strony, margin-right, określa odległość elementu od prawej krawędzi strony, margin-left, określa odległość elementu od lewej krawędzi strony, margin-boottom, określa odległość elementu od górnej krawędzi strony, margin-top, określa odległość elementu od górnej krawędzi strony, margin, kumuluje wszystkie właściwości położenia wg schematu: górna, prawa, dolna, lewa, np. TABLE {margin: 10,10,10,10} - zazwyczaj podajemy tylko 2 pierwsze,
CSS Właściwości el. kwadratowych cd .. pozycjonowanie padding-top, określa górny odstęp właściwego elementu od poprzedzającego go elementu, padding-right, określa prawy odstęp właściwego elementu od innego elementu, padding-boottom, określa dolny odstęp właściwego elementu od następnego elementu, padding-left, określa lewy odstęp właściwego elementu od innego elementu, padding, kumuluje wszystkie właściwości odstępu wg schematu: góra, prawa, dół, lewa,
CSS Właściwości el. kwadratowych cd .. obramowanie border-width, kumuluje wszystkie właściwości szerokości ramki elementu definiujemy wg schematu: górna, prawa, dolna, lewa, przyjmuje wartości: thin, medium, thick, Xpt, Xcm, Xpx. Można oczywiście zrezygnować z definiowania skróconego i zdefiniować karzdą właściwość z osobna jako: border-top-width, border-right-width, border-boottom-width, oraz border-left-width, border-color, określa kolor ramki elementu, definiujemy jako nazwę anglojęzyczną, lub wartość hex, border-style, określa styl ramki elementu, np. none, dotted, dashed, solid, double, groove, ridge, inset, outset, border-top, określa właściwości górnej ramki elementu, schemat defininiowania: border-top-width, border-top-style, border-top-color. Tak jak dla górnej krawędzi ramki możemy definiować dla pozostałych krawędzi oddzielne, specyficzne właściwości. Korzystamy z przedstawionego schematu zamieniając wyrażenie top odpowienio na : right, boottom, czy left. border, kumuluje właściwości ramki elementu, określa szerokość, kolor i styl ramki elementu, wg kolejności: górna, prawa, dolna, lewa.
CSS Właściwości el. kwadratowych cd .. sposób wyświetlania, oraz rozmiar elementu display, określa sposób prezentacji elementu, np. block, inline, list-item, none, width, określa szerokość elementu, np. auto, X%, Xpt, Xcm, Xpx, height, określa wysokość elementu, np. auto, Xpt, Xcm, Xpx,
CSS Ćwiczenie Definiujemy wygląd elementów blokowych za pomocą poznanych właściwości elementów kwadratowych. Definiujemy właściwości dla tabeli, grafiki itp...
CSS Zmiana wyglądu kursora Schemat definiowania przedstawia się następująco:cursor: własność
CSS Zmiana wyglądu kursora cd.. Wybrane własności:
CSS Ćwiczenie Definiujemy wygląd kursora dla wybranych elementów naszej strony WWW.
CSS Właściwości list punktowanych list-style-type, określa typ listy, mamy do wyboru: disc, circle, square, decimal, lower-roman, uper-roman, lower-alpha, upper-alpha, none, list-style-image, określa elemen graficzny, który będzie punktem listy, podajemy adres url, lub none, np. list-style-image:url(rys.png), list-style-position, inside, outside,
CSS Ćwiczenie Określamy wygląd list punktowanych na naszej stronie WWW za pomocą poznanych właściwości.
CSS Właściwości linków – pseudo klasy Wygląd ogólny linku, przed podjęciem akcji: a:link { cecha: wartość } Wygląd linku wcześniej odwiedzonego (historia przeglądarki) a:visited { cecha: wartość } Wygląd linku po najechaniu kursora myszki: a:hover { cecha: wartość } Wygląd po kliknięciu na link (trudno zauważalny ... ponieważ po zwolnieniu przycisku myszy ten stan się zmienia. Jedyne wyjście, aby zobaczyć efekt to przytrzymanie klawisza myszy nieco dłużej po kliknięciu na linku): a:active { cecha: wartość } Powyższe pseudoklasy zadziałają jeżeli użyjemy klawiszy myszy. Jeżeli chcemy zmieniać wygląd linku po najechaniu na niego klawiszem TAB użyjemy pseudoklasy a:focus. UWAGA !!! IE nie obsługuje tej pseudoklas focus !
CSS Właściwości linków – pseudo klasy Przykład definiowania : <style type="text/css"> a{ color: black; text-decoration: none; } a:hover{color: silver; text-decoration: underline; background: blue;} </style>
CSS Ćwiczenie Określamy wygląd linków na naszej stronie WWW za pomocą pseudo klas.
CSS Ćwiczenie Tworzymy MENU naszego serwisu za pomocą poznanych właściwości CSS. Po najechaniu na element MENU zmienia się kolor tła, oraz czcionki itd..
CSS Określanie wyglądu wybranej części strony - warstwy SPAN i DIV używa się dziś już bardzo często. Są to dla tagi, które prawie nie mają własnych właściwości. Znacznik DIV jest często używany przy tworzeniu stron opartych o warstwy. Znacznik SPAN właściwie nie posiada własnych właściwości [np. <b> pogrubia]. Aktualnie stosuje się go zamiast <font>, a także w innych przypadkach, gdy chcemy określić jakiś fragment strony. DIV stosuje się do większych części witryny. Przykład: <spanstyle="color: red;background-color: yellow;"></span> Gdyby to był div zająłby 100% szerokości i nie "zmieściłby" się w akapicie. Zostałby jakby wypchniety. A to dlatego, że jest nadrzędnym tagiem dla P - to akapit powinien być na warstwie, nie warstwa na akapicie. Źródło: http://webmade.org/kursy/kurs_css/span.php
CSS Ćwiczenie Użyj na własnej stronie znacznik <span>, lub <div> . Zdefiniuj wygląd fragmentów strony zawartych w tych znacznikach za pomocą CSS.
CSS Kolory pasków przewijania Ogólny schemat definiowania kolorów pasków przewijania wygląda następująco:scrollbar-właściwość-color: kolor Możemy definiwać następujące własności: UWAGA ! Suwaki to rozszerzenie niestandardowe (brak w specyfikacji stylów). Działają jedynie w obecności deklaracji DOCTYPE Transitional, lub w ogóle. Odradza się stosowania…
CSS Ćwiczenie Definiujemy formularze na własnej stronie WWW. Definiujemy wygląd poszczególnych elementów za pomocą css.
