Buona giornata, fedeli lettori e abbonati. L'attuale pubblicazione è dedicata a analisi dettagliata Argomenti: "Blocca layout di pagina CSS reattivo". In questo articolo ti dirò cosa significa layout a blocchi, quali sono i suoi vantaggi e quali strumenti vengono utilizzati per questo.

Inoltre, condividerò la mia conoscenza di alcuni semplici approcci per l'implementazione della reattività e il backup di tutte le descrizioni. esempi specifici... Bene, iniziamo a imparare!

Fruste e panpepato

Il layout a blocchi delle pagine Web è un metodo per contrassegnare le pagine in blocchi (livelli) creati utilizzando un tag speciale < div>.

Inizialmente, gli sviluppatori hanno utilizzato il layout della tabella, ma è sbiadito in secondo piano dopo la comparsa del tipo descritto. Perché è successo? Questo perché la stratificazione delle pagine ha un elenco abbastanza ampio di vantaggi e solo un paio di svantaggi. Diamo un'occhiata più da vicino a ciascuno di essi.

Pan di zenzero delizioso

Ridurre la quantità di codice. Quando si utilizzavano le tabelle come posizionamento strutturato del contenuto e dei controlli del sito, c'erano alcuni tag nidificati nel documento html, in cui anche gli sviluppatori esperti si confondevano.

Quando si utilizzano i blocchi, questo problema viene eliminato. Il codice contiene un piccolo numero di div, ognuno dei quali è regolato da regole di stile attraverso la classe prescritta. Ad esempio:

…

…

…

Gestione flessibile della struttura. A causa del fatto che ogni strato è responsabile di una certa classe, è diventato possibile ridefinire rapidamente e senza danni ad altri blocchi aspetto esteriore selezionato, spostalo nella pagina Web o cambia la visualizzazione. Inoltre, il layout dei blocchi consente di risolvere compiti impegnativi con posizionamento non standard dei livelli.

Un vantaggio significativo perSEO. Nelle viste tabulari, tutto il contenuto del servizio web è stato distribuito alle celle, il che complica notevolmente il lavoro robot di ricerca... Usando lo stesso disposizione dei blocchi questo problema anche osato.

Tutto il contenuto del sito è diviso in blocchi per significato, che sono firmati usando le classi. Così programmi di ricerca facile da trovare informazione necessaria ed eseguire l'indicizzazione. Ciò significa che il sito si alza quando i risultati vengono visualizzati su query di ricerca.

Capacità di creare design adattivo pagine web. Per chi ancora non sapesse cosa sia il responsive design, consiglio di leggere gli articoli rilevanti sul mio blog su questa tecnologia. Nel frattempo, dirò solo che l'adattabilità consente ai servizi di apparire uguali e attraenti su schermi con qualsiasi risoluzione, sia esso un desktop o uno smartphone.

È grazie al layout a strati che tale opportunità è diventata disponibile. Certo, richiede ulteriori conoscenze, ma ne vale la pena.

Ostacoli

L'emergere di difficoltà nello sviluppo. Rispetto al layout della tabella, è sicuramente più semplice. È sufficiente conoscere alcuni tag di base, con l'aiuto di quali tabelle vengono create, e riempire semplicemente le celle create con le informazioni.

Le cose possono diventare un po' più complicate nel markup dei blocchi. Soprattutto per un principiante. Perché devi essere esperto non solo nel codice html, ma anche per conoscere la maggior parte delle proprietà css. Tuttavia, le difficoltà sorgono solo all'inizio quando si studia la tecnologia, ma poi la vita sembrerà una favola.

Smontaggio con compatibilità cross-browser. Poiché questo approccio è apparso un po' più tardi dell'approccio tabulare, non tutte le situazioni con il suo funzionamento sono standardizzate. E quindi, a volte in browser diversi, la visualizzazione del tuo sito potrebbe apparire leggermente diversa. Per correggere le carenze, in alcuni casi sarà necessario pervertirsi.

Tecniche semplici per creare reattività

