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>>
