In questo capitolo:
Sintassi degli elementi
Elemento HTML è l'unità strutturale di base di una pagina web, scritta in linguaggio HTML. L'immagine seguente mostra la sintassi degli elementi. Per la maggior parte dei tag, la sintassi dell'elemento avrà lo stesso aspetto, ad eccezione dei singoli tag.
Tutti gli elementi in HTML seguono lo stesso formato:
- L'elemento inizia con un tag di inizio.
- L'elemento termina con un tag di chiusura.
- Il contenuto di un elemento è tutto ciò che si trova tra i tag di apertura e chiusura.
- Alcuni elementi non hanno contenuto (elementi vuoti).
- La maggior parte degli elementi può contenere attributi
Nota: non dimenticare di inserire il simbolo "" nel tag di chiusura / ", dice al browser che il tuo elemento è terminato e che quello che verrà scritto dopo è già un altro elemento.
Elementi vuoti
Ci sono diversi elementi in HTML che non hanno un tag di chiusura, come o
. Tali elementi sono chiamati vuoto perché non contengono alcun contenuto e non hanno un tag di chiusura.
Elementi annidati
Tutti i documenti HTML sono costituiti da elementi annidati. La maggior parte di essi può contenere altri elementi o possono essere annidati all'interno di altri elementi, mentre la profondità di annidamento degli elementi non è limitata.
L'esempio seguente ha tre elementi, due dei quali sono nidificati:
Il mio primo paragrafo
Quando si posiziona un elemento all'interno di un altro, è necessario fare attenzione che l'elemento nidificato inizi e termini all'interno dello stesso elemento. Quindi, il seguente esempio non è corretto:
Questo molto
interessanteGli elementi block e inline si completano perfettamente a vicenda nel layout, occupando ciascuno la propria nicchia specifica. Ma ci sono casi in cui le caratteristiche di questi elementi chiaramente non sono sufficienti. La galleria fotografica presentata in fig. 3.28 è costituito da sezioni che includono un'immagine con una didascalia, mentre le sezioni si allineano orizzontalmente, occupando l'intera larghezza disponibile. Quando la finestra del browser viene ridotta, le sezioni si spostano su un'altra riga.
Riso. 3.28. Galleria fotografica
Se usi il tag per formare sezioni
HTML non ha un tag che fa riferimento agli elementi inline-block, puoi definirne uno impostando la proprietà di visualizzazione dell'elemento su inline-block .
Div ( display: blocco in linea; )
Le caratteristiche di questi elementi sono le seguenti.
- È possibile inserire elementi di testo, in linea o di blocco all'interno di elementi di blocco in linea.
- L'altezza dell'elemento viene calcolata automaticamente dal browser in base al contenuto del blocco.
- La larghezza è uguale al contenuto più valori di riempimento, margine e bordo.
- Diversi elementi in una riga si trovano su una riga e, se necessario, vengono trasferiti su un'altra riga.
- È possibile allineare verticalmente con la proprietà vertical-align.
- È consentito impostare la larghezza e l'altezza.
- L'effetto di compressione del riempimento non funziona.
Per creare la galleria mostrata in Fig. 3.28 per tag
(esempio 3.18).
Esempio 3.18. Utilizzo del display
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Cattedrale di Santa Sofia
Chiesa polacca
club mercantile
Monumento a San Vladimir
Poiché tutte le foto hanno le stesse dimensioni, la larghezza del blocco è impostata esplicitamente su 150px, ma l'altezza non è specificata, quindi se la didascalia dell'immagine è lunga, l'altezza delle sezioni sarà diversa (Fig. 3.29).
Riso. 3.29. Altezze delle sezioni
Questo non è un problema, poiché le sezioni verranno comunque visualizzate in file ordinate, nonostante le diverse altezze. Allo stesso tempo, puoi modificare il tipo di allineamento tramite vertical-align aggiungendo questa proprietà alla classe foto. Se si specifica il valore top , la visualizzazione delle sezioni cambierà (Fig. 3.30).
Riso. 3.30. Allineamento superiore
Il problema principale è il browser IE fino alla versione 7.0 inclusa. Questo browser applica il valore inline-block solo agli elementi inline e non funziona correttamente con gli elementi block. Per convincere questo browser a visualizzare correttamente il nostro esempio, dobbiamo usare inline invece di inline-block e impostare la proprietà hasLayout. L'aggiunta in linea interromperà il layout in altri browser, quindi giusta decisione ne approfitterà commenti condizionali(esempio 3.19).
Esempio 3.19. Stile per IE
Il costrutto significa applicare il codice specificato per il browser IE versione 7.0 e precedenti. Altri browser lo trattano come un commento e lo ignorano. Per quanto riguarda la proprietà zoom, non è standard e serve per impostare la proprietà hasLayout, che non può essere impostata direttamente.
È anche conveniente utilizzare elementi inline-block per vari cataloghi di prodotti che si trovano nei negozi online. Di solito vengono visualizzati con un'immagine e una didascalia. È tutto simile alla galleria sopra, quindi tutto ciò che resta è modificare il suo codice per tenere conto dell'allineamento dell'altezza e del comportamento di IE (esempio 3.20).
Esempio 3.20. Catalogare
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Video 1856
foto 315
Dispositivi mobili 2109
Computer e apparecchiature per ufficio 4296
Elettrodomestici 731
Risultato questo esempio mostrato in fig. 3.31.
Riso. 3.31. Catalogare
Per non chiedere ogni tag
Esistono due categorie principali di elementi HTML che corrispondono ai loro tipi di contenuto e comportamento nella struttura di una pagina web − bloccare e elementi in linea. Usando gli elementi di blocco, puoi creare la struttura di una pagina web, gli elementi in linea sono usati per la formattazione frammenti di testo(esclusi gli elementi e ).
La divisione degli elementi in block e inline viene utilizzata nelle specifiche HTML precedenti alla versione 4.01. In HTML5, questi concetti sono stati sostituiti da un insieme più complesso di , che richiede che ogni elemento HTML debba seguire regole che determinano quale contenuto è consentito per esso.
Modello di formattazione visiva CSS
1. Modello di formattazione visiva
Il modello di formattazione visiva CSS è un algoritmo che elabora un documento HTML e lo visualizza sullo schermo del dispositivo. Questo modello trasforma ogni elemento del documento in modo che generi zero o più riquadri rettangolari secondo il modello di riquadri CSS. La posizione di queste caselle nella pagina è determinata dai seguenti fattori:
- la dimensione dell'elemento (tenendo conto se sono impostati esplicitamente o meno);
- tipo di elemento (linea o blocco);
— schema di posizionamento (flusso normale, elementi posizionati o flottanti);
- relazioni tra elementi nel DOM;
— dimensioni interne delle immagini contenute;
- informazioni esterne (ad esempio, la dimensione della finestra del browser).
La posizione e le dimensioni delle scatole di ciascun elemento sono calcolate rispetto ai bordi di una scatola rettangolare, le cosiddette "blocco contenente"(blocco contenente). La dimensione di una scatola non è limitata dalla dimensione del blocco contenitore, quindi in determinate condizioni può andare oltre i suoi confini.
2. Modello a blocchi
Nel modello box, un elemento viene trattato come un contenitore rettangolare che ha un'area contenuto e bordi e spazi interni opzionali (interno ed esterno). La proprietà display determina il tipo di contenitore dell'elemento. Ogni elemento ha un valore del browser predefinito.
Riso. 1. Modello a blocchi dell'elemento Area del contenutoè il contenuto dell'elemento, come testo o immagine.
Rientro impostato dalla proprietà di riempimento. Il riempimento è la distanza tra il contenuto principale e il suo bordo (frame). Se imposti uno sfondo per un elemento, verrà applicato anche ai margini dell'elemento. L'indentazione non può assumere valori negativi, a differenza dell'indentazione esterna.
Imbottitura esterna impostato dalla proprietà margin. Aggiunge una distanza all'esterno dell'elemento dal bordo esterno della cornice agli elementi vicini, separando così gli elementi sulla pagina. Il riempimento è sempre trasparente e mostra lo sfondo dell'elemento padre attraverso di esso.
I valori di riempimento e margine sono impostati nel seguente ordine: in alto, a destra, in basso e a sinistra.
Frontiera, o il bordo di un elemento, viene specificato utilizzando la proprietà border. Se non viene specificato alcun colore del bordo, assume il colore del contenuto principale dell'elemento, come il testo. Se la cornice presenta degli spazi vuoti, lo sfondo dell'elemento verrà visualizzato attraverso di essi.
Il riempimento, il riempimento e il bordo dell'elemento sono facoltativi; il loro valore predefinito è zero. Tuttavia, alcuni browser aggiungono valori predefiniti positivi a queste proprietà in base ai loro fogli di stile. Puoi cancellare gli stili del browser per tutti gli elementi utilizzando il selettore universale:
* ( margine: 0; riempimento: 0; )
3. Elementi di blocco e contenitori di blocchi
Blocca elementi- elementi di primo livello che sono formattati visivamente come blocchi, posizionati verticalmente sulla pagina nella finestra del browser. Visualizza i valori delle proprietà come block , list-item e table make elementi a livello di blocco. Gli elementi a livello di blocco generano un blocco principale che contiene solo il blocco di elementi. Elementi impostati da visualizzare: list-item genera ulteriori elenchi puntati posizionati rispetto al riquadro principale.
,