Bene, ora passiamo direttamente all'analisi di alcuni semplici meccanismi per creare un sito web responsive. Per fare ciò, creiamo un semplice layout di pagina.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

Sito web SuperAuto Galleria fotografica video Contatti Tesla Tutti i diritti riservati!

Come puoi vedere, l'aspetto della risorsa Internet creata viene visualizzato correttamente finché le dimensioni dello schermo non diventano troppo piccole. Pertanto, integriamo proprietà css alcuni parametri.

Innanzitutto, ai blocchi con le classi . intestazione, . contenitore e . piè di pagina aggiungi proprietà larghezza minima: 355px... Ora la tua pagina di contenuto si ridurrà solo a dimensione specificata, quindi verrà visualizzato uno scorrimento.

V questo esempio Non avevo bisogno di implementare la reattività per le immagini. Tuttavia, il ridimensionamento automatico delle immagini può essere ottenuto scrivendo le seguenti righe negli stili.

Innanzitutto, definiamo cos'è il markup? Come suggerisce il termine stesso, markup- questo è il posizionamento delle etichette, nel nostro caso, nel codice del documento html, ad es. pagine web. Le etichette qui sono tag che consentono di definire i confini dell'azione di markup o creare un elemento di documento HTML. Non è ancora chiaro? Quindi continua a leggere e tutto andrà a posto.

Nozioni di base sul markup HTML o cos'è un tag

Un tag è una costruzione che inizia con un segno meno (<) и заканчивающуюся знаком больше (>). La maggior parte dei tag è composta da tag di inizio e di fine. La differenza tra loro è che in tag di aperturaè possibile (se necessario) specificare un numero delle sue proprietà aggiuntive utilizzando il cosiddetto attributi, e all'inizio del nome tag di chiusura viene indicato un carattere selsh (/), ad esempio:

Testo del paragrafo giustificato a destra.

.

V in questo caso il tag del blocco p crea un paragrafo e allinea attributo corretto allineamento del contenuto del paragrafo.

Va notato che in html ci sono due tipi di tag: block e inline. Blocca tag creare un elemento di blocco, spesso rientrato sotto i seguenti elementi sono già " Con nuova linea ». Tag in linea hanno lo scopo di contrassegnare una parte di codice e non creare interruzioni di riga.

Come dice il proverbio: ci sono eccezioni a qualsiasi regola - lo stesso vale per i tag. Esistono tag che non hanno un tag di chiusura e sono destinati alla creazione di tag ed elementi di un documento HTML, ad esempio:

In questo caso, il tag string img inserisce nella pagina web un elemento sotto forma di immagine, il cui indirizzo è scritto nell'attributo src. Il valore attributo altè un testo alternativo, che viene visualizzato se l'immagine non è disponibile e l'attributo del bordo imposta lo spessore del bordo intorno all'immagine.

Per renderti più facile ricordare tutto quanto sopra, ti darò un piccolo cheat sheet visivo che puoi usare per imparare l'HTML:

Un rapido riferimento ai tag html

E così, abbiamo già incontrato due tag, quindi li ometterò. Di seguito fornirò una serie di tag di markup del documento HTML e alcuni dei loro attributi. Per cominciare, questo sarà più che sufficiente, ma se sei interessato a un elenco completo di tag html e ai loro attributi, ti consiglio di guardare il sito htmlbook.ru e anche di aggiungerlo ai tuoi segnalibri come il più completo e un comodo libro di riferimento su html e CSS. Continuiamo?

Come creare un collegamento? Per fare ciò, è necessario utilizzare il tag stringa A, che contrassegna il testo che contiene come collegamento - elemento attivo pagina Web quando si fa clic su cui l'utente può accedere a un'altra pagina Web, il cui indirizzo è specificato nell'attributo href.

Come rendere il testo in grassetto? Per fare ciò, è necessario utilizzare il tag stringa B, che imposta il testo che contiene su grassetto font.

