WstępJęzyk HTML odpowiedzialny jest za strukturę strony internetowej. Zadaniem CSS jest nadanie odpowiedniego wyglądu strony. Za jego pomocą moŻemy nadać odpowiedni wygląd i kolor prawie kaŻdemu elementowi na stronie.
NarzędziaKod kaskadowych arkuszy stylów moŻemy pisać w Notatnik, który jest częścią systemu Windows.
Dla bardziej zawansowanych polecam program
Notepad++ z polskim interfejsem.
Część 1 - budowa stylu i deklarowanieArkusz zbudowany jest z reguł. Selektora, który określa formatowany element strony i par właściwość i wartość. Pary muszą znajdować się wewnątrz nawisu klamrowego { }.
Przykład budowy stylu
Kod:
Selektor {
właściwość: wartość;
właściwość: wartość;
}
body {
background: #000;
font-family: Verdana;
}
Zewnętrzne deklarowanie styluIstnieje kilka sposobów odwołania się do naszego stylu. PokaŻę jeden z nich. Za pomocą <link rel="stylesheet" href="styl.css" type="text/css" /> moŻemy dołączyć do strony zewnętrzny arkusz stylów, który znajduje się w pliku z rozszerzeniem .css (np. style.css). Fragment ten umieszczamy w sekcji <head></head>
Przykład kodu HTML
Kod:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id=?strona?>
<p class="akapit">Przykładowy tekst...</p>
<H1>Przykładowy tekst...</H1>
</div>
</body>
</html>
Przykład kodu CSS (nazwa pliku style.css)
Kod:
#strona {
border: 1px Solid #000000;
background: #FFFFFF;
width: 760px;
}
.akapit {
font-family: Verdana;
color: #000000;
}
H1 {
font-family: Verdana;
font-size: 15px;
color: #173E68;
}
Część 2 - czcionki i tekstCzcionki, które został stworzone na potrzeby WWW to: Verdana, Tahoma, Arial i Trebuchet MS. Przeglądarki domyślnie mają ustawioną czcionkę Times New Roman jednak font ten nie nadaj się na stronę gdyŻ w małych rozmiarach jest mało czytelny. Osobiście polecam czcionkę Verdana. Za pomocą CSS moŻemy w pełni kontrolować naszym tekstem (druga tabela).
Część 3 - lista punktowanaPrzy uŻyciu CSS moŻemy przejąć całkowitą kontrolę nad punktami w naszej liście. Dzieje się to wszystko w sposób bardzo łatwy! Znacznikiem <li> (znany z HTML) tworzyliśmy nowe pozycje na naszej liście. CSS przejmie kontrolę nad tym znacznikiem.
Przykład kodu HTML
Kod:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul>
<li class="one">wykaz 1</li>
<li class="two">wykaz 2</li>
<li class="one">wykaz 3</li>
<li class="two">wykaz 4</li>
</ul>
</body>
</html>
Przykład kodu CSS (nazwa pliku style.css)
Kod:
li.one {
list-style-type: square;
}
li.two {
list-style-type: circle;
}
Część 4 - tło i koloryDosyć istotną sprawę w wyglądzie strony internetowej stanowi kolorystyka. Odradzam uŻywania ostrych raŻących kolorów i grafik pod tło tekstu, gdyŻ będzie to przeszkadzało w czytaniu.
Przykład kodu CSS
Kod:
body {
background-color: #FFFFFF;
background-image: url(img01.gif);
background-attachment: fixe;
background-repeat: repeat-x;
}
H2 {
background-color: #000;
background-position: 40px 60px;
}
Część 5 - obramowaniaElementem border moŻemy osiągnąć bardzo fajne efekty np. pola formularzy.
Przykład kodu CSS
Kod:
#strona {
border-top: 1px Solid #EEE;
border-left: 1px Solid #000;
border-right: 1px Solid #000;
border-bottom: 1px Solid #EEE;
}
Publikowanie i kopiowanie tego tekstu bez zgody autora jest łamaniem praw autorskich.Na wszelkie zapytania i problemy odnośnie poradnika odpowiem pod adresem gregory512@wp.plSpecjalnie dla:
