KRÓTKI SZKIC CSS
Ten krótki szkic powinien pozwolić szybko zacząć korzystać z CSSa.
Jeżeli chcemy umieścic naszego CSSa w pliku zewnętrznym w znaczniku <head> musimy umieścic:
<link rel="stylesheet" href="nazwa_naszego_pliku.css" type="text/css">
Jezeli chcemy umiescic arkusz stylu bezpośrednio w pliku (np. w pliku .html) w sekcji <head> musimy umieścic:
<style type="text/css">
tutaj polecenia CSSa
a nastepnie zamknac:
</style>
Tak więc przykładowy arkusz CSS w pliku html wygląda tak:
<head>
<style type="text/css">
body {
background: cornsilk;
font-family: verdana, arial, tahoma, sans-serif;
font-size: 11px;
}
</style>
</head>
Tak np sformatujemy znacznik b:
b {
font-family: verdana, arial, tahoma;
font-size: 12px;
color: red;
}
Tak będzie wydlądał efekt
Dodajemy klasę
Jezeli chcemy użyć znacznik "b" z innymi ustawieniami musimy mu dodać klasę:
b.dwa {
font-family: verdana;
font-size: 12px;
color: blue;
}
A odwołujemy sie do niego pisząc:
<b class="dwa">
Tak wygląda efekt
W ten sposób możemy sobie przygotować szereg klas "na każdą okazję".
Przykłady:
p {
font-family: Arial, tahoma, verdana;
font-size: 11px;
color: #0000FF;
background-color: white;
}
EFEKT:
Tak formatuje znacznik p
Przykład:
p.dwa {
color: green;
font-size: 20px;
background: peru;
EFEKT:
Tak formatuje znacznik p.dwa
Przykład:
p.trzy {
color: white;
font-size: 20px;
background: brown;
text-transform: capitalize;
}
EFEKT:
Zamieniam wszystkie pierwsze litery na duze - p.trzy
Przykład:
p.cztery
{
color: gold;
font-size: 20px;
background: black;
text-transform: uppercase;
}
EFEKT:
Zamieniam wszystkie litery na duze
Można też definiowac wyglad linków:
a { font-family: Arial, Verdana, sans-serif; font-size: 15px; color: brown; text-decoration: underline; font-weight: bold;}
Tak wyglada link
C.D.N
|