December 28
Divisioni (<div>) nelle sezioni dividono HTML della pagina per scopi di styling. L'aggiunta di un tag <div> per il codice della pagina web HTML crea un'interruzione di linea naturali o contenitore separato. Div contengono contenere elementi di livello di blocco, elementi come <h1> e <p>, e in linea. Il testo non può estendersi due div. Styling un paragrafo con due div differenti crea due blocchi separati di testo.
La soluzione è quella di utilizzare un tag <span>. Il tag <span> è molto simile al tag <div> in quanto separa aree della pagina per lo styling, tranne che può contenere solo elementi in linea. Utilizzare <span> per cambiare gli stili all'interno di un paragrafo, una sola riga di testo o di una sola parola.
1 Aprire l'editor HTML e creare la pagina HTML. Inserire il seguente codice per creare la pagina:
<Html>
<Head>
<style type="text/css">
& Lt; / style>
</ Head>
<Body>
<div id= "content">
& Lt; p> Ciao, World & lt;! / P>
& Lt; / div>
</ Body>
</ Html>
Il tag <html> crea la pagina web. Il tag <head> contiene la meta-dati e in linea styling della pagina, ma non viene visualizzata sullo schermo. Il tag <style> dice al browser come per lo stile della pagina. Il browser legge e visualizza tutto tra i tag <body>. Il tag <div> crea un contenitore per il testo. Il tag <p> fa un paragrafo. Utilizzare "Ciao, mondo!" come il testo segnaposto per questo esercizio.
2 Inserire lo stile tra i tag <style>. Questa pagina sarà lo stile del div "contenitore" e "Ciao, mondo!" Il contenitore sarà il 50 per cento della larghezza dello schermo. "Ciao mondo!" avrà due stili. "Ciao," è caratteri rossi e "World!" è fonte verde. Il simbolo cancelletto (#) rappresenta "id" per il div e il punto (.) Davanti a "ciao" e "mondo" rappresenta "classe".
<Style type = "text / css">
contenitore{
width: 50%;
}
.Ciao{
colore rosso;
}
.mondo{
colore: verde;
}
</ Style>
3 Aggiungere i tag span intorno "Ciao" e "World!" rispettivamente. Inserire il nome della classe dopo "span". Il tag di paragrafo (<p>) non ha una classe o un id perché non è stato designato in questo esercizio. browser Internet creano blocchi per paragrafi per impostazione predefinita.
<Div id = "contenitore>
<p>
<Span class = "ciao"> "Ciao, </ span> <span class =" mondo "> Mondo! </ Span>
</p>
</ Div>
4 Salvare il documento come "HelloWorld.html". Fare clic sulla nuova pagina per aprirlo in un browser per verificare la presenza di eventuali errori.