Inne działy

 

 

CSS - kontury (outlines)

 

Kontury są bardzo podobne do obramowania, ale istnieje kilka ważnych różnic pomiędzy obramowaniem i konturem:

  • Kontur nie zajmuje miejsca, jego wymiary nie są dodawane do szerokości czy wysokości elementu.
  • Kontury nie muszą być prostokątne.
  • Kontur jest zawsze taki sam na wszystkich stronach; nie można określić różnych wartości dla różnych stron elementu.

Uwaga: Właściwość outline nie jest obsługiwana przez IE 6 lub Netscape 7.

Można ustawić następujące wartości dla właściwości outline za pomocą CSS.

  • Właściwość outline-width jest używane do określania szerokości konturu.
  • Właściwość outline-style jest używana do ustawienia stylu linii dla konturu.
  • Właściwość outline-color jest używane do określenia koloru konturu.
  • Właściwość outline jest używana do określenia wszystkich powyższych właściwości w pojedynczej instrukcji.

 

Właściwość outline-width:

Właściwość outline-width określa szerokość konturu, jakie mogą być dodane do elementu. Jego wartość powinna być liczbą lub jedną z wartości thin (cienka), medium (średnia), lub thick (gruba). Podobnie jak atrybut border-width

Szerokość o wartości zerowej oznacza brak konturu.

Oto przykład:

 

<p style="outline-width:thin; outline-style:solid;">
Ten tekst ma thin (cienki) kontur.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
Ten tekst ma thick (gruby) kontur.
</p>
<br />
<p style="outline-width:5px; outline-style:solid;">
Ten tekst ma kontur o grubości 5px.
</p>

 Poniżej wynik działania kodu:

Ten tekst ma thin (cienki) kontur.


Ten tekst ma thick (gruby) kontur.


Ten tekst ma kontur o grubości 5px.

 

Właściwość outline-style:

Właściwość outline-style określa styl linii (solid (ciągła), dotted (kropkowana) lub dasched  przerywana), która znajduję się wokół elementu. To można wykonać jedną z następujących wartości:

  • none: Brak obramowanie. (Odpowiednik outline-width:0;)
  • solid: Kontur jest linią ciągłą pojedynczą.
  • dotted: Kontur składa się z serii kropek.
  • dashed: Kontur to seria krótkich linii.
  • double: Konur składa się z dwóch linii ciągłych.
  • groove: Kontur wygląda jakby był wyryty na stronie.
  • ridge: Kontur wygląda jak przeciwieństwo groove.
  • inset: Kontur sprawia, że wygląda jak osadzone na stronie pudełko.
  • outset: Kontur sprawia, że pudełko wygląda jak pochodzące z płótna.
  • hidden: Tak samo jak none.

Oto przykład:

 

<p style="outline-width:thin; outline-style:solid;">
Ten tekst ma kontur w postaci cienkiej ciągłej linii.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;">
Ten tekst ma kontur w postaci grubego obramowania kreskowanego.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
Ten tekst ma kontur o szerokości 5px w postaci kropkowanego obramowana.
</p>

 Poniżej wynik działania kodu:

Ten tekst ma kontur w postaci cienkiej ciągłej linii.


Ten tekst ma kontur w postaci grubego obramowania kreskowanego.


Ten tekst ma kontur o szerokości 5px w postaci kropkowanego obramowana.

 

Właściwość outline-color:

Właściwość outline-color pozwala określić kolor konturu. Jego wartość powinna być nazwę koloru, albo w postaci szesnastkowej lub wartości RGB, podobnie jak w przypadku właściwości color i border-color.

Oto przykład:

 

<p style="outline-width:thin; outline-style:solid;
             outline-color:red">
Ten kontur ma cienką ciągłą linię czerwoną.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
             outline-color:#009900">
Ten kontur ma grubą przerywaną zieloną linię.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
             outline-color:rgb(13,33,232)">
Ten kontur ma szerokość 5px w postaci niebieskich kropek.
</p>

  Poniżej wynik działania kodu:

Ten kontur ma cienką ciągłą linię czerwoną.


Ten kontur ma grubą przerywaną zieloną linię.


Ten kontur ma szerokość 5px w postaci niebieskich kropek.

 

Właściwość outline:

Właściwość outline jest skróconą własnością, która pozwala na określenie wartości dla każdej z trzech właściwości omówionych wcześniej w dowolnej kolejności, ale w pojedynczej instrukcji.

Oto przykład:

 

<p style="outline:thin solid red;">
Ten kontur ma cienką ciągłą linię czerwoną.
</p>
<br />
<p style="outline:thick dashed #009900;">
Ten kontur ma grubą przerywaną zieloną linię.
</p>
<br />
<p style="outline:5px dotted rgb(13,33,232);">
Ten kontur ma szerokość 5px w postaci niebieskich kropek.
</p>

 Poniżej wynik działania kodu:

Ten kontur ma cienką ciągłą linię czerwoną.


Ten kontur ma grubą przerywaną zieloną linię.


Ten kontur ma szerokość 5px w postaci niebieskich kropek.

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.