Style CSS
Rodzaje arkuszy stylów Wpisany – definicja umieszczona jest w konkretnym elemencie HTML Osadzony – definicja umieszczona jest w obrębie elementu <head> </head> Zewnętrzny (łączony) – definicja jest pobierana z pliku zewnętrznego Wszystkie typy arkuszy CSS można stosować jednocześnie
Hierarhia stylów Styl wpisany Osadzony arkusz stylów Zewnętrzny arkusz stylów Domyślne ustawienia przeglądarki
Ogólna postać CSS Zależy ona od typu arkusza ! STYL WPISANY <znacznik style=‘właściwość: wartość;’
Ogólna postać CSS STYL OSADZONY <style type=‘text/css’> <!-- selektor {właściwość: wartość;} --> </style> Selektor – znacznik, który jest definiowany Właściwość – atrybut (zmienny, w zależności od podanej wartości)
Przykład body {color:black} Jeśli wartość ma postać wielowyrazową, należy umieścić ją w cudzysłowie, np.: p {font-family: ‘sans serif’}
Przykład 2 style type=‘text/css’> <!-- body {font-family: Verdana, Arial, Helvetica;} --> </style> Uwaga: powyższy styl czcionki zostanie zastosowany do tekstu w sekcji <body>, w tym również do znaczników <p> i <div>, lecz tekst umieszczony w tabeli wymaga odrębnej definicji stylów
Określenie kilku właściwości w jednej definicji stylów p { text-align: center; color: black; font-family: arial }
Przypisanie jednej właściwości kilku elementom (selektorom) – grupowanie selektorów Przykład: przypisanie wszystkim poziomom nagłówka koloru czerwonego: h1, h2, h3, h4, h5, h6 { color: red }
Klasy stylu – atrybut „class” Klasy pozwalają zdefiniować różne style dla jednego elementu Postać ogólna klasy stylu: … element.nazwa_klasy {właściwość: wartość}
Przykład Zastosowanie 2 różnych metod wyrównania tekstu akapitowego (do środka i do prawej) p.prawy {text-align: right} p.center {text-align: center} … <p class=‘prawy’> tekst </p> <p class=‘center’> tekst </p>
Klasy Nazwy klas mogą być dowolne, lecz nie należy używać w nich polskich liter Nazwę selektora w klasie można pominąć: .nazwa_klasy {właściwość: wartość} Tak zdefiniowany styl można zastosować do wielu elementów
Przykład … .prawy {text-align: right} <h1 class="prawy"> nagłówek wyrównany do prawego marginesu. </h1> <p class="prawy"> akapit wyrównany do prawego marginesu. </p>
Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzw Narzucanie stylu pojedynczym wystąpieniom danego elementu (tzw. wyjątki) – atrybut „id”. #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } … <p id=‘wstep’> Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id
Metody definiowania atrybutu „id” Atrybut id można zdefiniować na dwa sposoby: 1. Styl stosowany jest do dowolnego elementu o określonym id 2. Styl jest stosowany do określonego elementu o danym id. Przykład 1 #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
Przykład 2 p#wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } W obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #.
Komentarze CSS /* komentarz CSS */ p { text-align: right; color: green; font-family: arial }
Style CSS: przykłady
Styl wpisany … <h1 style="font-size: 20pt; font-weight: bold; font-family: arial, ‘sans-serif’>Treść tytułu</h1>
Przykład <html> <head> <title>Styl wpisany</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </head> <body> <p style="font-size: 16pt" id="p16"> Styl zastosowany w obrębie znacznika p.</p> <p>W tym akapicie nie zastosowano stylu.</p> <p style="font-size: 25pt" id="p25"> Styl zastosowano w obrębie znacznika p.</p> </p> <p> Zawartość tego znacznika p nie jest formatowana. </body> </html>
Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu
Osadzony arkusz stylów <head> <style type="text/css"> <--! hr {color: red} p {margin-left: 20px} body {background-image: url("images/kot.gif")} --> </style> </head>
Przykład 2 <html> <head> <title>Osadzony arkusz stylów</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> <!-- body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} --> </style> </head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> </body> </html>
Przykład 2
Przykład 3 <html> <head> <title>Osadzony arkusz stylów</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> <!-- body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} #wyjatek {color: #FF0000; background: #FFFFFF} --> </style> </head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p id="wyjatek">Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. </body> </html>
Przykład 3 <html> <head> <title>Osadzony arkusz stylów</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> <!-- body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} #wyjatek {color: #FF0000; background: #FFFFFF} --> </style> </head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p id="wyjatek">Ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. </body> </html>
Przykład 3
Dołączanie zewnętrznego arkusza stylów <html> <head> <link rel="stylesheet" type="text/css" href="mojestyle.css"> </head> <body></body> </html>
Rozciąganie stylu - element „span” Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu – na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span: <span style=”definicja_stylu”> </span>
Przykład <h2>Ten nagłówek ma takie samo <span style="font-variant: small-caps; color:blue; text-decoration: underline">formatowanie </span> jak poprzedni</h2>
Przykład
Stosowanie klas z elementem span Przykład: pierwszy wyraz wszystkich akapitów na stronie jest pisany czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. <head><style type="text/css"> <!-- body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} .lewa {text-align: left} .prawa {text-align: right} .kolorowa {font-size: 24pt; color: #FFFFFF} --> </style></head> <body> <h2>Czerwony nagłówek na białym tle</h2> <p class="lewa"> <span class="kolorowa">Tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p>
Wydzielone bloki - element div Bloki wydzielamy za pomocą pary znaczników <div> </div>. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Metoda jest podobna do poprzedniej, lecz w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.
<html><head><title>Element div</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> <!-- body {background: #3366FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} .lewa {text-align: left} .prawa {text-align: right} --></style></head> <body> <h2>Czerwony nagłówek na białym tle</h2><p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.</p> <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. <div style="font-size:11pt; color: #000000"> Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.</div> </p><h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2><p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.</p><p class="prawa">Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.</p> </body></html>
Przykłady stylów CSS dla tła strony WWW <html> <head> <title>Kolor tła elementu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} </style> </head> <body> <h1>Nagłówek na zielonym tle</h1> <h2>Nagłówek na transparentnym tle</h2> <p class="magenta">Tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta.</p> <p>Ten akapit ma żółte tło, bo tak stanowi styl elementu body.</p> </body> </html>
Przykłady stylów CSS dla tła strony WWW
Obraz jako tło <html> <head> <title>Obraz jako tło strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/obraz.jpg") } </style> </head> <body> <p>Tu umieszczasz resztę zawartości swojej strony!</p> </body> </html>
Obraz jako tło <html> <head> <title>Obraz jako tło strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/obraz.jpg") } </style> </head> <body> <p>Tu umieszczasz resztę zawartości swojej strony!</p> </body> </html>
Obraz jako tło
Powtórzenia obrazu w pionie (kafelkowanie) <html> <head> <title>Budowanie tła z powtórzeń obrazu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: repeat-y } </head> <body> </body> </html>
Powtórzenia obrazu w pionie (kafelkowanie)
Obraz jako tło w skali 1:1 umieszczony na środku strony <html><head><title>Mały obraz w centrum strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center } </style> </head> <body> <p><b>Uwaga:</b> Netscape 4 nie obsługuje właściwości "background-position".</p> </body></html>
Obraz jako tło w skali 1:1 umieszczony na środku strony
Formatowanie tekstu – kolejność podawania atrybutów Atrybuty grubości czcionki – font-weight, i stylu – font-style, muszą pojawić się przed innymi atrybutami czcionki rozmiar czcionki – font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami – jedyny wyjątek to rodziny czcionek.
kolejność podawania atrybutów - przykład <style> <!-- h1 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 20pt} h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 14pt} --> </style>
Upraszczanie definicji stylów –grupowanie elementów <style> <!-- h1 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 20pt} h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 14pt} --> </style> h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt} h2 {font-size: 14pt}
Upraszczanie definicji stylów – grupowanie atrybutów W CSS można grupować również atrybuty, np.. body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; line-height: 14pt; font-weight: bold} można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif}
Atrybut Przykład definicji color: – kontroluje kolor czcionki. h1 {color: #00ff00} – kod koloru podany jest w zapisie szesnastkowym. h2 {color: red} – korzystając ze standardowych kolorów, można posługiwać się ich nazwami, np. red, blue, white czy green, zamiast kodami heksadecymalnymi. p {color: rgb(0,0,255)} font-family: – kontroluje krój czcionki. {font-family: times} – podano nazwę czcionki Times, {font-family: times , arial} –podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} – wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi. font-size: - rozmiar czcionki. {font-size: 12pt} –rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). font-style: - określa styl tekstu. {font-style: italic} – definiuje tekst pisany kursywą. {font-style: normal} – przywraca ustawienia domyślne. {font-style: oblique} – wprowadza pochylenie odmiany prostej danej czcionki. font-weight: - określa grubość czcionki. {font-weight; bold} – definiuje czcionkę pogrubioną (do dyspozycji są jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). text-decoration: - umożliwia określenie efektów dodatkowych. {text-decoration: none} – brak efektów. {text-decoration: underline} – podkreślenie. {text-decoration: italic} – kursywa. {text-decoration: line-through} – przekreślenie. line-height: - definiuje wysokość wiersza. p {line-height: 12pt} Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki.
Atrybuty formatowania akapitu. Przykład definicji margin-left określa szerokość lewego marginesu. {margin-left: 2cm} – margines wynosi 2 cm. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-right prawego marginesu {margin-right: 2in} – tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). margin-top – ustawienie marginesu górnego. {margin-top: 20pt} – margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. text-indent – ustawienie wcięcia. Jednostki takie jak dla marginesów. {text-indent: 0.5in} – wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne – wysunięcia. text-align – opcja wyrównania tekstu. {text-align: right} – tekst zostanie wyrównany do prawego marginesu. Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów).