Programma del corso

Tutorial avanzato CSS

• Libro esterno CSS
• Introduzione a CSS
• Sintassi di base di CSS
• Sintassi avanzata di CSS
• Selettore deriva di CSS
• Selettore id di CSS
• Selettore classe di CSS
• Creazione di CSS
• Sfondo di CSS
• Testo di CSS
• Caratteri di CSS
• Elenco di CSS

Modello di casella CSS

• Panoramica del modello di frame CSS
• Marge interna di CSS
• Bordo di CSS
• Marge esterna di CSS
• Unione delle margini di CSS

Posizionamento CSS

• Panoramica della posizione di CSS
• Posizione relativa di CSS
• Posizione assoluta di CSS
• Flottante di CSS

Selettore CSS

• Selettore di elemento di CSS
• Gruppo di selettori CSS
• Dettagli del selettore classe CSS
• Dettagli del selettore id CSS
• Dettagli del selettore attributo CSS
• Selettore discendente di CSS
• Selettore figlio di CSS
• Selettore fratello successivo di CSS

Corso a scelta

Raccomandazione del corso:

• Cassetto magico CodeW3C.com

Il bordo dell'elemento (border) è una o più linee che circondano il contenuto dell'elemento e il margine interno.

L'attributo border CSS ti permette di definire lo stile, la larghezza e il colore del bordo dell'elemento.

Bordo di CSS

In HTML, utilizziamo tabelle per creare bordi intorno al testo, ma utilizzando le proprietà di bordo CSS, possiamo creare bordi con un effetto straordinario e applicarli a qualsiasi elemento.

All'interno del margine esterno dell'elemento c'è il bordo dell'elemento (border). Il bordo dell'elemento è una o più linee che circondano il contenuto dell'elemento e il margine interno.

Ogni bordo ha tre aspetti: larghezza, stile e colore. Nei prossimi paragrafi, ti spiegheremo questi tre aspetti in dettaglio.

Bordo e sfondo

La specifica CSS indica che il bordo viene disegnato 'sopra lo sfondo dell'elemento'. Questo è molto importante perché alcuni bordi sono 'interrotti' (ad esempio, bordi a punteggiatura o a tratteggio), e lo sfondo dell'elemento dovrebbe apparire tra le parti visibili del bordo.

CSS2 indica che lo sfondo si estende solo fino al margine interno, non al bordo. CSS2.1 ha corretto questo: lo sfondo dell'elemento è lo sfondo del contenuto, del margine interno e dell'area del bordo. La maggior parte dei browser segue la definizione di CSS2.1, ma alcuni browser più vecchi potrebbero avere un comportamento diverso.

Stile del bordo

È uno dei aspetti più importanti del bordo, non perché lo stile controlla la visualizzazione del bordo (certamente, lo stile di fatto controlla la visualizzazione del bordo), ma perché senza uno stile, non ci sarebbe nemmeno un bordo.

Lo stile CSS Proprietà border-styleSono stati definiti 10 stili diversi non-inherit, inclusi none.

Ad esempio, puoi definire il bordo di un'immagine come outset, in modo che sembri un pulsante 'elevato':

a:link img {border-style: outset;}

Definire più stili

Puoi definire più stili per un bordo, ad esempio:

p.aside {border-style: solid dotted dashed double;}

La regola di sopra definisce quattro stili di bordo per i paragrafi con il nome della classe 'aside': bordo superiore in linea, bordo destro a punteggiatura, bordo inferiore a tratteggio e bordo sinistro a doppio.

Di nuovo, vediamo che qui il valore segue l'ordine di top-right-bottom-left, e anche questo ordine è stato visto quando si impostano più valori per impostare diverse margini interne.

Definire lo stile unilaterale

Se desideri impostare lo stile del bordo di un lato della casella dell'elemento, anziché impostare lo stile del bordo di tutti e 4 i lati, puoi utilizzare le proprietà di bordo unilaterale di seguito:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Quindi, questi due metodi sono equivalenti:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Attenzione:Se si desidera utilizzare il secondo metodo, è necessario posizionare le proprietà di singolo lato dopo le proprietà abbreviate. Poiché se le proprietà di singolo lato vengono posizionate prima di border-style, il valore della proprietà abbreviata coprirà il valore di singolo lato none.

Larghezza della cornice

Puoi impostare Proprietà border-widthSpecificare la larghezza della cornice.

Ci sono due modi per specificare la larghezza della cornice: puoi specificare un valore di lunghezza, come 2px o 0.1em; o utilizzare una delle tre chiavi di parole, che sono thin, medium (valore predefinito) e thick.