Come faccio a rendere il testo in corsivo? Per fare ciò, è necessario utilizzare il tag I line, che imposta il testo che contiene in corsivo.

Come sottolineare il testo? Per fare ciò, è necessario utilizzare il tag U inline, che aggiunge una sottolineatura al testo che contiene.

Come barrare il testo? Per fare ciò, è necessario utilizzare il tag stringa S, che rende il testo barrato.

Come evidenziare il codice nel testo? Per fare ciò, è necessario utilizzare il tag stringa CODE, che di solito è reso in un carattere a spaziatura fissa dal browser, ad esempio Courier New.

Come formattare il codice nel testo? Per questo è necessario utilizzare blocky tag PRE che definisce il blocco codice programma, di solito visualizzato in un carattere a spaziatura fissa dal browser. A differenza del tag CODE di stringa, il tag PRE conserva gli spazi e le interruzioni di riga.

Come faccio a ingrandire il testo? Per fare ciò, è necessario utilizzare il tag BIG in linea, che aumenta la dimensione del carattere di uno rispetto al testo normale.

Come rimpicciolire il testo? Per fare ciò, è necessario utilizzare il tag in linea SMALL, che riduce la dimensione del carattere di uno rispetto al testo normale.

Come posso impostare il carattere, il colore e la dimensione del carattere nel testo? Per fare ciò, è necessario utilizzare il tag stringa FONT. Attributo del viso qui imposta il carattere tipografico (nome) del carattere, il colore è il colore del carattere e la dimensione è la sua dimensione in unità convenzionali (da -7 a 7).

Come faccio a creare un titolo? Per fare ciò, è necessario utilizzare i tag H del blocco, che definiscono le intestazioni diversi livelli, da 1 (il più grande) fino al 6 (il più piccolo), che consente di impostare la struttura delle informazioni pubblicate nella pagina web. I titoli differiscono l'uno dall'altro per la dimensione del carattere e il rientro e sono anche in grassetto.

Come faccio a creare un carattere pedice? Per fare ciò, è necessario utilizzare il tag stringa SUB, che visualizza il carattere come pedice, cioè. il testo verrà posizionato sotto la linea di base del resto dei caratteri della riga e della dimensione ridotta.

Come faccio a creare un carattere in apice? Per fare ciò, è necessario utilizzare il tag stringa SUP, che rende il carattere come apice, ad es. il testo verrà posizionato sopra la linea di base del resto dei caratteri della riga e della dimensione ridotta.

Come inserire una citazione nel testo? Per questo è necessario utilizzare tag stringa Q, che viene utilizzato per evidenziare le virgolette nel testo, che vengono visualizzate automaticamente dal browser tra virgolette.

Come formattare una citazione nel testo? Per fare ciò, è necessario utilizzare il tag di blocco BLOCKQUOTE, che serve per evidenziare le virgolette lunghe in documento html... In genere, tale testo viene visualizzato con margini di 40 pixel a sinistra ea destra e padding in alto e in basso.

Come fare un'interruzione di riga nel testo? Per fare ciò, è necessario utilizzare il tag di blocco BR, che imposta un avanzamento riga in cui si trova questo tag. A differenza del tag paragrafo p, l'utilizzo del tag br non aggiunge rientri vuoti prima della riga.

Come creare un livello in html? Per questo è necessario utilizzare blocky tag DIV che crea uno strato senza imbottitura.

Come creare un separatore nel testo? Per fare ciò, è necessario utilizzare il tag del blocco HR che disegna il separatore linea orizzontale. Attributo colore imposta il colore della linea, la dimensione - la dimensione e noshade - disabilita l'effetto 3D.

Come fare una lista? Esistono due tipi principali di elenchi in html: numerati ( OL) ed etichettato ( UL)... In questo caso, dato codice html elenco puntato dato da tag di blocco UL. Per impostazione predefinita, un cerchio viene utilizzato come indicatore. (cerchio pieno) che appare all'inizio della prima riga della voce di elenco, dato dal tag LI.

