Stylowanie linków

Comments Off

Linki mogą być stylizowane każdą właściwością CSS (np. color, font-family, background, etc.)

Linki występują w czterech formach:

  •     : link – normalny, nieodwiedzony link
  •     : visited – link który użytkownik odwiedził
  •     : hover – link nad którym użytkownik przesunął myszkę
  •     : active – link, który użytkownik klika

Przykład:
a:link {color:#FF0000;}      /* nieodwiedzony link */
a:visited {color:#00FF00;}  /* odwiedzony link */
a:hover {color:#FF00FF;}  /* myszka and linkiem */
a:active {color:#0000FF;}  /* wybrany link */

Typowe stylowanie linków:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Oczywiście właściwości te można połączyć:
a:link {text-decoration:none; background-color:#B2FF99;}
a:visited {text-decoration:none; background-color:#FFFF85;}
a:hover {text-decoration:underline; background-color:#FF704D;}
a:active {text-decoration:underline; background-color:#FF704D;}

Written by admin in: css | Comments Off | More >>

Horizontal Align – Wyrównanie poziome

Comments Off

Wyrównywanie bloków

Element bloku jest elementem, który zajmuje całą szerokość dokumentu, np.:

<h1>
<p>
<div>

Wyrównywanie do środka

Elementy bloku mogą być wyrównane poprzez lewy i prawy margines ustawiając go na “auto”.

Uwaga: Korzystanie z marginesu: auto nie działa w IE8 i wcześniejszych wersjach, chyba że zadeklarowany jest DOCTYPE.

Ustawianie lewego i prawego marginesu na auto mówi przeglądarce, że margines należy podzielić jednakowo. Rezultatem takiej definicji jest wyśrodkowany cały element, np.:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Wyrównanie do lewej lub prawej strony:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Written by admin in: css | Comments Off | More >>

Margines

Comments Off

Właściwość Margines

Margines jest odległością od jednego elementu HTML do następnego.

Margines można wyrażać w wartościach relatywnych (em, %) i absolutnych (10px).

  margin-top: 15px; (góra)
  margin-left: 10px ; (lewa strona)
  margin-right: 15px; ( prawa strona)
  margin-bottom: 10px; (dół)

Aby uniknąć nadmiernie długiego kodu, powyższy przykład można zapisać:

  margin: 15px 10px 15px 10px;

Jeśli określi się jedynie jedną wartość dla marginesu, dotyczy ona wszystkich stron:

#container {
  width: 40%;
  margin: 15px ;
  padding: 20px;
  border: 1px solid #eee;
  background: #ffffff;
}

Written by admin in: css | Comments Off | More >>