Lekcja 10: Style CSS
Transkrypt
Lekcja 10: Style CSS
Lekcja 10: Style CSS Formatowanie strony możemy realizować za pomocą stylu CSS. Ten sposób pozwala nam panować nad całością szaty graficznej na naszej stronie z jednego punktu dowodzenia. Nie musimy zmieniać wyglądu każdego elementu osobno, możemy tego dokonać jednocześnie dla wszystkich. Jeżeli np. mamy na stronie w różnych miejscach tytuły rozdziałów napisane w kolorze niebieskim czcionką arial i postanowiliśmy zmienić formatowanie na zielony i tahoma to stosując styl wprowadzimy zmianę tylko raz . Inaczej musielibyśmy dokonywać zmian przy każdym tytule. Styl css jest to plik tekstowy, w którym zapisujemy sposób formatowania strony. Można go napisać w Notatniku nadając mu nazwę styl.css. A następnie umieścić w kodzie strony przed znacznikiem </head> pisząc odnośnik do pliku: <link href="styl.css" rel="stylesheet" type="text/css"> Styl zapisujemy wg schematu obiekt { właściwość1 : wartość1; właściwość2 : wartość2; ....} Np. p { color : #ffff00; font-size : 14pt; } Można dodatkowo zdefiniować klasę znacznika. Definicja taka ma postać: p {text-align: justi fy;} dla każdego akapitu p.inne {text-align: right;} dla akapitu wróżnionego Wszystkie akapity zostaną sformatowane wg zwykłego znacznika <p>...</>, zaś "inne" użyją znacznika <p class="inne">...</p> Przykładowy plik ze stylami może wyglądać np. tak: body { margin-top: 20pt; margin-left: 20pt; } a:hover { color: #00ff00; } a:link { color: #ffff00; } Ustalono w nim margines lewy i górny na 20pt. oraz stworzyliśmy prosty rollower odnośników. To znaczy link będzie miał kolor żółty zaś po najechaniu na niego myszą zmieni kolor na zielony . Często używamy CSS do tworzenia schematów 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 Przykład 27 i 28: działanie stylu Oto kod pliku strony zawierającej plan lekcji. Bez dodanego stylu widok jest mało imponujący. Po zastosowaniu stylu1 otrzymujemy ciekawy efekt, a stylu2 jeszcze inny. Zmian dokonujemy tylko w pliku styl.css zmieniając wartości parametrów. <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title>Plan lekcji</title> <link href="styl.css" rel="stylesheet" type="text/css"> </head> <body> 1 <p> Plan lekcji</p> <table align=center> <tr ><th>nr </th><th>czas zajęć</th><th>poniedziałek</th><th></th><th>wtorek</th> <th></th><th>środa</th><th></th><th>czwartek</th><th></th><th>piątek</th><th></t h></tr> <tr ><td >1 </td><td>8:05-8:50</td><td>-</td><td></td><td>-</td><td></td><td>-</ td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td >2 </td><td>9:00-9:45</td><td>-</td><td></td><td>-</td><td></td><td>-</ td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td > 3</td><td>9:55-10:40</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td >4 </td><td>10:55-11:40</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td >5 </td><td>11:50-12:35</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td > 6</td><td>12:45-13:30</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td >7 </td><td>13:40-14:25</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td > 8</td><td>14:35-15:20</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> <tr ><td > 9</td><td>15:30-16:15</td><td>-</td><td></td><td>-</td><td></td><td></td><td></td><td>-</td><td></td><td>-</td><td></td></tr> </table> </body> </html> Bez stylu: 2 Styl1: Styl2: kod styl2.css body{ background: #e6e6ff; padding: 0px; } table{ border-color: green; } td { text-align: center; vertical-align: middle; border-style: solid; border-width: 2px; padding: 0px; background-color: #fdffff; } th { text-align: center; 3 vertical-align: middle; background-color: #bdbdbd; border-width: 2px; border-style: solid; color: #330066; } p{ text-align: center; color: darkgreen; font-size: 14pt; } Przykład 29: styl zastosowany w przykładzie Galeria (następna lekcja) body{ background: #b4b4b4; padding: 2px; color: #330066; } dla strony określa kolor tła strony określa odstęp elementu według kolejności: górna, prawa, dolna, lewa określa kolor tekstu na stronie table{ border: 0; width: 663px; } dla tabeli określa grubość obramowania wokół tabeli na o px określa szerokość tabeli na 663 px td { text-align: center; border: 0px; width: 151px; } dla komórki określa wyrównanie elementu w komórce na środku określa grubość obramowania wokół komórki na 0 px określa szerokość komórki na 151 px img { border: 1px; border-color: #cc6633; padding: 2px; } dla obrazka określa grubość obramowania wokół obrazka na 1 px określa kolor obramowania określa odstęp elemnetu od górnej krawędzi na 2 px td.podpisy { border: 1px; text-align: center; height: 30px; color: #cc6633; vertical-align: middle; background-color: #ffffcc; } klasa podpisy (jak będzie wyglądał podpis pod obrazkiem) określa grubość obramowania 1 px określa wyrównanie tekstu na środek określa wysokość na 30 px określa kolor podpisu określa położenie podpisu względem pionu na środek określa kolor tła wokół podpisu Zadanie zaliczeniowe nr 10: Wykorzystując informacje podane w wykładzie oraz tablice znaczników stylu przygotuj zewnętrzny plik styl.css dla swojej strony. Dołącz go do pliku index.html i przetestuj jego działanie. Przyślij spakowane pliki index.html i styl.css. 4