CSS

Style linków

  • każdy link
a:link
  • link odwiedzony
a:visited
  • link, nad którym znajduje się kursor
a:hover
  • link, który w danym momencie jest naciskany
a:active

Ważna jest kolejność: LoVe HAte

Elementy blokowe i elementy inline

Elementy blokowe:

zabierają całą dostepną dla niego długość, wymuszają nową linię przed i po

display:block;
  • p
  • body
  • div
  • form
  • h1..h6
  • ul, ol, li
Elementy inline:

zabierają tylko tyle przestrzeni ile potrzebuje i nie wymuszają nowej lini

display:inline;
  • a
  • img
  • br
  • input
W praktyce:
  • elementy blokowe są wyświetlane jeden nad drugim
  • elementy inline są wyświetlane jeden obok drugiego
  • body i form mogą zawierać tylko elementy blokowe
  • paragrafy mogą zawierać tylko elementy inline
  • elementy blokowe mogą zawierać zarówno elementy inline jak i inne elementy blokowe
  • elementy inline mogą zawierać tylko inne elementy inline

Div. Div a span.

<div> -> element blokowy służący do grupowania elementów strony.
<span> -> element inline służący do grupowania elementów strony.

Model pudełkowy

Własności css sterujące położeniem:

  • odleglość między krawędzią pudełka, a zawartością
padding
  • obramowanie
border
  • odległość między krawędzią pudełka, a otoczeniem
margin
  • wysokość
height
  • szerokość
width

Wersja 2D

boxdim.gif

Wersja 3D

3d-box-model.png

Zadanie 06:

* wyzerowac padding i margin body dokumentu oraz nadać odpowiednie wartości wybranym elementom blokowym strony
* umieścic na stronie wycentrowany element wzorując się na poniższym:

div.png

* przygotować przycisk nakladając styl na <a>

  • przycisk charakteryzuje się:
    • ladnym kolorem tła
    • wypuklością zwykle i wklęslością w momencie naciskania
    • zmianą koloru wtedy kiedy jest nad nim kursor
  • przydatna wlasciwość: text-decoration:none;

! wszystkie pliki należy umieścić na swoim koncie ftp

deadline: 12.04.2008
punkty: 3

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy