CSS - style kaskadowe. Cascadind Style Sheets

Transkrypt

1 CSS - style kaskadowe Cascadind Style Sheets

2 Znaczenie CSS Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu strony. Możemy zdefiniować np. odpowiednie czcionki dla danych elementów oraz zachowywanie się odnośników na działanie kursora myszy. Elementy te możemy wykorzystywać wielokrotnie do różnych dokumentów jako szablon a także zapisać w jednym pliku zewnętrznym który będzie mógł być wykorzystywany przez wszystkie dokumenty danego serwisu.

3 Style CSS możemy umieszczać na trzy sposoby: 1. Przez zamieszczenie w kodzie html, w sekcji <head> odnośnika do odrębnego plik (arkusza stylów) <LINK REL=STYLESHEET TYPE="text/css" HREF="plik.css"> 2. Wpis w kodzie html w sekcji <HEAD> tagu w którym określamy cechy strony, w której kod umieszczamy: <style type="text/css">  </style> 3. Określenie stylu w kodzie html <p style="font-variant: small-caps; font-size: 10pt; font-weight: bold; color: red; font-family: Verdana">styl strony</p>

4 Lub inne określenie: wpisane <P Style="font-family: Arial; font-size: 16pt; color:red; text-align:center"> Tekst opisany stylami</p> Osadzone Zewnętrzne

