Nwlapcug.com


Come impostare due bordi di un elemento

Web designer utilizzano i bordi per separare gli elementi dal loro ambiente. Frontiere aggiungono interesse visivo alle pagine Web e catturano l'attenzione dei visitatori del sito. Nei primi giorni di pubblicazione sul Web, gli sviluppatori aggiunti bordi ai siti Web codificando parametri di bordo direttamente nel codice HTML. Oggi, è possibile utilizzare Cascading Style Sheets, comunemente chiamato CSS, aggiungere due o più bordi a elementi della pagina Web senza alterare il codice HTML.

Istruzioni

1

Aprire il blocco note e creare un nuovo documento. Aggiungere il seguente codice HTML al documento:

< html >

<! - capo sezione di iniziare... >

< head >

<! - titolo sezione iniziare... >

&lt;title>&lt;/title>

<!-- aggiungere codice CSS qui sotto... >

< / head >

<! - termina la sezione di testa... >

<! - sezione corpo di iniziare... >

< corpo >

< classe p = "topBottom" > questo paragrafo ha un bordo sinistro e destro </p >

< classe p = "leftRight" > questo paragrafo ha un bordo sinistro e destro </p >

< / body >

<! - fine sezione del corpo - >

< / html >

Questo crea due paragrafi. Ogni paragrafo fa riferimento a una classe CSS.

2

Aggiungere il seguente codice CSS dopo la riga che legge, "aggiungere CSS codice riportato di seguito:"

< style type = "text/css" >

.topBottom {border-rosso massello top: 2px; border-bottom: 2px solid red;}

.leftRight {border-blu punteggiato di sinistra: 2px; border-destra: 2px punteggiato verde;}

< / stile >

Queste sono le classi CSS. I due paragrafi del documento "< body >" sezione fanno riferimento a queste classi. La prima classe, "topBottom," aggiunge bordi rossi ai bordi superiore e inferiore del primo paragrafo. La classe "leftRight" aggiunge bordi punteggiati di verdi ai bordi sinistro e destro del secondo paragrafo. I bordi hanno una larghezza di 2 pixel.

3

Premere "CTRL" e "S" per aprire la finestra "Salva con nome". Digitare "Test_Add_Borders.html" nel campo "Nome File" e premere "Invio" per salvare il file in una cartella di vostra scelta.

4

Aprire Esplora risorse e individuare il file. Fare doppio clic su esso per aprirlo nel browser. Verificare che ogni paragrafo ha due bordi definiti nel codice CSS.

Consigli & Avvertenze

  • È inoltre possibile regolare la spaziatura interna, margine e altri CSS confine proprietà (Vedi risorse). Modificare queste proprietà per personalizzare l'aspetto di un elemento di pagina che si adatta il tuo obiettivi di progettazione.
  • Poiché definito proprietà del bordo nel CSS anziché il codice HTML, è possibile modificare gli stili dei bordi senza toccare il codice HTML. Ad esempio, per modificare confine colore del primo paragrafo giallo, sostituire "rosso" con "giallo" nella definizione di CSS di quel paragrafo.