Cascading Style rende facile applicare i bordi di elementi su pagine HTML, da grandi blocchi di tipo tutta la strada fino alle singole parole. Per inserire un bordo intorno a una parola nel testo, utilizzare i tag <span> per definire la parola per uno stile in linea, e quindi utilizzare attributi confine per dare l'aspetto desiderato.

Il codice

Inizia racchiudendo la parola che si desidera evidenziare in una coppia di tag <span>. Per questo esempio, useremo la parola "confine":

C'è un <span> confine </ span> intorno a una di queste parole.

Ora aggiungere uno stile del bordo di base per l'apertura tag <span>:

C'è un <span style = "border: 1px solid black;"> confine </ span> intorno a una di queste parole.

Salvare il file e aprirlo in un browser web. Si vede una piccola scatola nera intorno alla parola "confine".

attributi

Vesti il ​​tuo confine con gli attributi. confini HTML hanno tre attributi: larghezza, colore e lo stile. Larghezza può essere impostato a un numero esatto di pixel, o semplicemente come "sottile", "medio" o "di spessore". Il colore può essere espresso come un valore RGB, un valore esadecimale, o uno dei colori standard 16 web (acqua, nero, blu, fucsia, grigio, verde, lime, marrone, blu scuro, verde oliva, viola, rosso, argento, verde acqua, bianco e giallo). opzioni di stile Border includono solida, tratteggiata, tratteggiata, e doppia, più quattro stili che danno un effetto 3-D: scanalatura, cresta, inserto, e fin dall'inizio.

I tre attributi possono essere applicati tramite la proprietà "confine", come illustrato nella Sezione 1. Per ottenere un 4-pixel, rossa tratteggiata di frontiera, ad esempio, si potrebbe impostare lo stile come:

C'è un <span style = "border: 4px rossa tratteggiata;"> confine </ span> intorno a una di queste parole.

I tre attributi possono essere elencati in qualsiasi ordine; hanno solo bisogno di tutti vengono dopo i due punti e prima della virgola. Non mettere virgole o qualsiasi altra punteggiatura tra di loro.

Borders parziali

Utilizzare i confini parziali per personalizzare ulteriormente l'aspetto del tuo sito. Ogni confine ha quattro lati: in alto, in basso, a sinistra ea destra. È possibile impostare gli attributi di ciascun lato singolarmente utilizzando il border-top, border-bottom, border-sinistra, e le proprietà border-right. Per esempio, diciamo che si desidera che il confine dalla sezione 2 per essere verde fisso sul fondo, ma tratteggiata rossa ovunque. Si potrebbe solo aggiungere una proprietà border-bottom:

C'è un <span style = "border: 4px rossa tratteggiata; border-bottom: 4px verde fisso;"> confine </ span> intorno a una di queste parole.

Quando si modifica i confini in questo modo, iniziare sempre con lo stile del bordo completo, quindi applicare attributi alle singole parti.