5 Stylami osadzonymi nazywamy arkusz stylów, który jest osadzony w sekcji <HEAD> dokumentu HTML. Przykładowy dokument wykorzystujący style osadzone może wyglądać np. tak: <HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> </BODY> </HTML> Najpierw deklarując type="text/css" definiujemy osadzony arkusz stylów. W przykładzie zostały zdefiniowane atrybuty dla BODY i <P>każdy tekst objęty tymi znacznikami będzie miał wielkość czcionki 14pt, oraz kolor żółty. Zastosowano schemat: obiekt { właściwość1 : wartość1; właściwość2 : wartość2;

6 Style zewnętrzne umieszczone są poza dokumentem HTML w pliku *.css. Przykładowy plik zapisany np. w Notatniku pod nazwą styl1.css (umieszczony serwisie) BODY { margin-top: 20pt; margin-left: 20pt; } A:HOVER { color: #990000; } A:LINK { color: #FFFF00; } margines lewy i górny na 20p oraz rollower odnośników: link nie odwiedzany będzie miał kolor bordowy zaś po najechaniu na niego myszką zmieni kolor na żółty Deklaracja stylu na stronie: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html> <head> <meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <meta name="description" <meta NAME="language" CONTENT="pl"> <link HREF="styl1.css" REL="STYLESHEET"> <title>moja strona</title>

7 Definicja stylu rozpoczyna się od selektora wzorca. Po selektorze następuje blok deklaracji. Jest on zawarty pomiędzy nawiasami klamrowymi: {...}. Blok deklaracji składa się z pooddzielanych średnikiem par: atrybut: wartość Np. h1 { margin-left: -8%;} h1 jest selektorem. body { color: black; background: #AAFFFF; margin-left: 10%; margin-right: 10%; } selektorem jest body. Selektor może się również składać z kilku znaczników oddzielonych przecinkami: h2,h3,h4,h5,h6 { margin-left: -4%; } Selektorem szczególnym jest *. Definicja * { font-family: Verdana, sans-serif; font-size: 16pt; } zmieni czcionkę wszystkich znaczników.

8 Ogólna forma zapisu stylu dla danego elementu strony : elementa,elementb, { własność1: wartość ; własność2: wartość ; } Na początku wypisujemy element lub elementy który ma mieć określony przez nas styl następnie w nawiasie klamrowym podajemy własności i ich wartości np. H1,H2,H3,H4,H5 {font-weight: bold; color: green; font-family: Arial;}

9 Style kontekstowe Jeśli chcemy, aby np. wszystkie elementy P pisane z podktesleniem miały inny kolor, to używamy stylów kontekstowych. p u { color : blue };

10 Style linków Używamy CSS do tworzenia schematu dla wyglądu linków. a:link - wygląd linku a: hover - wygląd po najechaniu kursora myszki a:visited - link który był już odwiedzony a:active - aktywny link np. a:hover { FONT-SIZE: 15px; BACKGROUND: red; COLOR: #363636; FONT- FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline } lub A:hover {text decoration:bold; color:#cc3434;} A:link {text-decoration:underline; color:blue;}

11 Jeśli dokument zawiera kilka różnych rodzajów akapitów wówczas definiujemy klasę znacznika. Np. P { text-align: justify;} P.inny { text-align: right;} Zapis w kodzie strony: <P>... tutaj tekst zwykłego akapitu... </P> <P class="inny">... tutaj tekst innego akapitu... </P> Selektor p.inny to selektor klasy. Możemy go również wykorzystać w bloku div <div class="inny">... tutaj tekst innego akapitu... </div>

12 Jednostki długości H5 { margin: 0.5em } /* w proporcji do wysokości czcionki danego elementu */ H5 { margin: 1ex } /* w proporcji do wysokości litery x */ P { font-size: 10px } /* piksele na ekranie */ jednostki absolutne: H1 { margin: 0.5in } /* cale, 1in = 2.54cm */ H2 { line-height: 3cm } /* centymetry */ H3 { word-spacing: 4mm } /* milimetry */ H4 { font-size: 12pt } /* punkty, 1pt = 1/72 cala */ H4 { font-size: 1pc } /* pica, 1pc = 12 punktów */

13 Tekst text-align: - wyrównuje tekst względem marginesów. Wartości: left, center, right, justify (wyrównuje tekst do obu marginesów). text-decoration: - 'dekoruje' tekst. Wartości: underline, overline, line-through, none - odpowiednio podkreśla, linia ponad tekstem, przekreśla, likwiduje wcześniejsze wartości. line-height: - określa wysokość linii (odstęp między dolnymi krawędziami liter w wierszach). Wartości: liczba, mnożona przez wysokość czcionki (np. 1.4); dowolna inna jednostka długości; wartość procentowa; normal nakazuje zastosowanie wartości domyślnej. vertical-align: - określa pozycję elementów wpisanych względem reszty tekstu. Może być użyta telko do takich elementów. Wartości: baseline; tekst umieszczany na linii bazowej; bottom; podstawa elementu na wysokości podstawy elementu rodzicielskiego; middle; środek elementu na wysokości środka elementu rodzicielskiego; sub; tekst poniżej linii bazowej (subscript); tylko IE; super; tekst powyżej linii bazowej (superscript); tylko IE; text-top; najwyższy punkt na wysokości najwyższego punktu czcionki elementu rodzicielskiego; text-bottom; najniższy punkt na wysokości najniższego punktu czcionki elementu rodzicielskiego; top; najwyższy punkt elementu na wysokości najwyższego elementu rodzicielskiego; wartość procentowa text-indent: - wcięcie akapitu na określoną głębokość. Może być przydatne do rozpoczynania akapitu zamiast stosowania seri niełamliwych spacji. Dopuszczalne jednostki długości i wartości procentowe. text-transform: - zastępuje (konwertuje) wielkość liter występujących w pliku tekstowym literami określonymi przy pomocy wartości. Wartości: capitalize; - pierwszy znak wielką literą; uppercase; - wszystkie znaki wielkimi literami; lowercase; - wszystkie znaki małymi literami: none; - pozostawia litery niezmienione (zastępuje ustawienia odziedziczoną)

14 letter-spacing: - ustala odstępy między literami. Dopuszczalne wszelkie jednostki długości. Przykład: <P STYLE="letter-spacing: 8px" >odstępy między literami wynoszą 10pt</P> odstępy między literami wynoszą 8px float: - jak zawijać jeden tekst wokół drugiego (np. jeden akapit opływa drugi). Wartości: right; - tekst pierwszego akapitu umieszczony z prawej strony, opływany przez tekst drugiego akapitu - przykład 1 (otwiera nowe okno, ok. 5kb) left; - tekst pierwszego akapitu umieszczony z lewej strony, opływany przez tekst drugiego akapitu - przykład 1 (otwiera nowe okno, ok. 5kb) none; - zachowuje wartość odziedziczoną. clear: - stosuje się by zmusić przeglądarkę do wyświetlenia danego elementu poniżej innego elementu zamiast opływania (float). Wartości left, right, both, none ustalają położenie początku ruchomego wiersza za ruchomym obiektem. list-style-type: - określa znaczek (albo literę/cyfrę) stosowany do oznaczania kolejnych elementów listy. Może być użyty tylko w obrębie znacznika <LI>. Wartości (nie wszystkie mogą być wyświetlone zgodnie ze swoją nazwą): disc, circle, square - listy nieuporządkowane; decimal; czyli ciąg 1, 2, 3,... decimal-leading-zero; wstawia wiodące zera : 01, 02, 03,..., 58, 59. lower-roman;, upper-roman; liczby rzymskie (małe: i,ii,iii; duże: I,II,III) lower-latin; albo lower-alpha; małe litery alfabetu łacińskiego a, b, c, upper-latin; albo upper-alpha; duże litery alfabetu łacińskiego A, B, C,

15 Czcionki font-family: - określa grupę czcionek, przy użyciu których należy wyświetlić tekst. Dopuszczalne są 'rodziny ogólne' czcionek, lub ich nazwy własne np.:verdana, Arial, "Vera Humana 95", sans-serif;. Elementy listy czcionek oddzielamy przecinkami, a nazwy wielowyrazowe ujmujemy w cudzysłowy. Przeglądarka wyświetla tekst pierwszą znalezioną czcionką, dlatego warto chwilę pomyśleć, która czcionka może wystąpić u użytkownika i projektować stronę używając właśnie tej czcionki. font-size: - wysokość czcionki. Najpopularniejszą jednostką wysokości jest punkt (pt); dopuszczalne są inne jednostki względne i bezwzględne. Ponadto można stosować następujące wartości względne (bo przeglądarki różnie interpretują):xx-small, x-small, small, medium, large, x-large, xx-large oraz larger i smaller - odpowiednio zwiększają lub zmniejszają wyświetlany tekst (który ma odziedziczoną wysokość np. chcemy dodatkowo powiększyć w stosunku do całego akapitu pogrubiony element. Przykład: <P>akapit pisany czcionką odpowiednią dla akapitu, a teraz <B STYLE="font-size: larger;" >uwaga!</b></p> akapit pisany czcionką odpowiednią dla akapitu, a teraz uwaga! font-style: - określa styl czcionki. Wartości: italic, oblique, normal. Efekt wartości italic i oblique jest podobny. Różnica polega na tym, że italic korzysta z czcionki pochyłej (zwykle każdy styl czcionki - pogrubienie, pochylenie itp. - jest zapisane w oddzielnym pliku na dysku, np. Arial.ttf to czcionka prosta, Arialbd.ttf to czcionka pogrubiona, Ariali.ttf to czcionka pochyła), natomiast oblique pochyla czcionkę prostą. normal nakazuje zastosowanie wartości domyślnej. oblique nie działa w NN. Czcionka pochyła jest mniejsza od pochylonej. font-weight: - określa stopień pogrubienia tekstu. Wartości: bold, co 100, bolder, lighter. normal nakazuje zastosowanie wartości domyślnej. Stosowanie wartości liczbowych wymaga przetestowania. Zwykle można wyodrębnić 3 wagi: najmniejsze pogrubienie; średnie; 600 i więcej - największe pogrubienie. Nie należy przesadzać z pogrubianiem tekstu - zgadnij co będzie wyróżnione, jeśli wszystko będzie pogrubione. color: - definiuje kolor tekstu. Dopuszczalne są kody kolorów lub nazwy własne.

16 Przykłady styli CSS:  <style>  </style>  <style type="text/css">  </style> <style type="text/css">  </style>

17 Import zewnętrznego arkusza stylów Każdą stronę można opisać za pomocą importowanego arkusza stylów. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD: <style> url("adres arkusza"); --> </style> Np. <style> url(" --> </style> Można podać adres względny, jak i bezwzględny. Np. <style> url(" --> </style>