Come impostare due confini di un elemento / Myclads.com

Come impostare due confini di un elemento

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.

istruzione

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:"

.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.

Consigli e avvertenze

È inoltre possibile regolare padding, margini e altre proprietà dei bordi CSS (vedi Risorse). Tweak queste proprietà per personalizzare l'aspetto di un elemento della pagina che si adatta alle vostre obiettivi di progettazione.
Dal momento che è stata definita proprietà di confine nel CSS anziché il codice HTML, è possibile modificare gli stili di confine senza toccare il codice HTML. Ad esempio, per cambiare il colore del bordo del primo comma al giallo, sostituire "rosso" con "giallo" nel significato CSS che di punto.