docLekcja 10: Style CSS
download 
Reklamacja 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
