Style zewnętrzne <link rel= stylesheet href= style.css />

Transkrypt

1 Znacznik <h1></h1> jest największym nagłówkiem, a <h6></h6> najmniejszym. Przykład <body> <h1>nagłówek stopnia pierwszego</h1> <h2>nagłówek stopnia drugiego</h2> <h3>nagłówek stopnia trzeciego</h3> <h4>nagłówek stopnia czwartego</h4> <h5>nagłówek stopnia piątego</h5> <h6>nagłówek stopnia szóstego</h6> </body> Listy Lista wypunktowana <li>pierwsza pozycja <li>druga pozycja <li>trzecia pozycja Lista numerowana <ol> <li>pierwsza pozycja <li>druga pozycja <li>trzecia pozycja </ol> Lista definicji Za pomocą znaczników <dl></dl> określamy główne ramy listy. Następnie przy użyciu znaczników <dt></dt> oznaczamy słowo lub fragment tekstu, który chcemy szerzej opisać. Na koniec używając <dd></dd> dodajemy opis. <dl> <dt>słowo definiowane</dt> <dd>opis słowa definiowanego</dd> <dt>kolejne słowo definiowane</dt> <dd>kolejny opis słowa definiowanego</dd> </dl> Listy zagnieżdżone Podczas zagnieżdżania możemy łączyć różne typy list, np. numerowaną z wypunktowaną. Przykład <ol> <li>pieczywo

2 <li>chleb <li>bułki <li>rogaliki <li>produkty mleczne <li>mleko <li>jogurt naturlny <li>śmietana <li>owoce <li>jabłka <li>cytrusy <li>pomarańcze <li>mandarynki </ol> Style zewnętrzne Style te zapisujemy w osobnym pliku. Pliki ze stylami mają rozszerzenie.css. Tak zdefiniowane style dołączamy do dokumentu HTML, umieszczając w nagłówku strony element link: <link rel= stylesheet href= style.css /> Zatem witryna składa się z dwóch plików: dokumentu HTML oraz dokumentu CSS. Style wewnętrzne Są umieszczane w nagłówku strony przy wykorzystaniu elementu style: <style> tutaj definicja stylów </style> Atrybut style Atrybut ten może towarzyszyć niemal każdemu elementowi HTML. Przykład <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>atrybut style</title> </head> <body> <h1 style=" width: 500px; margin: 50px; background: red; color: white; border: 4px solid black;

3 text-align:center; ">Moja pierwsza strona</h1> </body> </html> Komentarze Komentarze w języku CSS oznaczamy /*oraz*/ h1{ /*wyśrodkowanie poziome*/ text-align: center; Komentarze możemy umieszczać wewnątrz: h1{ /* *wyśrodkowanie poziome */ text-align: center; oraz na zewnątrz bloków /* *nagłówek */ h1{ text-align:center; Niektóre właściwości CSS Czcionki Do zmiany atrybutów czcionki służą właściwości font-family, font-size, font-style oraz font-weight. Pierwsza z nich ustala krój czcionki: font-family: Arial, Verdana, sans-serif; Jako wartość należy podać nazwy krojów oddzielone przecinkami. Przeglądarka użyje pierwszej z wymienionych czcionek, która jest dostępna w systemie. Jeśli nazwa kroju czcionki zawiera białe znaki, to należy ją ująć w cudzysłów. font-family: "Times New Roman, Georgia, serif; Napisy serif oraz sans-serif są nazwami ogólnych rodzin czcionek I powinny być ostatnią podawaną wartością. Rodzina serif to czcionki szeryfowe (np. Times New Roman, Georgia), zaś sans-serif bezszeryfowe(np. Arial, Verdana). Dzięki temu przeglądarka będzie mogła dobrać czcionkę z odpowiedniej rodziny, w przypadku gdy żadna z podanych czcionek nie jest dostępna. Atrybut font-size określa rozmiar czcionki. Jego wartość może być wyrażona m.in. w procentach. font-size: 120%; w pikselach font-size: 18px; lub przy użyciu słów kluczowych xx-small, x-small, small, medium, large, x-large, xx-large: font-size: medium; Atrybut font-style może przyjmować wartości normal oraz italic. W przypadku użycia wartości italic tekst będzie pisany kursywą: font-style: italic; Atrybut font-weight o wartościach normal oraz bold, modyfikuje grubość kroju: font-weight: bold; Wysokość wiersza tekstu Atrybut line-height pozwala zmienić wysokość wiersza tekstu. Jego wartością jest jednostka długości, np. line-height: 32px; lub. line-height: 120%.

