Inne działy

 

 

CSS – obramowanie (borders)

 

Właściwość border pozwala określić, jak powinno wyglądać obramowanie pola reprezentującego element. Istnieją trzy właściwości, które można zmienić:

  • border-color  określa kolor obramowania.
  • border-style  określa, czy obramowanie powinno być solid (stałe), dashed line (kreskowana linia), double line (podwójne linia) lub jedną z innych możliwych wartości.
  • border-width  określa szerokość obramowania.

Teraz zobaczymy jak stosować te właściwości za pomocą przykładów.

 

Właściwość border-color:

Własność border-color pozwala na zmianę koloru obramowania wokół elementu. Indywidualnie można zmienić kolor dolnej, lewej, górnej i prawej krawędzi obramowania elementu za pomocą właściwości:

  • border-bottom-color zmienia kolor dolnego obramowania.
  • border-top-color zmienia kolor górnego obramowania.
  • border-left-color zmienia kolor lewego obramowania.
  • border-right-color zmienia kolor prawego obramowania.

Oto przykład, który pokazuje działanie wszystkich tych właściwości:

 

<style type="text/css">
p.przyklad1{
   border:1px solid;
   border-bottom-color:#009900; /* Zielony */
   border-top-color:#FF0000;    /* Czerwony */
   border-left-color:#330000;   /* Czarny */
   border-right-color:#0000CC;  /* Niebieski */
}
p.przyklad2{
   border:1px solid;
   border-color:#009900;        /* Zielony */
}
</style>
<p class="przyklad1">
Ten przykład pokazuje wszystkie granice w różnych kolorach.
</p>
<p class="przyklad2">
Ten przykład pokazuje wszystkie granice w zielonym kolorze.
</p>

 

 Właściwość border-style:

Własność border-style pozwala wybrać jeden z następujących stylów obramowania:

  • none: Brak obramowania. (Odpowiednik border-width:0;)
  • solid: Obramowaniem jest jedna ciągła linia.
  • dotted: Obramowanie to szereg punktów.
  • dashed: Obramowanie to seria krótkich linii.
  • double: Obramowanie to dwie linie ciągłe.
  • groove: Obramowanie wygląda jakby było wyryte na stronie.
  • ridge: Obramowanie wygląda jak przeciwieństwo groove.
  • inset: Obramowanie sprawia, że pole wygląda na osadzone na stronie.
  • outset: Obramowanie sprawia, że element wygląda jakby pochodził z płótna.
  • hidden: Tak samo jak none, oprócz border-conflict dla elementów tabeli.

 

Indywidualnie można zmienić styl dolnej, lewej, górnej i prawej krawędzi elementu za pomocą następujących właściwości:

  • border-bottom-style zmienia styl dolnej krawędzi.
  • border-top-style zmienia styl górnej krawędzi.
  • border-left-style zmienia styl lewej krawędzi.
  • border-right-style zmiany stylu prawej krawędzi.

Oto przykład, aby wyświetlić wszystkie te style obramowania:

<p style="border-width:4px; border-style:none;">
To jest krawędź z szerokością zero.
</p>
<p style="border-width:4px; border-style:solid;">
To jest solid obramowanie.
</p>
<p style="border-width:4px; border-style:dashed;">
To jest dahsed obramowanie.
</p>
<p style="border-width:4px; border-style:double;">
To jest double obramowanie.
</p>
<p style="border-width:4px; border-style:groove;">
To jest groove obramowanie.
</p>
<p style="border-width:4px; border-style:ridge">
To jest ridge obramowanie.
</p>
<p style="border-width:4px; border-style:inset;">
To jest inset obramowanie.
</p>
<p style="border-width:4px; border-style:outset;">
To jest outset obramowanie.
</p>
<p style="border-width:4px; border-style:hidden;">
To jest hidden obramowanie.
</p>
<p style="border-width:4px; 
             border-top-style:solid;
             border-bottom-style:dashed;
             border-left-style:groove;
             border-right-style:double;">
To jest obramowanie w czterech różnych stylach.
</p>

 Poniżej wynik działania kodu:

To jest krawędź z szerokością zero.

To jest solid obramowanie.

To jest dahsed obramowanie.

To jest double obramowanie.

To jest groove obramowanie.

To jest ridge obramowanie.

To jest inset obramowanie.

To jest outset obramowanie.

To jest hidden obramowanie.

To jest obramowanie w czterech różnych stylach.

 

Właściwość border-width:

Właściwość border-width pozwala ustawić szerokość obramowania elementu. Wartość tej właściwości może być albo długość w px, pt lub cm lub powinna być ustawiona na thin (cieńkie), medium (średnie) lub thick (grube).

Indywidualnie można zmienić szerokość dolnej i górnej, lewej, prawej krawędzi elementu za pomocą następujących właściwości:

  • border-bottom-width zmienia szerokość dolnej krawędzi.
  • border-top-width zmienia szerokość górnej krawędzi.
  • border-left-width zmienia szerokość lewej krawędzi.
  • border-right-width zmienia szerokość prawej krawędzi.

Poniżej znajduje się przykład, który pokazuje wszystkie powyższe właściwości obramowania:

<p style="border-width:4px; border-style:solid;">
To jest obramowanie w postaci ciągłej linii, której szerokość jest 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
To jest obramowanie w postaci ciągłej linii, której szerokość jest 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
To jest obramowanie w postaci ciągłej linii, której szerokość jest thin (cienka).
</p>
<p style="border-width:medium; border-style:solid;">
To jest obramowanie w postaci ciągłej linii, której szerokość wynosi medium  (średnia).
</p>
<p style="border-width:thick; border-style:solid;">
To jest obramowanie w postaci ciągłej linii, której szerokość jest thick (gruba).
</p>
<p style="border-bottom-width:4px;
             border-top-width:10px;
             border-left-width: 2px;
             border-right-width:15px;
             border-style:solid;">
Jest to obramowanie z czterech różnych szerokości.
</p>

 Poniżej wynik działania kodu:

To jest obramowanie w postaci ciągłej linii, której szerokość jest 4px.

To jest obramowanie w postaci ciągłej linii, której szerokość jest 4pt.

To jest obramowanie w postaci ciągłej linii, której szerokość jest thin (cienka).

To jest obramowanie w postaci ciągłej linii, której szerokość wynosi medium (średnia).

To jest obramowanie w postaci ciągłej linii, której szerokość jest thick (gruba).

Jest to obramowanie z czterech różnych szerokości.

 

Właściwości border przy użyciu skrótów:

Właściwość border pozwala określić kolor, styl i szerokość linii w jednej właściwości:

Oto przykład, który pokazuje jak korzystać ze wszystkich trzech właściwości w jednej właściwości. Jest to najczęściej używana właściwość, aby ustawić obramowanie dowolnego elementu.

<p style="border:4px solid red;">
W tym przykładzie jest wyświetlany skrót dla krawędzi.
</p>

 Poniżej wynik działania kodu:

W tym przykładzie jest wyświetlany skrót dla krawędzi.

 

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.