Tło i obramowanie

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-background.html
Autor:
Radosław Kowaluk

Tło elementu

Czynności wstępne

Utwórz plik css3-background.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Tło i obramowanie</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Kolor tła1

W elemencie style dodaj kod.

body {
background-color: olive;
}

Zapisz zmiany i odśwież podgląd.

Obraz tła2

W edytorze grafiki utwórz obraz o rozmiarze 100px na 100px z przeznaczeniem na tło strony i zapisz w swoim folderze pod nazwą, w formacie JPG pod nazwą tlo1.jpg a następnie w elemencie style dodaj kod:

background-color: olive;
background-image: url(tlo1.jpg); 
}

Zapisz zmiany i odśwież podgląd.

Sposób powtarzania tła3

W elemencie style dodaj kod.

background-image: url(tlo1.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.

Sposób przewijania tła4

W elemencie style dodaj kod.

background-repeat: no-repeat; 
background-attachment: fixed; 
}

Zapisz zmiany i odśwież podgląd w przeglądarce, przewiń stronę. Zmień wartość fixed na scroll.

Pozycja tła5

W elemencie style dodaj kod.

background-attachment: scroll;
background-position: 10px 10%; 
}

Zapisz zmiany i odśwież podgląd.

Tło6

W edytorze grafiki utwórz obraz o rozmiarze 50px na 1px z przeznaczeniem na tło elementu i zapisz w swoim folderze pod nazwą, w formacie PNG pod nazwą tlo2.png a następnie w elemencie style dodaj kod:

h1 {
 background: url(tlo2.png) repeat-x; 
}

W elemencie body dodaj kod.

<h1>Tło i obramowanie</h1>

Zapisz zmiany i odśwież podgląd .

Sprawdzanie poprawność CSS strony

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 css3-background.htm

Naciśnij przycisk Sprawdź

  1. Reguła {background-color:} - definiuje kolor tła. Wartością jest nazwa lub kod koloru.
  2. Reguła {background-image:} - definiuje obraz tła. Wartością jest adres pliku.
  3. Reguła {background-repeat:} - definiuje sposób powtarzania obrazu tła. Wartością są: repeat (powtarzane), repeat-x (powtarzane poziomo), repeat-y (powtarzane pionowo) i no-repeat (niepowtarzane).
  4. Reguła {background-attachment:} - definiuje sposób przewijania obrazu tła. Wartością są: fixed (nieruchome) i scroll (przewijane).
  5. Reguła {background-position:} - definiuje pozycje obrazu tła. Wartością są:
     poziomo - left (do lewej) | center (do środka) | right (do prawej) | liczba | procent;
     pionowo - top (do góry) | center (do środka) | bottom (do dołu) | liczba | procent.
  6. Zamiast wyżej wymienionych styli można użyć reguły {background:} - która definiuje tło. Wartością są wartości styli: kolor, obraz, sposób powtarzania, sposób przewijania, pozycja tła.

Obramowanie elementu

Obramowanie2

W elemencie style dodaj kod.

h2 {
border: 4px outset silver;
}

W elemencie body dodaj kod.

<h2>Tło i obramowanie</h2>

Zapisz zmiany i odśwież podgląd.

Obramowanie lewe3, prawe4 górne5 i dolne6

W elemencie style dodaj kod.

h3 {
border-left: 2px solid red;
}
h4 {
border-right: 2px solid red;
}
h5 {
border-top: 2px solid red;
}
h6 {
border-bottom: 2px solid red;
}

W elemencie body dodaj kod.

<h3>Tło i obramowanie</h3>
<h4>Tło i obramowanie</h4>
<h5>Tło i obramowanie</h5>
<h6>Tło i obramowanie</h6>

Zapisz zmiany i odśwież podgląd.

Styl obramowania: rozmiar7, kolor8 i styl lini9.

W elemencie style dodaj kod.

a {
border-width: 4px;
border-color: silver;
}
a:link {
border-style: groove;
}
a:visited {
border-style: ridge;
}
a:hover {
border-style: inset;
}
a:active {
border-style: outset;
}

W elemencie body dodaj kod.

<p><a href="#">Hiperłącze</a></p>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css3-background.html na serwerze po sprawdzeniu poprawności kodu.

Zadanie

Zastosuj poznane wiadomości w pliku index.html.

  1. Reguła {border:} - definiuje obramowanie. Wartość może być równa: rozmiar, styl i kolor linii. Minimalnie można określić rozmiar i styl, kolor obramowania będzie czarny.
  2. Reguła {border-left:} - definiuje obramowanie lewe. Wartość może być równa: rozmiar, styl i kolor linii.
  3. Reguła {border-right:} - definiuje obramowanie prawe. Wartość może być równa: rozmiar, styl i kolor linii.
  4. Reguła {border-top:} - definiuje obramowanie górne. Wartość może być równa: rozmiar, styl i kolor linii.
  5. Reguła {border-bottom:} - definiuje obramowanie dolne. Wartość może być równa: rozmiar, styl i kolor linii.
  6. Reguła {border-width:} – definiuje rozmiar linii. Wartość może być równa: thin (cienka), medium (średnia), thick (gruba) lub liczba z jednostką. Można definiować oddzielnie: {border-top-width:}, {border-right-width:}, {border-bottom-width:}, {border-left-width:}.
  7. Reguła {border-color:} – definiuje kolor linii. Wartością jest nazwa koloru lub jego kod. Można definiować oddzielnie: {border-top-color:}, {border-right-color:}, {border-bottom-color:}, {border-left-color:}.
  8. Reguła {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). Można definiować oddzielnie: {border-top-style:}, {border-right-style:}, {border-bottom-style:}, {border-left-style:}.