Formatowanie strony

Karta pracy 2014/2015

Adres:
http://plotkarka.eu/KP/formatowaniestrony.html
Autor:
Radosław Kowaluk

Kolor strony i tekstu, wartość color, modele kolorów

Czynności wstępne

Skopiuj plik formatowaniestrony.zip rozpakuj go do folderu WWW.

Otwórz plik formatowaniestrony.html w przeglądarce internetowej.

Zapoznaj się ze źródłem pliku.

Styl CSS strony1

W elemencie head dodaj kod:

  <title>Formatowanie strony</title>
  <meta charset="utf-8"/>
  <style type="text/css">

  </style>
 </head>

Selektor typu (elementu)2

W elemencie style dodaj kod:

  <style type="text/css">
body {

}
  </style>

Kolor tła3 (wartość koloru - nazwa podstawowa)

W elemencie style dodaj kod.

body {
background-color: olive;
}

Zapisz zmiany i odśwież podgląd.

Kolor tekstu4 (wartość koloru - kod RGB  w postaci: #rrggbb)

W elemencie style dodaj kod.

background-color: olive;
color: #ff0000;
}

Zapisz zmiany i odśwież podgląd.

Wartość koloru - kod RGB  w postaci: rgb(R,G,B)

W elemencie style dodaj kod.

background: rgb(50%,50%,50%);
color: rgb(0,255,0);

Zapisz zmiany i odśwież podgląd.

Kolory bezpieczne

Dobierz kolor tekstu i strony używając kolorów bezpiecznych. Zapisz zmiany i odśwież podgląd.

Szerokość5 kolumny

W elemencie style dodaj kod.

color: rgb(255,0,0); 
width: 987px;
}

Zapisz zmiany i odśwież podgląd.

Marginesy6 (wycentrowanie kolumny)

W elemencie style dodaj kod.

width: 987px; 
margin: auto;
}

Zapisz zmiany i odśwież podgląd.

W elemencie style dodaj kod.

margin: 20px auto;

Zapisz zmiany i odśwież podgląd.

W elemencie style dodaj kod.

}
p {
margin: 20px auto 10px;
}
</style>

Zapisz zmiany i odśwież podgląd.

Zadanie

Ustaw cztery różne marginesy akapitu.

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 formatowaniestrony.htm

Naciśnij przycisk Sprawdź

Wgrywanie plików na serwer

Umieść plik formatowaniestrony.html na serwerze.

Zadanie

Zastosuj poznane wiadomości w pliku index.html .

  1. Element style, atrybut type o wartości "text/css" - definiują styl CSS strony.
  2. Selektor elementu, typu - nazwa elementu.
  3. Styl {background-color:} - definiuje kolor tła. Wartością jest nazwa lub kod koloru. Zamiast background-color: można użyć stylu {background:} - który definiuje tło. Wartością są wartości styli: kolor, obraz, powtarzania, sposób przewijania, pozycja tła.
  4. Styl {color:} - definiuje kolor tekstu. Wartością jest nazwa lub kod koloru. Definicja stylu w standardzie CSS3 {color:}
  5. Styl {width:} - definiuje szerokość. Wartość liczba z jednostka długości lub procent.
  6. Styl {margin:} - definiuje margines elementu. Wartością mogą być liczby z jednostka długości, procent lub auto. Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala tę wartość dla wszystkich marginesów.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines.

Tło graficzne

Obraz tła1

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

  <style type="text/css">
body {
 background: url(tlo.jpg); 
}
  </style>

Zapisz zmiany i odśwież podgląd.

Sposób powtarzania tła2

W elemencie style dodaj kod.

body {
 background: url(tlo.jpg) 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.

Kolor dopełnienia tła

W elemencie style dodaj kod.

body {
 background: url(tlo.jpg) olive repeat-x; 
}

Zapisz zmiany i odśwież podgląd . Zmień kolor dopełnienia na kolor w postaci rgb(%R,%G,%B) (np. rgb(100%,50%,0%)).

Sposób przewijania tła3

W elemencie style dodaj kod.

body {
 background: rgb(100%,50%,0%) url(tlo.jpg)
 no-repeat fixed; 
}

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

Pozycja tła4

W elemencie style dodaj kod.

body {
 background: rgb(100%,50%,0%) url(tlo.jpg)
 no-repeat scroll 10px 10%; 
}

Zapisz zmiany i odśwież podgląd.

Maksymalna szerokość5

W elemencie style dodaj kod.

 background: rgb(100%,50%,0%) url(tlo.jpg)
 no-repeat scroll 10px 10%;
 max-width: 640px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Minimalna szerokość6

W elemencie style dodaj kod.

max-width: 640px;
min-width: 320px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Marginesy: górny7, prawy8, dolny9, lewy10

W elemencie style dodaj kod. 

min-width: 320px;
margin-top: 10px;
margin-right: 10%;
margin-bottom: 10px;
margin-left: 10%;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Selektor atrybutu (prosty)11, przezroczystość elementu12

W elemencie style dodaj kod.

}
p[lang] {
opacity: 0.5;
}
   </style>

W dowolnym elemencie p dodaj atrybut lang

<p lang="pl"...>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik formatowaniestrony.html na serwerze po sprawdzeniu poprawności.

  1. Styl {background-image:} - definiuje obraz tła. Wartością jest nazwa pliku.
  2. Styl {background-repeat:} - definiuje sposób powtarzania obrazu tła. Wartością są: repeat, repeat-x, repeat-y i no-repeat.
  3. Styl {background-attachment:} - definiuje sposób przewijania obrazu tła. Wartością są: fixed i scroll.
  4. Styl {background-position:} - definiuje pozycje obrazu tła. Wartością są: poziomo - left | center | right | liczba | procent; pionowo - top | center | bottom | liczba | procent.
  5. Styl {max-width:} - definiuje maksymalną szerokość. Wartość liczba z jednostka długości.
  6. Styl {min-width:} - definiuje minimalną szerokość. Wartość liczba z jednostka długości.
  7. Styl {margin-top:} - definiuje margines górny elementu.
  8. Styl {margin-right:} - definiuje margines lewy elementu.
  9. Styl {margin-bottom:} - definiuje margines dolny elementu.
  10. Styl {margin-left:} - definiuje margines lewy elementu.
  11. Selektor atrybutu (prosty) - to selektor, którego definicja stylu stosuje się do wszystkich elementów strony posiadających dany atrybut (niezależnie od wartości).
  12. Styl {opacity:} - definiuje przezroczystość elementu. Definicja stylu w standardzie CSS3 {opacity:}. Wartością jest liczba. Styl nie jest w standardzie CSS 2.1.