Nota:CSS non definisce la larghezza specifica di 3 chiavi di parole, quindi un agente utente può impostare thin, medium e thick rispettivamente come uguale a 5px, 3px e 2px, mentre un altro agente utente li impostare rispettivamente come 3px, 2px e 1px.

Quindi, possiamo impostare la larghezza della cornice in questo modo:

p {border-style: solid; border-width: 5px;}

O

p {border-style: solid; border-width: thick;}

Definire la larghezza di un solo lato

Puoi impostare la larghezza di ciascun lato dell'elemento nell'ordine top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

L'esempio precedente può anche essere abbreviato (questo modo di scrittura si chiamaValore di copia)

p {border-style: solid; border-width: 15px 5px;}

Puoi anche impostare la larghezza di ciascun lato della cornice tramite le seguenti proprietà:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Quindi, le seguenti regole sono equivalenti agli esempi precedenti:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Nessuna cornice

Nel esempio precedente, hai già visto che per visualizzare un certaine cornice, è necessario impostare lo stile della cornice, ad esempio solid o outset.

Allora, cosa succede se si imposta border-style su none?

p {border-style: none; border-width: 50px;}

Nonostante la larghezza del bordo sia di 50px, lo stile del bordo è impostato su none. In questo caso, non solo lo stile del bordo scompare, ma anche la larghezza diventa 0. Il bordo scompare, perché?

Questo è perché se lo stile del bordo è none, ovvero il bordo non esiste, il bordo non può avere larghezza, quindi la larghezza del bordo viene impostata automaticamente su 0, indipendentemente da ciò che hai definito prima.

È molto importante ricordare questo. In effetti, dimenticare di dichiarare lo stile del bordo è un errore comune. Secondo le seguenti regole, tutti gli elementi h1 non avranno alcun bordo, tanto meno 20 pixel di larghezza:

h1 {border-width: 20px;}

Poiché il valore predefinito di border-style è none, se non si dichiara uno stile, è equivalente a border-style: none.Quindi, se desideri che il bordo sia visibile, devi dichiarare uno stile di bordo.

Colore del bordo

Impostare il colore del bordo è molto semplice. CSS utilizza un valore semplice Proprietà border-coloraccetta fino a 4 valori di colore.

Puoi utilizzare qualsiasi tipo di valore di colore, ad esempio può essere un colore nome, un valore esadecimale o un valore RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Se il valore del colore è inferiore a 4, viene applicato il valore di copia. Ad esempio, la dichiarazione di regola seguente assegna al bordo superiore e inferiore del paragrafo un colore blu e ai bordi laterali un colore rosso:

p {
  border-style: solid;
  border-color: blue red;
  }

Nota:Il colore di default del bordo è il colore di primo piano dell'elemento. Se non si dichiara un colore per il bordo, esso sarà lo stesso del colore del testo dell'elemento. D'altra parte, se l'elemento non ha alcun testo, ad esempio se è una tabella che contiene solo immagini, il colore del bordo di questa tabella è il colore del testo dell'elemento genitore (poiché il colore può essere ereditato). Questo elemento genitore è probabilmente body, div o un altro table.

Definire il colore unilaterale

Ci sono anche proprietà di colore di bordo unilaterale. Il loro principio è lo stesso dello stile e della larghezza unilaterale:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Per assegnare un bordo nero continuo all'elemento h1 e un bordo rosso continuo alla destra, puoi farlo così:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Bordo trasparente

Abbiamo parlato di questo prima, se non c'è stile di bordo, non c'è larghezza. Tuttavia, ci sono casi in cui potresti voler creare un bordo invisibile.

CSS2 ha introdotto il valore di colore del bordo trasparente. Questo valore serve a creare un bordo invisibile di larghezza. Ecco un esempio:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Abbiamo definito i seguenti stili per i link superiori:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Prova tu stesso

In un certo senso, utilizzare transparent, impostare la bordatura è come aggiungere un padding interno in più; inoltre, c'è anche un vantaggio, ovvero la possibilità di renderla visibile quando necessario. Questa bordatura trasparente è equivalente al padding interno, perché il background dell'elemento si estende fino all'area della bordatura (se c'è un background visibile).

Punti importanti:Prima di IE7, IE/WIN non offriva il supporto per transparent. Nei vecchi versione, IE impostava il colore della bordatura in base al valore del colore dell'elemento.

Proprietà dei bordi CSS

Strumenti

Manuale di riferimento CSS

Esempi CSS

Test CSS

Corso CSS

Link sponsorizzati