4 Wyrównanie poziome tekstu Dostępne są cztery sposoby wyrównania: do lewej, do prawej, wyśrodkowanie, wyjustowanie. Odpowiadają im wartości left, right, center oraz justify właściwości text-align. Przykładowe użycie ma postać text-align: center; Marginesy Do modyfikacji marginesów służy właściwość margin. Jej wartością jest wielkość marginesu, która może być m.in. wyrażona w pikselach. margin: 40px; lub w procentach margin: 10%; Powyższy zapis zmienia cztery marginesy: górny, prawy, dolny i lewy. Można jednak modyfikować każdy z marginesów osobno margin-top: 100px; margin-right: 200px; margin-bottom: 300px; margin-left: 400px; Powyższe polecenia możemy zapisać w jednej linijce. Mianowicie margin: 100px 200px 300px 400px; Wówczas pierwsza wartość (100px) jest marginesem górnym, druga(200px) marginesem prawym, trzecia(300px) marginesem dolnym, natomiast czwarta (400px)marginesem lewym. Jeszcze innym rozwiązaniem jest podanie dwóch wartości atrybutu margin margin: 10px 70px; W tym przypadku marginesy górny i dolny będą miały po 10px, zaś lewy i prawy po 70 px. Natomiast jeśli jako wartość margin podamy trzy liczby np. margin: 10px 20px 30px; wówczas górny margines będzie wynosił 10px, dlny 30, a lewy i prawy będą mieć po 20 px. Kolory Właściwość color modyfikuje kolor czcionki, a background ustala barwę tła. Ich wartościami są nazwy kolorów lub kody RGB. CSS pozwala na stosowanie kolorów wymienionych w specyfikacji CSS Color Module Level 3 ( oraz kolorów systemowych. color: black; background: white; Kolory w CSS mogą być również podane w kodzie RGB. W zapisie takim nasycenie każdej z trzech barw jest wyrażone liczbą jednobajtową. Ponieważ liczby jednobajtowe mają zakres od 0 do 255, zapis taki przyjmuje postać: color: rgb(255,120,85); Nasycenie barw można również wyrazić procentowo color: rgb(25%, 12%, 33%); lub w systemie szesnastkowym color: #ff035c Klasy i identyfikatory Wiemy już, że np. reguła p{ color: red; spowoduje zmianę koloru wszystkich akapitów w dokumencie. Natomiast jeśli chcemy wyróżnić tylko wybrane akapity to musimy użyć klas lub identyfikatorów. Każdy atrybut HTML może mieć atrybut class. Poprawnymi zapisami są

5 <p class= wstep > <h3 class= rozdzial > <em class= plik > W jednym dokumencie można użyć tej samej klasy w odniesieniu do wielu różnych elementów HTML: <body class= rozdział > <h1 class= rozdzial >Witaj</h1> <h2 class= podrozdzial >Cześć</h2> <p class= podrozdzial >Klasa</p> <p class= podrozdzial >HTML</p> </body> Celem wprowadzenia klas w dokumencie HTML jest zróżnicowanie formatowania elementów. Dzięki klasom dokument może zawierać ten sam element (np. em) użyty wielokrotnie, przy czym każde wystąpienie może mieć własny unikalny format. Selektory dotyczące klas Do elementów, które mają atrybut class o wartości rozdzial można odwoływać się w stylach CSS przy użyciu selektora:.rozdzial{ font-family: Verdana, sans-serif; Zwróć uwagę na kropkę przed nazwą klasy. Selektor.rozdzial dotyczy każdego elementu HTML, który ma atrybut class o wartości rozdzial. Drugim rodzajem selektora jest selektor, który składa się z nazwy elementu HTML oraz nazwy klasy (oddzielonych kropką) h1.rozdzial{ Dotyczy on wyłącznie elementu h1 klasy rozdzial Atrybut id Atrybut id nadaje elementowi HTML identyfikator: <h1 id= tytul ></h1> <h2 id= wstep ></h2> <p id= opis ></p> Można go używać podobnie jak atrybutu class, w odniesieniu do każdego elementu HTML. W odróżnieniu od klas identyfikator musi być w ramach pojedynczego pliku HTML unikalny. Nie można więc w jednym dokumencie dwukrotnie użyć identyfikatora tytul. Selektory dotyczące identyfikatorów Do elementu, który ma id o wartości tytuł można odwoływać się w stylach CSS przy użyciu selektora #tytul{ Jeśli jest to element h1, to selektor może przyjąć postać h1#tytul{ Najważniejszą metodą minimalizacji liczby użytych w dokumencie klas i identyfikatorów jest stosowanie selektorów potomnych. Jeśli w elemencie p o identyfikatorze wstęp umieścimy element em, wówczas do nadania formatu elementom em, które występują wewnątrz elementu #wstep, należy użyć selektora potomnego. #wstep em{

6 <p id= wstep >Witam<em>wszystkich </em>obecnych</p> Selektor taki składa się z dwóch selektorów(#wstep oraz em) oddzielonych spacją. Odnosi się on do elementów em zawartych wewnątrz elementów o identyfikatorze #wstep. Swoim działaniem obejmuje zarówno elementy em zawarte bezpośrednio w elemencie p <p id= wstep >Witam<em>wszystkich </em>obecnych</p> jak i zagnieżdżone głebiej<p id= wstep >Witam<strong><em>wszystkich </em>obecnych</strong></p> Selektory potomne mogą przybierać postać p em{ h1 em strong{ Pierwszy z nich dotyczy elementów em zawartych wewnątrz elementów p, a drugi elementów strong zawartych wewnątrz elementu em, który z kolei musi być zawarty w elemencie h1. Głębokość zagnieżdżenia może być dowolna. Na przykład selektor em em em em { color: red; będzie dotyczył element em zagnieżdżonego czterokrotnie. W kodzie <em>a<em>b<em>c<em>d</em></em></em></em></em> Selektory potomne można łączyć z klasami i identyfikatorami. Selektor #menu em{ dotyczy elementów em zawartych w elemencie o identyfikatorze menu <p id= menu > <em></em> </p> Selektor: #menu.uwaga{ dotyczy elementów klasy uwaga zawartych w elemencie o identyfikatorze menu: <p id= menu > <em class= uwaga ></em> </p> Selektor.cwiczenie.przymiotnik{ dotyczy natomiast elementów klasy przymiotnik zawartych w elementach klasy ćwiczenie <p class= cwiczenie > <em class= przymiotnik ></em> </p>