Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Interfejs użytkownika

Email Drukuj PDF

Tematy: Kursory | Kontury elementów

Druga specyfikacja kaskadowych arkuszy stylów wprowadza możliwość kontroli wyglądu elementów stanowiących część interfejsu użytkownika. Dzięki nowym stylom można:

  • kontrolować wygląd kursorów,

  • kontrolować kontury elementów,

  • pobierać ustawienia kolorów z komputera użytkownika.

Kursory

cursor

Dostępne wartości:

auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | inherit

Wartość domyślna:

auto

Przykład:

a {cursor:help;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Korzystając ze stylu cursor, można określić wygląd kursora znajdującego się nad formatowanym elementem, np. hiperłączem.

<ul>

<li><a href="http://helion.pl" style="cursor:auto;">Styl kursora - auto</a></li>

<li><a href="http://helion.pl" style="cursor:crosshair;">Styl kursora - crosshair</a></li>

<li><a href="http://helion.pl" style="cursor:default;">Styl kursora - default</a></li>

<li><a href="http://helion.pl" style="cursor:pointer;">Styl kursora - pointer</a></li>

<li><a href="http://helion.pl" style="cursor:move;">Styl kursora - move</a></li>

<li><a href="http://helion.pl" style="cursor:e-resize;">Styl kursora - e-resize</a></li>

<li><a href="http://helion.pl" style="cursor:ne-resize;">Styl kursora - ne-resize</a></li>

<li><a href="http://helion.pl" style="cursor:nw-resize;">Styl kursora - nw-resize</a></li>

<li><a href="http://helion.pl" style="cursor:n-resize;">Styl kursora - n-resize</a></li>

<li><a href="http://helion.pl" style="cursor:se-resize;">Styl kursora - se-resize</a></li>

<li><a href="http://helion.pl" style="cursor:sw-resize;">Styl kursora - sw-resize</a></li>

<li><a href="http://helion.pl" style="cursor:s-resize;">Styl kursora - s-resize</a></li>

<li><a href="http://helion.pl" style="cursor:w-resize;">Styl kursora - w-resize</a></li>

<li><a href="http://helion.pl" style="cursor:text;">Styl kursora - text</a></li>

<li><a href="http://helion.pl" style="cursor:wait;">Styl kursora - wait</a></li>

<li><a href="http://helion.pl" style="cursor:help;">Styl kursora - help</a></li>

<li><a href="http://onet.pl" style="cursor:progress;">Styl kursora - progress</a></li>

</ul>

<<przykład>>

<div class="przyklad">

<ul>

<li><a href="http://helion.pl" style="cursor:auto;">Styl kursora - auto</a></li>

<li><a href="http://helion.pl" style="cursor:crosshair;">Styl kursora - crosshair</a></li>

<li><a href="http://helion.pl" style="cursor:default;">Styl kursora - default</a></li>

<li><a href="http://helion.pl" style="cursor:pointer;">Styl kursora - pointer</a></li>

<li><a href="http://helion.pl" style="cursor:move;">Styl kursora - move</a></li>

<li><a href="http://helion.pl" style="cursor:e-resize;">Styl kursora - e-resize</a></li>

<li><a href="http://helion.pl" style="cursor:ne-resize;">Styl kursora - ne-resize</a></li>

<li><a href="http://helion.pl" style="cursor:nw-resize;">Styl kursora - nw-resize</a></li>

<li><a href="http://helion.pl" style="cursor:n-resize;">Styl kursora - n-resize</a></li>

<li><a href="http://helion.pl" style="cursor:se-resize;">Styl kursora - se-resize</a></li>

<li><a href="http://helion.pl" style="cursor:sw-resize;">Styl kursora - sw-resize</a></li>

<li><a href="http://helion.pl" style="cursor:s-resize;">Styl kursora - s-resize</a></li>

<li><a href="http://helion.pl" style="cursor:w-resize;">Styl kursora - w-resize</a></li>

<li><a href="http://helion.pl" style="cursor:text;">Styl kursora - text</a></li>

<li><a href="http://helion.pl" style="cursor:wait;">Styl kursora - wait</a></li>

<li><a href="http://helion.pl" style="cursor:help;">Styl kursora - help</a></li>

<li><a href="http://helion.pl" style="cursor:progress;">Styl kursora - progress</a></li>

</ul>

 

</div>

<</przykład>>

Kontury elementów

Kontury są wykorzystywane do podkreślenia widoczności elementu na stronie. Specyfikacja umożliwia kontrolę następujących właściwości konturów:

  • koloru,

  • stylu,

  • grubości.

Kontury nie są obsługiwane przez przeglądarkę MS Internet Explorer.

Na pierwszy rzut oka kontury wyglądają dokładnie tak samo jak obramowanie zdefiniowane za pomocą stylów border. Jednak pomiędzy oboma elementami jest zasadnicza różnica polegająca na tym, że kontur przypisywany jest dla całego elementu i nie może być rozbity na prawy, górny, lewy i dolny bok.

Kolor konturu

outline-color

Dostępne wartości:

definicja koloru | inherit

Wartość domyślna:

-

Przykład:

a {outline-color:green;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, Chrome, Safari

Do zdefiniowania koloru konturu służy styl o nazwie outline-color. Wartość koloru jest określana w taki sam sposób, jak w przypadku opisanego wcześniej stylu color. Poniżej znajduje się przykład wykorzystania konturu w kolorze zielonym dla odnośnika.

<a href=”http://helion.pl” style=”outline-color:green;”>helion.pl</a>

<<przykład>>

<div class="przyklad">

<a href="http://helion.pl" style="outline-color:green;outline-style:solid;">Odnośnik z konturem w kolorze zielonym</a>

</div>

<</przykład>>

Styl konturu

outline-style

Dostępne wartości:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Wartość domyślna:

none

Przykład:

a {outline-style:dashed;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, Chrome, Safari

Do zdefiniowania stylu konturu służy styl o nazwie outline-style. Wygląd konturu jest określany za pomocą tych samych wartości, co w przypadku opisanego wcześniej stylu border-style. Poniżej znajduje się przykład wykorzystania konturu z linią przerywaną dla odnośnika.

<a href=”http://helion.pl” style=”outline-style:dashed;”>

<<przykład>>

<div class="przyklad">

<a href="http://helion.pl" style="outline-color:green;outline-style:solid;outline-style:dashed;">Odnośnik z konturem w kolorze zielonym</a>

</div>

<</przykład>>

Grubość konturu

outline-width

Dostępne wartości:

none | wartości liczbowe | wartości procentowe | thin | medium | thick | inherit

Wartość domyślna:

medium

Przykład:

a {outline-width:5px;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, Chrome, Safari

Do zdefiniowania grubości konturu służy styl o nazwie outline-width. Grubość konturu jest określana za pomocą tych samych wartości, co w przypadku opisanego wcześniej stylu border-width. Poniżej znajduje się przykład wykorzystania konturu o grubości 5 pikseli dla odnośnika.

<a href=”http://helion.pl” style=”outline-width:5px;”>

<<przykład>>

<div class="przyklad">

<a href="http://helion.pl" style="outline-color:green;outline-style:solid;outline-style:dashed;outline-width:5px;">Odnośnik z konturem w kolorze zielonym</a>

</div>

<</przykład>>

Zbiorczy zapis właściwości konturu

outline

Dostępne wartości:

wartości stylów: outline-color | outline-style | outline-width

Wartość domyślna:

Sprawdź indywidualne wartości

Przykład:

a {outline:green dashed 5px;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, Chrome, Safari

Style definiujące wygląd konturów mogą zostać zapisane w sposób zbiorczy. Przykład odpowiedniej konstrukcji znajduje się poniżej.

<a href=”http://helion.pl” style=”outline:green dashed 5px;”>

<<przykład>>

<div class="przyklad">

<a href="http://helion.pl" style="outline:green dashed 5px;">Odnośnik z konturem w kolorze zielonym</a>

</div>

<</przykład>>

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 10406942