Ovviamente nel mio articolo ho dato solo il principale tag html di cui potresti aver bisogno quando esegui il markup della tua pagina web. Nella maggior parte dei casi, per il markup CTML, questo è più che sufficiente. L'unica cosa che ho omesso, ma che è certamente importante quando si contrassegnano le pagine Web, è lavorare con le tabelle. Devono essere studiati separatamente, perché ci sono troppe sfumature e l'articolo si è rivelato piuttosto grande così com'è. Questo è tutto per me. Grazie per l'attenzione. Buona fortuna!

La cui traduzione è presentata di seguito specialmente per i lettori di Habr.

Nonostante tutte le straordinarie funzionalità dei CSS, non sono sufficienti per implementare i principi fondamentali del markup della pagina. Ma, caratteristiche aggiuntive per creare di più pagine dinamiche stanno già cominciando ad apparire.

Dopo anni di promesse, CSS3 è finalmente riuscito nello styling. Ha aggiunto un sacco di nuovi strumenti al nostro arsenale, offrendoci angoli arrotondati, sfumature, trasparenza, trasformazioni di elementi, animazioni e altro ancora. Cos'altro può soddisfare il nostro occhio?

Il prossimo problema CSS è il markup. Fino ad ora, l'abbiamo fatto usando float, posizioni relative e trucchi per il riempimento negativo, che sono stati tutti difficili da implementare per far sembrare il risultato un markup standard a 2 o 3 colonne.

Il W3C e i produttori di browser sono consapevoli di questi problemi e stanno lavorando su una serie di soluzioni. Il leader tra questi è (non a caso) Internet Explorer. Sembra che IE10 sarà un presagio nuova era Markup CSS che ti consentirà di creare siti fantastici, dinamici e attraenti utilizzando opportunità prima irraggiungibili.

In questo articolo, l'autore esamina metodi diversi markup che vorrei utilizzare in determinate fasi di sviluppo, da quelle già implementate a quelle puramente teoriche. Potremmo non essere in grado di usarli tutti in futuro (almeno non nella forma attuale), ma vale la pena dare un'occhiata a questi metodi per capire il futuro del markup CSS.

Altoparlanti

La distribuzione del contenuto su più colonne è un elemento di stampa di base e il modulo CSS Multi-Columns fornisce la stessa funzionalità per il web. Puoi usare due metodi per creare colonne, ognuno di loro usa varie proprietà(elemento genitore). Nel primo caso viene specificato direttamente il numero di colonne tra le quali si vuole distribuire il testo. Ad esempio, questo codice creerà tre colonne di uguale larghezza, che si sommano alla larghezza dell'elemento genitore:

Div (conteggio colonne: 3;)
Nel secondo metodo, la larghezza delle colonne è fissa, si ripeteranno finché non riempiranno la larghezza dell'elemento genitore. In questo esempio, la larghezza della colonna è impostata su 140 px, il che significa che cinque colonne dovrebbero apparire in un blocco di 800 px:

Div (larghezza colonna: 140 px;)
Per impostazione predefinita, lo spazio tra le colonne è 1 em, ma può essere modificato utilizzando la proprietà gap di colonna... Puoi anche posizionare tra le colonne linee di demarcazione attraverso regola-colonna, simile nella sintassi a proprietà di confine... Il codice qui sotto creerà linea tratteggiata 2px di larghezza e imposterà anche il padding tra le colonne a 28px (il separatore sarà nel mezzo):

