Formatowanie grafiki

Karta pracy 2013/2014

Adres:

http://www.plotkarka.eu/kp/formatowaniegrafiki.html

Autor:

Radosław Kowaluk

Ćwiczenia

Wstęp

Skopiuj plik formatowaniegrafiki.zip i rozpakuj go do folderu z plikami WWW.

Zapoznaj się z zawartością i źródłami plików.

Oblewanie tekstem¹, selektor dziecka²

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

}
p > img {
float: left;
}
</style>

Marginesy zewnętrzne³

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

float: left;
margin: 5px 10px 5px 0px;
}

Rozdzielczość⁴

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

margin: 5px 10px 5px 0px;
width: 200px;
height: 150px;
}

Marginesy wewnętrzne⁵

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

height: 150px;
padding: 5px;
}

Obrys⁶

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

padding: 5px;
outline: 1px solid silver;
}

Usunięcie obramowania hiperłączy graficznych⁷

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

}
a > img {
border: none;
}
</style>

Wyróżnienie wskazanego hiperłącza

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce, przetestuj hiperłącza.

}
a:hover > img {
outline: 2px outset silver;
}
</style>

Wyróżnienie klikniętego hiperłącza

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce, przetestuj hiperłącza.

}
a:active > img {
outline: 2px inset silver;
}
</style>

Wyrównanie grafiki w poziomie i pionie⁸

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

div {
text-align: center;
}
div > img > a {
vertical-align: middle;
}
</style>

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze.

kod

1. Styl <style>{float:} – definiuje kierunek oblewania obrazka lub obiektu przez tekst. Wartości stylu mogą być równe: none – brak oblewania, left – obrazek znajduje się z lewej strony a oblewany jest z prawej strony, right – obrazek znajduje się po prawej stronie i oblewany jest z lewej strony.
2. Selektor dziecka - selektor postaci element(rodzic) > element(dziecko).
3. Styl <style>{margin:} – definiuje marginesy zewnętrzne. Podanie 4 wartości określa odpowiednio górny, prawy, dolny i lewy odstęp.
4. Style <style>{width:} i <style>{height:} – definiują szerokość i wysokość grafiki (zamiast atrybutów). Wartości określają liczbę w odpowiednich jednostkach.
5. Styl <style>{padding:} - definiuje margines wewnętrzny. Podanie 1 wartości określa wszystkie takie same.
6. Styl <style>{outline:} - definiuje obrys elementu. Wartością jest styl linii : grubość typ kolor.
7. Styl <style>{border:} - definiuje obramowani. Wartość none usuwa je.
8. Styl <style>{vertical-align:} - definiuje wyrównywanie elementu w pionie.

Formatowanie menu

Obramowanie lewe¹, prawe² górne³ i dolne⁴

W elemencie style dodaj kod.

<style type="text/css">
ul, ul li {
list-style: none;
margin: 0;
padding: 0;
}
</style>

Zapisz zmiany i odśwież podgląd w przeglądarce.

Styl obramowania: rozmiar⁵, kolor⁶ i styl linii⁷.

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

a {
display: block;
border-width: 4px;
border-color: silver;
padding: 2px;
text-decoration: none;
color: rgb(0,0,0);
}
a:link {
border-style: groove;
}
a:visited {
border-style: ridge;
}
a:hover {
border-style: inset;
}
a:active {
border-style: outset;
}

Wskazanie elementu⁸

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

p:hover {
outline: 1px solid silver;
}

Aktywacja elementu⁹

W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd w przeglądarce.

p:active {
border:  1px solid red;
}

Wgrywanie plików na serwer

Umieść plik formatowanieobramowania.htm na serwerze.

1. Styl <style>{border-left:} - definiuje obramowanie lewe. Wartość może być równa: rozmiar styl i kolor linii.
2. Styl <style>{border-right:} - definiuje obramowanie prawe. Wartość może być równa: rozmiar styl i kolor linii.
3. Styl <style>{border-top:} - definiuje obramowanie górne. Wartość może być równa: rozmiar styl i kolor linii.
4. Styl <style>{border-bottom:} - definiuje obramowanie dolne. Wartość może być równa: rozmiar styl i kolor linii.
5. Styl <style>{border-width:} – definiuje rozmiar lini.
6. Styl <style>{border-color:} – definiuje kolor lini. Wartością jest color.
7. Styl <style>{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).
8. Pseudoklasa :hover - element wskazany.
9. Pseudoklasa :active - element aktywny y.