Come fare un confine HTML Utilizzando DIV

July 31

Come fare un confine HTML Utilizzando DIV


Quando si progettano e costruire pagine web HTML, è possibile definire il contenuto e l'aspetto. Utilizzando HTML in abbinamento con i CSS, o Cascading Style Sheets, è possibile creare gli elementi della pagina Web con stili specifici applicati. CSS consente di definire diverse proprietà di stile, comprese le frontiere. Quando si dichiara le proprietà del bordo di un elemento, come un "div" in HTML, è possibile specificare lo stile del bordo, larghezza e colore. È anche possibile impostare il confine di apparire in modo diverso su ognuno dei quattro lati dell'elemento.

istruzione

1 Crea la tua pagina HTML. Aprire un nuovo file in un editor di testo e salvarlo con ".html" come estensione. Inserire il seguente schema di codice:

<Html>

<Head>

</ Head>

<Body>

<Div class = "style1"> <p> stile Div 1 </ p> </ div>

<Div class = "style2"> <p> stile Div 2 </ p> </ div>

</ Body>

</ Html>

Tale struttura crea una pagina Web di base con due elementi "div" in esso per la dimostrazione.

2 Creare regole CSS per la tua pagina. Aprire un altro nuovo file in un editor di testo e salvarlo come "borderstyle.css" o qualsiasi altro nome che preferite, fino a quando si utilizza l'estensione "css". Inserire il seguente codice CSS:

div.style1 {

border-style: solido;

border-width: 2px;

border-color: # FF0000;}

div.style2 {

border: 5px doppio # 0000FF;}

Questo codice imposta lo stile, larghezza e colore dei bordi per ciascuna delle due classi "div" nella pagina. Nel primo stile, ogni proprietà border è dichiarata separatamente, mentre nel secondo la sintassi abbreviata viene utilizzato per impostare tutte le proprietà in una singola dichiarazione.

3 Aggiungere un collegamento alle dichiarazioni CSS nella pagina Web. Utilizzando la seguente sintassi, collegare il codice HTML e CSS, aggiungendo tra l'apertura e chiusura tag "head":

<Link rel = "stylesheet" type = "text / css" href = "borderstyle.css" />

Se è stato salvato il file CSS con un nome diverso, modificare tale codice all'interno l'attributo "href" per riflettere il nome scelto. Aprire la pagina Web in un browser per vedere l'effetto delle dichiarazioni di stile.

4 Aggiungere un altro elemento "div" nella vostra pagina. Inserire il seguente codice prima del tag di chiusura "testa" della tua pagina:

<Div class = "style3"> <p> stile Div 3 </ p> </ div>

5 Aggiungere dichiarazioni di stile aggiuntive al file CSS:

div.style3 {

border-left: 3px tratteggiato # 00FF00;

border-top: spessore scanalatura # FFFF00;

border-right: sottile crinale # 00FFFF;

border-bottom: media inserto # FF00FF;}

Questo codice imposta diverse proprietà del bordo per ogni lato del nuovo "div", dimostrando le possibili impostazioni si può optare per.

6 Aggiungere le proprietà per padding e margini all'interno del codice CSS. Il box model nei CSS determina dove compare il confine in relazione ad altre proprietà degli elementi. L'area elemento viene immediatamente circondata da un'imbottitura, allora il confine, poi un'area per margini esterni che. Aggiungere la seguente ad uno dei vostri CSS stili "div" per vedere l'effetto di queste proprietà:

padding: 10px;

margin: 5px;

Quando si prova la vostra pagina in un browser, vedrete che l'area tra il contenuto dell'elemento e il confine - così come la distanza tra l'elemento e la pagina circostante - è aumentato.

Consigli e avvertenze

  • Utilizzare i bordi CSS per rendere le aree di testo in contenuto HTML più facilmente leggibile, dividendo una pagina in sezioni chiare.
  • CSS appare in modo diverso tra i vari browser, quindi è meglio per testare le vostre pagine in più di una.

Articoli Correlati