Div (spazio di colonna: 28px; regola di colonna: 2px puntato #ccc;)
Se vuoi vedere il risultato, dai un'occhiata all'esempio di implementazione della colonna CSS. Per vedere le tre colonne, devi utilizzare Firefox, Chrome, Safari, Opera 11.1 o IE10 Platform Preview (IE10PP)... Oppure dai un'occhiata allo screenshot qui sotto.

Puoi fare cose diverse con gli altoparlanti. Esempio pratico i loro usi sono su Wikipedia, nella sezione note, dove conteggio colonne... In Firefox, la multicolonna è implementata con il prefisso -moz-, in Chrome e Safari con il prefisso -webkit-, in Opera 11.1 e IE10PP senza prefissi.

tavolo

Nuovo di zecca in IE10PP è il sistema di layout dei tavoli. Prima di usarlo, devi decidere le righe e le colonne. Per le colonne, puoi utilizzare i valori di lunghezza, parola chiave automatica e una nuova unità di misura FR(Corto per frazione, relativo importo). Dai un'occhiata a questo esempio:

Div (display: griglia; colonne-griglia: 1fr 3fr 1fr; righe-griglia: 100px auto 12em;)
Questo codice creerà una tabella con tre colonne, il cui centro sarà tre volte più largo della sinistra e della destra, e tre righe, dove la parte superiore sarà alta 100 px, quella inferiore 12 em e quella centrale si espanderà automaticamente in altezza , a seconda della lunghezza del contenuto.

Ora che abbiamo una tabella, possiamo inserire il contenuto in essa. Usando gli elementi HTML5, puoi creare un markup di pagina davvero molto semplice:

Intestazione (colonna griglia: 1; ampiezza colonna griglia: 3; riga griglia: 1;) nav (colonna griglia: 1; riga griglia: 2;) articolo (colonna griglia: 2; riga griglia: 2;) a parte (grid-colonna: 3; griglia-riga: 2;) footer (grid-colonna: 1; griglia-colonna-span: 3; griglia-riga: 3;)
Guardando il codice, puoi vedere che il contenuto della pagina è distribuito in righe e colonne utilizzando, rispettivamente, le proprietà riga-griglia e colonna-griglia... Elemento articolo posizionato nella seconda colonna della seconda riga - il centro della tabella 3x3. Immobile usato anche colonna-span per gli elementi intestazione e piè di pagina, che li estende su tutte e tre le colonne (analogamente, la proprietà riga-span che qui non è stato utilizzato).

Puoi vedere una demo del markup nell'esempio CSS Grid, ma hai bisogno della piattaforma IE10. In caso contrario, dai un'occhiata allo screenshot.

Le proprietà sopra menzionate sono completamente implementate in IE10PP, quindi puoi sperimentarle subito. Tuttavia, molte proprietà non sono ancora implementate.

Campione

Un altro approccio a presentazione tabellareè il modulo Layout modello. Usa una sintassi leggermente diversa, dove devi prima posizionare i blocchi usando un carattere alfabetico e la proprietà posizione:

Intestazione (posizione: a;) nav (posizione: b;) articolo (posizione: c;)
Una volta assegnata una posizione, possiamo creare markup utilizzando una sequenza di caratteri. Ogni sequenza è equivalente a una stringa e ogni carattere nella sequenza è una colonna. Ad esempio, per creare una tabella con una riga e tre colonne, puoi utilizzare:

Div (visualizzazione: "abc";)
In questo caso, vengono visualizzati tre elementi equidistanti in una riga orizzontale. Ma puoi ripetere i caratteri per espandere le colonne e puoi anche usare gli stessi caratteri nella stessa posizione in righe diverse per espandere le stringhe. Nell'esempio seguente, l'elemento navigazione si sovrappone a due linee e intestazione e articolo sovrapponi due colonne (codice formattato per chiarezza):

Div (visualizzazione: "baa" "bcc";)
Template Layout non è ancora utilizzato dai browser, ma esiste già un buon script polyfill jQuery che ti permetterà di sperimentare, è lui che viene utilizzato nell'esempio al link. Il risultato è lo stesso dell'esempio con il markup della tabella, ma il codice è completamente diverso.

La pagina demo utilizza JavaScript, quindi dovrebbe funzionare per tutti browser moderni. Markup della tabella potrebbe anche supportare la sintassi del modello come nell'esempio seguente:

Intestazione (grid-cell: a;) articolo (grid-cell: b;) div (display: grid; grid-template: "a" "b";)
In termini di funzionalità, questo codice è identico alle proprietà di Template Layout, ma non è stato ancora implementato (o potrebbe non esserlo mai).

Blocchi flottanti posizionati

Proprietà attuale galleggiante consente al testo di avvolgere un elemento a sinistra oa destra, ma una proprietà avanzata in IE10PP ti consente di migliorare l'elemento flottato posizionandolo ovunque e il contenuto adiacente continuerà a avvolgere quel blocco. Aveva solo bisogno di un nuovo valore per la proprietà. galleggiante:

Div (float: posizionato; sinistra: 200 px; posizione: assoluto; alto: 100 px; larghezza: 250 px;)
Questo codice creerà un elemento largo 250 px, 200 px a sinistra e 100 px nella parte superiore del genitore. Per impostazione predefinita, qualsiasi altro contenuto all'interno del genitore avvolgerà l'elemento posizionato su tutti i lati, ma questo può essere modificato. significati diversi proprietà tipo avvolgente ad esempio, quando il testo scorre intorno all'elemento solo in alto e in basso:

Div (tipo wrap: alto-basso;)
Puoi combinare le proprietà di posizionamento e di layout della tabella posizionando un elemento in una tabella e lasciando che il contenuto scorra intorno ad esso da tutti i lati:

Div (float: posizionato; griglia-colonna: 2; griglia-riga: 2;)
Se hai IE10PP, puoi. In caso contrario, il risultato viene mostrato nello screenshot qui sotto, non può essere implementato con le attuali capacità CSS.

Esclusioni

Proprietà galleggiante consente di snellire solo gli elementi rettangolari, ma la documentazione prevede l'ottimizzazione della forma. L'idea è nata dopo aver utilizzato il modulo Esclusioni CSS. Ha due proprietà chiave. Primo, a forma di involucro, permette di creare ellissi, rettangoli o poligoni che definiranno la forma del blocco che viene snellita dal contenuto, ad esempio:

Div (forma avvolgente: cerchio (50%, 50%, 100 px);)
Questo codice creerà un cerchio con un raggio di 100 px, che sarà centrato su elemento genitore... Puoi usare la funzione poligono () per creare qualsiasi forma specificando coppie di coordinate separate da uno spazio, ad esempio per un triangolo:

Div (forma a capo: poligono (0,100 px 100 px, 100 px 50 px, 0);)
Quando c'è già una data forma, il contenuto interno può essere spostato attorno a quella forma usando la seconda proprietà modalità avvolgente, come qui:

Div (forma avvolgente: cerchio (50%, 50%, 100 px); modalità avvolgente: intorno;)
Puoi vedere le esclusioni CSS in azione scaricando un prototipo per Mac o Windows da Adobe Lab. Ha una documentazione completa e alcuni file demo molto interessanti, come questo:

le zone

Il prossimo suggerimento di Adobe sono le regioni CSS, che definiscono il modo in cui il contenuto viene distribuito all'interno di un set. diversi elementi... Questo viene fatto principalmente definendo un elemento che fornirà contenuto ad altri usando un identificatore di stringa univoco nella proprietà flusso, quindi selezionare quali aree verranno riempite con questo contenuto utilizzando la funzione a partire dal () proprietà contenuto:

Contenuto (flusso: pippo;) .target1, .target2 (contenuto: da (pippo);)
Qui il contenuto sarà preso dall'elemento .contenuto, e quindi verranno distribuiti prima sull'elemento .target1 e se il blocco non è sufficiente per visualizzare il contenuto, continuerà a essere visualizzato in .target2... Il contenuto non verrà duplicato a blocchi, inizierà nel primo e proseguirà nel secondo (se necessario). Per capire meglio, basta dare un'occhiata all'immagine qui sotto.

A proposito, non ci sono requisiti per le aree di destinazione riguardo alla loro posizione nel markup. Se necessario, possono essere posizionati sui lati opposti della pagina.

Le specifiche dell'area CSS non sono ancora state implementate nei browser, ma per analogia con le Esclusioni, puoi utilizzare un prototipo del laboratorio Adobe e provare tu stesso la funzionalità.

Conclusione

Non è ancora chiaro quale dei nuovi moduli di markup (da FlexBox e Columns) sarà completamente implementato nei browser. Per quanto riguarda i blocchi flottanti e le esclusioni, vorrei incrociarli per la somiglianza delle funzionalità (forse sarà così). Il markup tabulare è strettamente correlato al markup del modello ed è certamente prevedibile in IE10. Le regioni CSS sono già state implementate in uno dei rami di WebKit e probabilmente appariranno molto presto nei browser WebKit (Safari, Chrome e altri).

Pertanto, si può prevedere che con alcune modifiche alla sintassi, tutto ciò che è descritto sopra verrà utilizzato nei CSS3 in futuro. È molto positivo se ciò accade, poiché, in questo caso, nuovi metodi consentiranno con costo minimo creare siti molto premurosi in pochi anni.

tag:

• css3
• flexbox
• cioè10
• html5

Aggiungi i tag

Lo sviluppo di siti web non è un lavoro per persone con i nervi deboli. Oltre alla conoscenza, è necessario avere un pensiero creativo, la stoffa di un perfezionista e una precisione filigranata nell'impaginazione. CSS è semplicemente insostituibile in questa materia. E ogni webmaster deve conoscerne le basi.

Cos'è il CSS?

Per chi ha familiarità con l'HTML, non è necessario che gli venga detto che si tratta di un linguaggio di markup di pagina. Ma i suoi creatori hanno deciso di aggiungere tag che sono responsabili dell'aspetto e del design. Solo con questo approccio, il codice della pagina è diventato troppo voluminoso e praticamente illeggibile. Naturalmente, questo percorso non ha portato da nessuna parte, quindi è stato accettato soluzione complessa: HTML è responsabile del layout delle pagine, CSS è responsabile di design visivo.

CSS sta per (Cascading Style Sheet). Consiste di parametri responsabili del design visivo degli oggetti sulla pagina.

Vantaggi del CSS

Un foglio di stile a cascata consente a un webmaster non solo di creare una bella risorsa, ma anche di rendere leggibile il codice, riducendone notevolmente le dimensioni. Utilizzando CSS, puoi impostare parametri che non sono possibili nel markup della pagina HTML.

Con i CSS, puoi letteralmente cambiare l'aspetto delle pagine delle risorse in pochi clic. Questo è molto conveniente, soprattutto se il sito è multipagina. Tutte le modifiche al design vengono apportate nel foglio di stile CSS, non sostituendo i parametri su ciascuna pagina della risorsa. Ed è solo grazie ai CSS che il markup dei blocchi può essere implementato.

Collegamento CSS

Parlando di base Principi CSS, il primo passaggio consiste nell'imparare a collegare il foglio di stile CSS al file HTML. Il processo è abbastanza semplice. Il primo passo è creare un documento HTML. Per chi ancora non lo sapesse, viene creato nel programma "Blocco note". Quindi, utilizzando la funzione "Salva con nome", è necessario impostare l'estensione HTML.

Allo stesso modo, viene creato un foglio di stile a cascata, solo il file deve essere impostato con l'estensione css. Il documento risultante deve essere salvato nella stessa cartella di File HTML... Supponiamo che il tuo documento del foglio di stile si chiami style.css. Per collegarlo a un documento HTML, devi usare il tag che è responsabile della connessione file esterni... Nel mezzo, è necessario scrivere quanto segue:

Forse questo è uno dei più modi convenienti collegamento di file esterni.

Regola CSS

L'apprendimento del markup CSS dovrebbe iniziare con l'apprendimento della sintassi. Non ci sono tag, script o parametri nel foglio di stile a cascata. C'è solo una regola da seguire. Consiste di un selettore e di un blocco di stile. Diciamo che la posizione nel foglio di stile a cascata è: body (sfondo: nero; colore: bianco).

Qui body è il selettore responsabile dello stile del corpo del sito; sfondo: nero e colore: bianco sono proprietà e i loro valori. Sono scritti separati da punto e virgola. Questa posizione rende nero lo sfondo del sito e bianco il testo.

Selettori

Bene, continuiamo la nostra introduzione intensiva ai CSS. Sarà abbastanza difficile fare il markup della pagina senza la conoscenza dei selettori. Se tutto è chiaro con le proprietà e i loro valori, ulteriori conoscenze sui selettori aiuteranno a creare il markup della pagina desiderato.

Cosa devi sapere sui selettori? Innanzitutto, le loro varietà:

• Identificatore. I nomi degli elementi della pagina possono essere utilizzati come selettori. Nel caso in cui, ad esempio, sia necessario evidenziare un paragrafo di testo con un colore diverso, aggiungere un identificatore. È impostato dal parametro id.

Vale la pena ricordare che un identificatore può essere utilizzato solo una volta. In questo esempio, il selettore è stato chiamato pink, se è necessario un altro identificatore, è sufficiente assegnare un nome diverso (rosa2, verde, ecc.).

Classi... Il selettore di classe viene utilizzato se per più oggetti è necessario impostare gli stessi parametri... Ad esempio, due paragrafi di testo devono essere impostati in rosso.

Ci può essere un numero qualsiasi di oggetti con classi.

Per lo stesso oggetto, puoi specificare sia la classe che l'identificatore - questo non contraddice Marcatura CSS... Ma poiché l'identificatore ha una priorità più alta, è il suo stile che verrà utilizzato per l'oggetto. Questo dovrebbe essere preso in considerazione quando si dispone una pagina in CSS.

Identificatori e classi possono essere applicati a qualsiasi oggetto. E se è necessario impostare lo stesso stile per il testo e l'immagine, è possibile omettere il nome dell'elemento, come nell'esempio (p # pink, p.red). Puoi semplicemente mettere un punto o una griglia. I selettori possono anche essere raggruppati. Ad esempio, h1, h2, h3 (colore: rosso; font-sixe: 17px).

Impaginazione

Studiando il markup della pagina, puoi capire che ne esistono di diversi tipi:

• tabulare. Prima che esistesse un foglio di stile a cascata, questo markup era mainstream. Ha consentito di posizionare gli oggetti risorsa nel modo più accurato possibile l'uno dall'altro. Ma il codice risulta essere troppo grande e mal indicizzato dai motori di ricerca. Un altro svantaggio di questo metodo è la velocità di download. Finché non viene caricata l'intera tabella, l'utente non vedrà nemmeno l'inizio del testo.
• Blocco. Questo è ora il modo principale per contrassegnare le pagine. Il suo utilizzo è diventato possibile solo grazie allo sviluppo e al miglioramento del foglio di stile.

Vantaggi del layout a blocchi

Blocca il layout della pagina usando i CSS ha diversi vantaggi inconfutabili. Innanzitutto, lo stile degli oggetti è separato dal documento HTML, il che aumenta notevolmente la leggibilità del codice e consente rapidi cambiamenti visivi. In secondo luogo, è possibile sovrapporre uno strato all'altro e questo facilita più volte il processo di posizionamento. Naturalmente, tali siti si caricano e indicizzano più velocemente. motori di ricerca... Il markup della pagina in CSS semplifica la definizione di effetti visivi moderni.

L'unico inconveniente di questo approccio è la diversa "comprensione" dei browser. Alcuni visualizzano la risorsa come la vede il webmaster. Ma ci sono browser che distorcono l'immagine, quindi quando un largo numero classi e selettori, è necessario utilizzare hack che renderanno il codice cross-browser.

Come creare un layout a blocchi di un sito?

La prima cosa da cui iniziare è creare un layout. Dovrebbe essere un'immagine normale con estensione psd. Dopo la sua creazione (acquisto o download), è necessario tagliare l'immagine in blocchi e posizionarla in una cartella (preferibilmente separata). Questi frammenti saranno usati come sfondo per i blocchi.

V documento HTML per il layout del blocco usa il tag