Stile CSS rende facile applicare bordi agli elementi delle pagine HTML, da grandi blocchi di tipo tutto il senso giù singole parole. Per inserire un bordo intorno a una parola nel testo, utilizzare il tag < span > per definire la parola per uno stile in linea e quindi utilizzare attributi di confine per conferirgli l'aspetto desiderato.
Il codice
Avviare racchiudendo la parola che si desidera evidenziare in una coppia di tag < span >. In questo esempio, useremo la parola "confine":
C'è un < span > confine < / span > intorno a una di queste parole.
Ora è possibile aggiungere uno stile di bordo in base al tag di apertura < span >:
C'è un < span style = "border: 1px solid black;" > bordo < / span > intorno a una di queste parole.
Salvare il file e aprirlo in un browser web. Vedete una piccola scatola nera intorno alla parola "confine."
Attributi
Vesti il tuo confine con attributi. Bordi HTML hanno tre attributi: larghezza, colore e stile. Larghezza può essere impostato a un numero esatto di pixel, o semplicemente come "sottile", "medio" o "spessa". Colore può essere espresso come un valore RGB, un valore esadecimale o uno dei colori standard 16 web (aqua, nero, blu, fucsia, grigio, verde, lime, maroon, navy, oliva, viola, rosso, argento, teal, bianco e giallo). Includono opzioni di stile del bordo solido, punteggiate, tratteggiate e doppie, oltre a quattro stili che danno un effetto 3D: groove, ridge, inset e outset.
I tre attributi possono essere applicati utilizzando la proprietà di "frontiera", come illustrato nella sezione 1. Per ottenere un bordo tratteggiato 4 pixel, rosso, ad esempio, si sarebbe imposta lo stile come:
C'è un < span style = "border: 4px rossa tratteggiata;" > bordo < / span > intorno a una di queste parole.
I tre attributi possono essere elencati in qualsiasi ordine; hanno solo bisogno di venire tutti dopo i due punti e prima il punto e virgola. Non inserire virgole o altri segni di punteggiatura tra di loro.
Parziale delle frontiere
Utilizzare i bordi parziali per personalizzare ulteriormente l'aspetto del tuo sito. Ogni bordo ha quattro lati: superiore, inferiore, sinistro e destro. È possibile impostare gli attributi di ogni lato singolarmente utilizzando il bordo-top, border-bottom, proprietà border-left e bordo destro. Ad esempio, che si desidera il bordo da sezione 2 a essere verde fisso sul fondo ma tratteggiato rosso dappertutto. Devi solo aggiungere una proprietà border-bottom:
C'è un < span style = "border: 4px rossa tratteggiata; border-bottom: 4px tinta verde; " > bordo < / span > intorno a una di queste parole.
Quando si modificano i confini in questo modo, sempre iniziare con lo stile del bordo completo, quindi applicare attributi ai lati individuali.