July 12
Web designer usano i confini per separare gli elementi dal loro ambiente. Bordi aggiungono interesse visivo alle pagine Web e catturare l'attenzione dei visitatori del sito. Nei primi giorni di pubblicazione sul Web, gli sviluppatori aggiunto confini per siti web codificando i parametri di confine direttamente nel codice HTML. Oggi, è possibile utilizzare i fogli di stile a cascata, comunemente chiamato CSS, aggiungere due o più confini di elementi della pagina Web senza alterare il codice HTML.
1 Aprire il Blocco note e creare un nuovo documento. Aggiungere il seguente codice HTML al documento:
<Html>
<! - Begin Sezione Head ->
<Head>
<! - Begin Titolo Sezione ->
<title></title>
<! - Aggiungere codice CSS Sotto ->
</ Head>
<! - Capo Sezione End ->
<! - Begin Sezione Corpo ->
<Body>
<P class = "TopBottom"> Questo paragrafo ha un bordo sinistro e destro </ p>
<P class = "leftright"> Questo paragrafo ha un bordo sinistro e destro </ p>
</ Body>
<! - Fine Sezione Corpo ->
</ Html>
Questo crea due paragrafi. Ogni paragrafo fa riferimento a una classe CSS.
2 Aggiungere il seguente codice CSS dopo la riga che dice "Aggiungere codice CSS In basso:"
<Style type = "text / css">
.topBottom {border-top: 2px solid red; border-bottom: 2px solid red; }
.leftRight {border-left: 2px tratteggiata blu; border-right: 2px verde tratteggiata; }
</ Style>
Si tratta di classi CSS. I due paragrafi nella sezione del documento del "<body>" si riferiscono a queste classi. La prima classe, "TopBottom", aggiunge solidi bordi rossi ai bordi superiore e inferiore del primo comma. La classe "leftright", aggiunge punteggiato i bordi verdi ai bordi sinistro e destro del secondo comma. I confini hanno una larghezza di 2 pixel.
3 Premere il tasto "Ctrl" e "S" per aprire la "Salva con nome" finestra. Tipo "Test_Add_Borders.html" nel campo "Nome file" e premere "Invio" per salvare il file in una cartella di propria scelta.
4 Aprire Esplora risorse e individuare il file. Fare doppio clic su di esso per aprirlo nel browser. Verificare che il ogni paragrafo ha due confini definiti nel codice CSS.