Browsed by
Month: June 2012

Odnośniki

Odnośniki

Większość przeglądarek pokazuje linki w kolorze niebieskim z podkreśleniem i zmianą koloru linków odwiedzonych, chyba że powiesz im, że mają to zrobić inaczej.Oto właściwości często używane z linkami:
color: zmienia kolor odnośników
background-color: kolor tła za tekstem odnośnika
text-decoration: dekoracja, czyli na przykład podkreślenie odnośnika

Choć możesz po prostu tworzyć reguły, które odnoszą się do elementu <a> Aby ustawić właściwości takie jak kolor i text-decoration, istnieją również cztery pseudo-klasy, które mogą dać większą kontrolę nad prezentacją linków:
Link, visited, hover, active

Korzystanie z tych pseudo-klas pozwala na zmianę właściwości odnośników, gdy użytkownik znajdzie się nad nimi (co zmienia je na nieco inny kolor, może doda podkreślenie), a także właściwości połączenia, które zostały odwiedzone (na przykład zmiana na nieco inny kolor – który pomaga użytkownikom wiedzieć, gdzie już byli).

body {background-color:#ffffff;} a{
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited {
color:#333399;
text-decoration:none;}
a:link:hover {
background-color:#e9e9e9;
text-decoration:underline;}
a:active {
color:#0033ff;
text-decoration:underline;}

Właściwości tekstu

Właściwości tekstu

Większość czcionek ma różne odmiany, takie jak pogrubienie i kursywa. Kiedy pisarze tworzą nową czcionkę, nie jest niczym niezwykłym dla nich indywidualnie spreparowanie oddzielnej, grubszej wersji każdego znaku dla grubszej odmiany.

Pomimo całej tej dokładnej pracy, przeglądarki mają tendencję do korzystania z algorytmu, który normalną wersję czcionki po prostu pogrubia. Ponieważ przeglądarki wykorzystują algorytm, to znaczy, że można również tworzyć węższą wersję czcionek. To do tego służy właściwość font-weight.

Możliwe wartości dla font-weight to:

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

Poniższy przykład używa kilku różnych wartości:

p.one {font-weight:normal;}
p.two {font-weight:bold;}
p.three {font-weight:normal;}
p.three span {font-weight:bolder;}
p.four {font-weight:bold;}
p.four span {font-weight:lighter;}
p.five {font-weight:100;}
p.six {font-weight:200;}