Skopiuj plik tla_i_obramowania.zip rozpakuj go do folderu WWW.
Otwórz plik tla_i_obramowania.html w przeglądarce internetowej.
Zapoznaj się ze źródłem pliku.
W elemencie head dodaj kod:
<title>Tła i obramowania</title>
<meta charset="utf-8"/>
<style type="text/css">
body {
background: silver;
}
</style>
</head>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
background: silver; border: 7px solid; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
border: 7px solid red;
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
h1 {
border-left: 1px dashed red;
}
h2 {
border-right: 2px dotted red;
}
h3 {
border-top: 3px double red;
}
h4 {
border-bottom: 4px groove red;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
h5 {
border-left: 5px ridge red;
border-right: 5px ridge red;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
a {
border-width: 6px;
border-color: silver;
border-style: outset;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
a:hover {
border-style: inset;
}
</style>
Zapisz zmiany i odśwież podgląd.
W przeglądarce internetowej wpisz adres jigsaw.w3.org/css-validator
Wybierz zakładkę poprzez załadowanie pliku
Za pomocą przycisku Przeglądaj... otwórz plik tla_i_obramowania.htm
Naciśnij przycisk Sprawdź
Umieść plik tla_i_obramowania.html na serwerze.
Zastosuj poznane wiadomości w pliku index.html .
{background:} - definiuje tło. Wartością są wartości styli: kolor, obraz, sposób przewijania i powtarzania, pozycja tła. Można zastosować styl {background-color:}.{border:} - definiuje obramowanie. Wartość może być równa: rozmiar, styl i kolor linii
(opcjonalnie).{border-left:} - definiuje obramowanie lewe. Wartość może być równa: rozmiar styl i kolor linii.{border-right:} - definiuje obramowanie prawe. Wartość może być równa: rozmiar styl i kolor linii.{border-top:} - definiuje obramowanie górne. Wartość może być równa: rozmiar styl i kolor linii.{border-bottom:} - definiuje obramowanie dolne. Wartość może być równa: rozmiar styl i kolor linii.{border-width:} – definiuje rozmiar lini. Wartością jestliczba z jednostką.{border-color:} – definiuje kolor lini. Wartością jest color.{border-style:} – definiuje styl lini obramowania. Może przyjmować wartości: solid (ciągła), double (podwójna), dotted (kropkowana), dashed (kreskowana), groove (wklęsła), ridge (wypukła), inset (przycisk wciśnięty), outset (przcisk
zwolniony). W edytorze grafiki utwórz obraz o rozmiarze 100px na 100px, o jasnych kolorach (z przeznaczeniem na tło) i zapisz w swoim folderze, w formacie JPG pod nazwą tlo.jpg a następnie w elemencie style zmień kod:
body {
background-image: url(tlo.jpg);
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
background-image: url(tlo.jpg); background-repeat: repeat-x; }
Zapisz zmiany i odśwież podgląd . Zmień wartość repeat-x na repeat-y. Sprawdź pozostałe wartości: repeat i no-repeat.
W elemencie style dodaj kod.
background-repeat: no-repeat; background-color: red; }
Zapisz zmiany i odśwież podgląd . Zmień kolor dopełnienia na kolor w postaci rgb(%R,%G,%B) (np. rgb(100%,50%,0%)).
W elemencie style dodaj kod.
background-color: rgb(100%,50%,0%); background-attachment: fixed; }
Zapisz zmiany i odśwież podgląd w przeglądarce, przewiń stronę. Zmień wartość fixed na scroll.
W elemencie style dodaj kod.
background-attachment: scroll;
background-position:10px 10%;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
h6 {
border-left-color: red;
border-right-color: rgb(255,0,0);
border-top-color: #ff0000;
border-bottom-color: #f00;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
border-bottom-color: #f00; border-left-style: solid; border-right-style: dotted; border-top-style: dashed; border-bottom-style: double; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
border-bottom-style: double; border-left-width: 1px; border-right-width: 2px; border-top-width: 3px; border-bottom-width: 4px; }
Zapisz zmiany i odśwież podgląd.
Umieść plik tla_i_obramowania.html na serwerze po sprawdzeniu poprawności.
{background-image:} - definiuje obraz tła. Wartością jest nazwa pliku.{background-repeat:} - definiuje sposób powtarzania obrazu tła. Wartością są: repeat, repeat-x, repeat-y i no-repeat.{background-color:} - definiuje kolor tła. Wartością
jest nazwa lub kod koloru. {background-attachment:} - definiuje sposób przewijania obrazu tła. Wartością są: fixed
i scroll.{background-position:} - definiuje pozycje obrazu tła. Wartością są:
poziomo - left | center | right | liczba | procent;
pionowo - top | center | bottom | liczba | procent.{border-left-color:} - definiuje kolor obramowania lewego. Wartością jest color (obramowania).{border-right-color:} - definiuje kolor obramowania prawego. Wartością jest color (obramowania).{border-top-color:} - definiuje kolor obramowania górnego. Wartością jest color (obramowania).{border-bottom-color:} - definiuje kolor obramowania dolnego. Wartością jest color (obramowania).{border-left-style:} - definiuje styl obramowania lewego. Wartość jest styl (obramowania).{border-right-style:} - definiuje styl obramowania prawego. Wartość jest styl (obramowania).{border-top-style:} - definiuje styl obramowania górnego. Wartość jest styl (obramowania).{border-bottom-style:} - definiuje styl obramowania dolnego. Wartość jest styl (obramowania).{border-left-width:} - definiuje rozmiar obramowania lewego. Wartością jestliczba z jednostką.{border-right-width:} - definiuje rozmiar obramowania prawego. Wartością jestliczba z jednostką.{border-top-width:} - definiuje rozmiar obramowania górnego. Wartością jestliczba z jednostką.{border-bottom-width:} - definiuje rozmiar obramowania dolnego. Wartością jestliczba z jednostką.