Come applicare e gestire bordo e outline nei CSS.

Proprieta border e outline nei CSS.

Bordo nei CSS  è una o più linee che circondano il contenuto dell'elemento comprendendo anche lo spazio fra il contenuto e il bordo che viene gestito dalla proprietà   padding . Il bordo di un elemento viene creato per mezzo di proprietà dorder

Invece lo stile del bordo si specifica  con altre tre proprietà dei CSS come : la forma del bordo , il colore e la larghezza.

Come creare un bordo per un elemento in  HTML usando proprietà CSS

0. Bordo in CSS viene creato attraverso la proprieta border

Sinatssi: {border:1px solid black}

border

1. Stile o forma del bordo border-style

Per default il bordo  viene sempre disegnato sopra lo sfondo di un elemento HTML . Lo stile del bordo determina la sua visualizzazione, senza uno stile il bordo non sara nemmeno visibile. Per definire stile del  bordo  su tutte le parti contemporaneamente  si utilizza la proprietà  border-style e per assegnare bordo solo su parti selezionati si utilizzano le  proprietà  che precisano la parte di assegnazione come per esempio   border-top-style, border-left-style e cosi via.  La proprietà non si eredita.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Valore:  
none Valore per default. Significa assenza del bordo. Nonché rimuove bordo all'elemento dal gruppo di elementi che possiedono bordo come proprietà..
hidden Uguale a none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}

Assegnazione simultaneo di quattro diversi stili di bordo per un elemento, solo la proprietà border-style: border-style:
{border-style: solid dotted none dotted;}

initial Ritorna il valore della proprietà al valore di default
inherit Valore della proprietà vene ereditata dal elemento genitore.

Sintassi

p {border-style: solid;}
p {border-top-style: solid;}

Guarda anche il video dal nostro corso gratuito "Linguaggio CSS"

video prevui

2. Colore del bordo border-color.

La proprietà imposta il colore del bordo su tutti i lati contemporaneamente. Con le precisazioni  della proprietà è possibile impostare un colore di bordo diverso per ogni lato dell'elemento . Se il colore del bordo  non è specificato, avra lo stesso  colore del testo del elemento. Se  elemento non possiede al suo interno del  testo, il colore del bordo sarà uguale al colore del testo dell'elemento genitore. Non si ereditata.

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Valore:  
transparent Imposta colore trasparente del bordo. La allegrezza del bordo rimane. Si possa usare per cambiare colore al passaggio del mouse, per evitare spostamento dell'elemento con il bordo.
Colore Colore del bordo viene assegnato tramite proprietà color che è comune nei CSS
{border-color: #cacd58;}
{1,4}
Assegnazione simultaneo di quattro diversi colori per i quatro lati del bordo bordo del elemento, solo la proprietà border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initial Ritorna il valore della proprietà al valore di default
inherit Valore della proprietà vene ereditata dal elemento genitore.

Sintassi

p {border-color: #cacd58;}

3. Spessore della bordo border-width

Spessore di bordo vene impostato in valori numerici o con le parole chiave. Se per la proprietà  border-style è impostato valore none, e poi impostiamo qualsiasi spessore del bordo allora  lo spessore del bordo sara uguale a zero e il bordo non sara visualizzato. Non si eredita.

border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)
Valore:  
thin / medium / thick Parole chiave che impostano la larghezza del bordo uno rispetto all'altro. Il primo valore crea il bordo piu spesso del secondo e il secondo piu spesso del terzo. valore di default — medium
width (px, em, %)
{border-width: 5px;}
{1,4}
Possibilità di assegnazione simultanea quatro spesori deversi del bordo allo stesso elemento, soltanto per la proprietàborder-width:
{border-width: 5px 10px 15px 3px;}
initial Ritorna il valore della proprietà al valore di default .
inherit Valore della proprietà vene ereditata dal elemento genitore .

Sintassi

p {border-width: 2px;}

4. Scrittura abbreviata delle proprietà border.

Proprietà border consente di unire e scrivere insieme le seguenti proprietà: border-width, border-style, border-color, per esempio:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;/* spesore stile e colore del bordo in un unica stringa  */}

 In questo caso gli stessi valori sparano applicati a tutti i 4 lati dell'elemento contemporaneamente. Se alcuni di valori non vengono specificate, saranno sostituiti da valori di default.

5.Assegnare un bordo ad un solo lato dell'elemento.

Nel caso in cui è necessario specificare diversi tipi di bordi per un elemento, è possibile utilizzare la scrittura abbreviata  per il lato corrispondente.
Le seguenti proprietà possono essere  combinati in un unica stringa : border-width, border-style e border-color. L'elenco delle proprietà vano specificate in un ordine prestabilito, in cui possono essere omessi uno o due valori, in questo caso  valore mancante sarà sostituito dal valore di default.
Stile del bordo del lato superiore  viene  definito dalla proprietà border-top, quella inferiore - border-bottom, sulla  sinistra - border-left, e sulla destra – border-right.

Sintassi

p {border-top: 2px solid grey;}

6. Il bordo esterno - outline

La proprietà specifica il bordo esterno attorno agli elementi (cioè, al di fuori dei confini abituali). L'obiettivo principale di questa struttura è di  evidenziare  un elemento. Diversamente dalla proprietà border, l'uso di questa struttura non influenza le dimensioni o la posizione dell'elemento, poiché outline  viene visualizzato sopra l'elemento block.   

Inoltre, outline  a differenza dal bordo circonda sempre l'elemento su tutti i lati.

Outline  ha sempre una forma rettangolare, non ripete le certe proprieta del border come per esempio border-radius.

La proprieta outline: poside tre valori che potrano essere indicati anche con la scrittura abbreviata e sono   outline-color, outline-style, outline-width . Se alcuni dei valori non sono specificate, verrànno utilizzati quelli di default.

Sintassi  

div {
width: 100px; 
height: 100px; 
outline: #cacd58 solid 2px;
}

6.1. Stili della proprieta outline.

Visualizzazione della proprietà outline e simile ad elemento border. Non si eredita.

outline-style
Valore :
none Valore di default. Outline non presente.
hidden Uguale a none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
initial Ritorna il valore della proprietà al valore di default
inherit Valore della proprietà vene ereditata dal elemento genitore.

Sintassi

p {outline-style: ridge;}

6.2. Il colore del outline: outline-color

Il colore del outline può essere attribuito soltanto se è stato atribuito ouline-style Non si eredita
Sintassi

p {
outline-style:groove #DB1A1A 8px;
outline-color: #DB1A1A;
}

Letto 1303 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso