Cos'è il codice CSS e dove si trova. Nozioni di base sui CSS per principianti. Vantaggi dell'utilizzo dei CSS

Spiega brevemente cosa sono i Cascading Style Sheets (CSS). Con il suo aiuto, puoi creare un semplice documento che utilizzerai nelle sezioni successive.

Informazioni: cos'è il CSS

Fogli di stile a cascata = CSS è un linguaggio responsabile della presentazione visiva dei documenti all'utente.

Sotto documento comprenderemo l'insieme di informazioni sulla struttura della pagina descritta linguaggio con marcatori.

UN prestazione La presentazione di un documento all'utente, a sua volta, significa la sua trasformazione in una forma facilmente comprensibile. Browser come Firefox, Chrome o Internet Explorer sono stati creati per visualizzare visivamente i documenti, ad esempio sullo schermo di un computer, su un proiettore o sull'output di una stampante.

Esempi

La pagina del sito che stai leggendo adesso è un documento. La struttura delle informazioni che vedi su una pagina viene solitamente descritta utilizzando il linguaggio di markup HTML (HyperText Markup Language).
Anche le finestre di dialogo dei programmi per computer, chiamate anche finestre modali, sono solitamente documenti. Tali finestre possono anche essere descritte utilizzando un linguaggio di markup come XUL (XML User Interface Language), che può essere trovato, ad esempio, in alcune applicazioni Mozilla.

In questa guida, blocchi con titolo Più dettagli, come i seguenti, contengono informazioni aggiuntive e collegamenti a risorse che consentono di approfondire il problema a cui è dedicata una particolare sezione. Puoi utilizzare questi materiali immediatamente o saltare questi blocchi e tornarci più tardi.

Più dettagli

Un documento non è la stessa cosa di un file. Tuttavia, il documento può essere archiviato in un unico file.

Con la pagina che stai leggendo le cose sono un po’ più complicate. Quando il tuo browser richiede una determinata pagina, il server accede al database e genera un documento, assemblandolo pezzo per pezzo da più documenti, ognuno dei quali, a sua volta, può trovarsi in più file. Tuttavia, in questo tutorial potrai lavorare anche con documenti, ognuno dei quali è rappresentato da un file.

Troverai maggiori informazioni su documenti e linguaggi di markup in altre sezioni di questo sito:

Nella seconda parte di questo tutorial vedrai esempi di questi linguaggi di markup.

Più dettagli

In termini CSS, un programma che mostra un documento all'utente, il cosiddetto agente utente(UA). Un browser è uno dei tipi di UA. I CSS quindi non sono solo browser o visivi, ma nella prima parte di questo tutorial lavorerai con i CSS solo nel browser.

Altre definizioni e termini relativi ai CSS possono essere trovati nelle Definizioni delle specifiche CSS create dal World Wide Web Consortium (W3C), la comunità internazionale che stabilisce gli standard web aperti.

All'azione: creare un documento

Crea una nuova cartella sul tuo computer per gli esercizi.
Apri un editor di testo e crea un nuovo file di testo. Questo file conterrà il documento per i prossimi esercizi.
Copia e incolla il codice HTML riportato di seguito, quindi salva il file come doc1.html. Documento di esempio
C a cascata S stile S fogli
Apri una nuova scheda o finestra nel browser e apri il file appena creato.
Dovresti vedere una riga con le lettere maiuscole in grassetto:

C a cascata S stile S fogli
Ciò che effettivamente vedi potrebbe differire leggermente perché le impostazioni predefinite del tuo browser e di questa enciclopedia saranno probabilmente diverse: lievi differenze nel carattere, nella spaziatura e nei colori non sono molto importanti.

Qual è il prossimo?

Il documento che hai creato non ha ancora utilizzato i CSS. Nella sezione successiva imparerai come utilizzare i CSS per dare stile al tuo documento.

Un articolo introduttivo sui CSS, dal quale conoscerai i concetti generali su cosa sono i CSS e a cosa servono. Diamo un breve sguardo alla sua sintassi e alle sue funzionalità. Cominciamo con la definizione

1. Definizione di CSS

CSS(dall'inglese "Cascading Style Sheets", fogli di stile a cascata) - un elenco di stili per un sito in html

Cos'è lo stile? In parole povere, lo stile è l'aspetto di un elemento sul sito. Ad esempio, qualsiasi testo può essere scritto con una dimensione di 10 pixel o 14 pixel. Puoi scrivere in nero o in blu. Puoi sottolineare/inclinare/barrare, ecc. Tutto ciò che riguarda la formattazione del testo viene eseguito tramite CSS.

Ma questa è solo una piccola parte delle possibilità. I CSS sono responsabili della visualizzazione di tutti i tag html. Anche per modifiche dinamiche: menu a discesa, evidenziazione dei collegamenti al passaggio del mouse.

Un elenco di tutti gli stili è spesso chiamato "foglio di stile CSS" nel gergo dei webmaster.

2. Scopi e obiettivi dei CSS

Rendi il sito più bello (in termini di design), crea un'interfaccia amichevole e solo in modo che i siti siano almeno in qualche modo diversi l'uno dall'altro
Separa il codice html dal codice di descrizione dello stile e del design

3. Sintassi CSS (selettori)

Ogni proprietà e stile è descritto tramite "Selettori". La sua sintassi è la seguente

Selettore (attributo: valore;)

Selettore- può essere il nome di uno stile o di un tag. Le parentesi graffe descrivono regole specifiche. La descrizione segue sempre lo stesso standard: “nome attributo: valore”. Ogni regola deve terminare con un punto e virgola.

Per esempio

.style_name ( attributo1 : valori1; attributo2 : valori2; ... );

Esistono molte opzioni per specificare gli stili CSS. Diamo un'occhiata a quelli più popolari con esempi.

/*Impostazione dello stile generale*/ .global_style (dimensione carattere: 12px; colore: rosso;) /**/ font.style1 (dimensione carattere: 10px; colore: blu;) /* Impostazione di uno stile generale solo per il tag del carattere*/ #global_style2 (dimensione carattere: 14px; colore: rosso;) h1 (dimensione carattere: 19px;)

Lo stile global_style può essere utilizzato come classe per tutti i tag. Per esempio,

style1 può essere utilizzato solo su un tag perché font.style1 è stato specificato nella definizione.

La terza opzione per l'attività è tramite la griglia (#). Come nel primo caso, è definito per tutti gli elementi, ma deve essere specificato non tramite la classe, ma tramite l'attributo id:

Nell'ultima opzione abbiamo semplicemente specificato il nome del tag

e gli prescrisse uno stile. Ciò significa che ora tutti i tag

erediterà il valore di questo stile.

4. Come e dove impostare gli stili CSS

5. Quali sono i vantaggi dell'utilizzo dei CSS

Design facile da cambiare. Basta cambiare lo stile in un solo posto e cambierà in ogni pagina del sito
Questo è l'unico modo per modificare il design del sito
Sintassi del linguaggio semplice

6. Problemi CSS con i browser

I browser meno recenti non supportano tutte le funzionalità CSS. Ciò causa problemi di visualizzazione. Ad esempio, un effetto destinato a migliorare la percezione del contenuto può portare all'effetto opposto. Se alcune proprietà non sono supportate, c'è il rischio che si blocchino, i testi si sovrappongano, ecc.

I prefissi risolvono parzialmente questo problema. Essenzialmente è solo una parola posta prima dell'argomento nel foglio di stile. Ogni browser ha il proprio prefisso.

-moz- per il browser Firefox
-webkit- per i browser Chrome e Safari (entrambi i browser utilizzano lo stesso motore di rendering)
-ms- per il browser Internet Explorer
-o- per il browser Opera

7. Risposte alle domande più frequenti

7.1. Cos'è CSS3

Recentemente puoi spesso imbatterti nel concetto di CSS3. Essenzialmente si tratta dello stesso CSS, ma con una serie di nuovi argomenti che forniscono funzionalità aggiuntive in termini di vari effetti. Ad esempio, testo luminoso. Molti browser non supportano tali proprietà, quindi si consiglia di utilizzare tali effetti in quantità minime.

7.2. Qual è la differenza tra CSS e HTML?

L'HTML è la struttura della tua pagina (si tratta di collegamenti, immagini, contenuti). E i CSS determinano come tutto questo verrà visualizzato all'utente. Quindi HTML e CSS sono cose fondamentalmente diverse, ma sono correlate. La regola della buona forma è separare i codici gli uni dagli altri in modo da non mescolarli su una stessa pagina.

L'abbreviazione CSS sta per Cascading Style Sheets. Se credi (e in tali questioni dovresti crederci), i CSS sono un meccanismo per aggiungere stile a un documento web. Gli stili sono intesi come regole che determinano l'aspetto e il design di un documento, gestendo i caratteri, i colori sulla pagina e la disposizione degli elementi.

Scopriamo che tipo di tavoli sono questi, a cosa servono e perché improvvisamente "a cascata"?

Perché è necessario separare il contenuto dal design?

Il principio classico del “divide et impera” è noto fin dai tempi dell’antica Roma. Ha ripetutamente permesso a personaggi di epoche diverse di raggiungere il successo nei giochi politico-militari. Aiuterà anche noi.

L'HTML era originariamente utilizzato per strutturare il testo (qui c'è un titolo, qui c'è un paragrafo e questo è un elenco). La visualizzazione di determinati elementi era determinata dai loro attributi ed era in gran parte lasciata alla discrezione del browser. Poiché volevo ancora controllare l'aspetto, iniziarono ad apparire tag di progettazione, come o . Di conseguenza, i contenuti del documento e la sua struttura sono strettamente intrecciati. Il codice è diventato macchinoso, inflessibile e difficile da leggere. Ad esempio, in questo modo:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Svantaggi evidenti:

molte strutture non necessarie che non sono direttamente correlate al markup del contenuto: file di grandi dimensioni, aumento del traffico e del tempo di caricamento;
È difficile cambiare il design. Ad esempio, se devi cambiare il colore, dovrai cercare tutti gli attributi;
limitazioni significative sulle opzioni di formattazione. Molti tag semplicemente non possono essere configurati correttamente utilizzando solo gli attributi;
non è possibile adattare il design ai diversi tipi di dispositivi di visualizzazione (monitor del PC, stampante, schermo del PDA, browser vocale, ecc.);
il codice perde il suo markup logico (semantica) e di conseguenza:
- scarsamente indicizzati dai robot di ricerca, perché devono elaborare un mucchio di “spazzatura”;
- L'accessibilità per gli utenti che utilizzano browser non visivi è notevolmente ridotta.

Separare tutte le regole per la registrazione in un blocco separato (file) ci consente di risolvere questi problemi. Il codice diventa più semplice e molto più facile da lavorare. L'HTML stesso diventa ciò che doveva essere: un linguaggio per il markup semantico dei documenti:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Vantaggi dell'utilizzo dei CSS:

Il codice è suddiviso in contenuto e design. Otteniamo un codice più semplice e comprensibile;
il file di progettazione viene scaricato una sola volta e memorizzato nella cache, riducendo il traffico, i tempi di download e il carico del server;
la semplicità del linguaggio CSS stesso + il principio di separare il design dal contenuto: i tempi di sviluppo e manutenzione del sito sono ridotti;
Un singolo CSS controlla il rendering di più pagine HTML. Le modifiche alla progettazione vengono apportate più rapidamente;
I CSS forniscono funzionalità di formattazione aggiuntive che sarebbero state inimmaginabili utilizzando solo gli attributi;
è stato implementato un meccanismo per connettere diversi CSS per diversi tipi di dispositivi di visualizzazione;
aumentare la compatibilità con diverse piattaforme attraverso l’uso di standard web.

Fogli di stile

Pertanto, i CSS sono uno standard internazionale generalmente riconosciuto. I CSS sono uno strumento potente, uno dei componenti principali di quasi tutte le pagine web, senza il quale è impossibile immaginare lo sviluppo web moderno.

I fogli di stile possono essere interni (all'interno del file HTML) o esterni. Le tabelle esterne sono le più comode e sono file con estensione css. Questi problemi verranno discussi in modo più approfondito in uno dei seguenti articoli.

Un foglio di stile è costituito da un insieme di regole che determinano come verrà visualizzato un particolare elemento, ad es. quali stili gli verranno applicati.

Esempio di snippet CSS:

Possono esserci molte regole, ciascuna composta da due parti (si può immaginare che siano colonne): a cosa applichiamo gli stili (selettore) e quali stili effettivamente applichiamo (blocco di definizione). Pertanto l'intera struttura è stata chiamata “tavolo”. Quindi "foglio di stile". Ma perché improvvisamente “a cascata”?

Eredità a cascata

Il fatto è che i CSS utilizzano l'ereditarietà da genitore a figlio, che consente di definire stili basati su quelli già descritti in precedenza per i genitori. In questo caso, si verifica una situazione in cui le proprietà di più regole sono adatte contemporaneamente per un elemento. Lo standard CSS definisce l'ordine di priorità in cui vengono applicate le regole di stile, rendendo i risultati prevedibili. Questo modello è chiamato “a cascata”.

Linea di fondo

I CSS sono una potente tecnologia che consente di descrivere le regole di progettazione di un documento HTML e separarle dal contenuto. Uno dei requisiti chiave che il moderno mercato del lavoro impone a un progettista di layout è la conoscenza approfondita dei CSS. Tuttavia, i CSS sono abbastanza facili da imparare. Per aiutare in questo, esiste il nostro.

Come ricorderete, l'HTML è un linguaggio di markup, ma i suoi creatori volevano così migliorare la vita dei costruttori di siti che vi hanno aggiunto elementi e parametri responsabili dell'aspetto della pagina: tag , , , e così via.

Ma a un certo punto il codice della pagina è diventato così macchinoso e illeggibile che è diventato chiaro che questa strada non porta “a nulla”. Successivamente si è deciso di separare il markup della pagina (HTML) e il suo design visivo (CSS). Insieme, HTML e CSS possono fare miracoli, come vedrai presto.

Cos'è il CSS

CSS (Cascading Style Sheets) - fogli di stile a cascata.
Stile- un insieme di parametri che definisce la rappresentazione esterna di un oggetto. Ad esempio, supponiamo di volere che tutti i titoli di primo livello (tag
) su una pagina sarebbe rosso, dimensione - 24 e scritto in corsivo, e sull'altra pagina sarebbe blu, dimensione - 12. Il nostro titolo è un oggetto e colore, dimensione e stile sono parametri. È solo che i parametri del nostro oggetto sono diversi per le diverse pagine, ad es. differiscono nello stile.
Ogni elemento della pagina può avere il proprio stile (paragrafi, titoli, righe, testo...). Viene chiamato l'insieme degli stili di tutti gli elementi foglio di stile.
Se per un elemento vengono specificati più stili (come nell'esempio con le intestazioni), allora a cascata, che determina la priorità di uno stile particolare.
Vantaggi dei CSS

I CSS possono ridurre significativamente la dimensione del codice e renderlo leggibile.
I CSS ti consentono di impostare parametri che non possono essere impostati solo in HTML. Ad esempio, rimuovi la sottolineatura dai collegamenti.
I CSS semplificano la modifica dell'aspetto delle pagine. Immagina di aver realizzato un sito web di 50 pagine in cui tutti i titoli sono blu. Dopo un po' di tempo, volevi cambiare il colore blu in verde. Dovrai scorrere tutte le 50 pagine e cambiare il colore nell'attributo corrispondente. Con i CSS devi farlo solo una volta, nel foglio di stile.
I CSS sono associati al cosiddetto layout a blocchi di un sito web.
È ora di passare dalle parole ai fatti, inizieremo nella prossima lezione.
Ciao, cari lettori del sito blog. Oggi voglio iniziare a parlare in dettaglio dei CSS (i materiali saranno accumulati nella sezione corrispondente).
È ora di passare ad esso dopo aver studiato HTML. Il linguaggio di markup di stile è responsabile del design esterno delle pagine del sito e senza capirlo sarà molto difficile correggere, spostare o allineare qualcosa.
Naturalmente, Css sembra molto più complesso rispetto a Html, ma questo è quando si tratta del problema del layout cross-browser, ma quando si tratta di correggere alcuni piccoli dettagli nella progettazione del proprio sito Web, non è necessario molta intelligenza. In generale, proveremo ad analizzarne le basi in dettaglio, e le sfumature del loro utilizzo in filigrana saranno lasciate per uno studio facoltativo (facoltativo). Ma tutti i webmaster devono conoscere i concetti di base.
Cos'è il linguaggio CSS e a cosa serve?
L'abbreviazione CSS sta per Cascading Style Sheets o, nella traduzione russa, come fogli di stile a cascata. Cos'è e perché questa lingua è stata inventata una volta?
Quindi, sulla base di ciò che abbiamo studiato poco prima, possiamo dire che il markup di un documento web viene effettuato utilizzando i tag di questo linguaggio. Quelli. Utilizzando HTML creiamo la struttura dei nostri documenti (pagine web). Ad esempio, in HTML puro possiamo specificare altri elementi della struttura del documento e persino dare loro l'aspetto di cui abbiamo bisogno nel browser.
Ma il tempo ha dettato la necessità di utilizzare sempre più attributi di progettazione visiva in HTML, che hanno ingombrato pesantemente il codice sorgente. A questo proposito, è stata proposta un'altra opzione di sviluppo più promettente: creazione di un linguaggio di markup di stile separato CSS. E questa opzione presentava numerosi vantaggi rispetto al semplice aumento del numero di attributi di progettazione.
Perché? Ricordi come puoi impostare il colore di un frammento di testo in puro HTML? Esatto, con l'aiuto di . Cosa succede se vuoi colorare più paragrafi del tuo testo contemporaneamente nel colore desiderato?
Quindi all'interno di ciascuno di essi (il tag di paragrafo P è a livello di blocco, il che significa che non può essere inserito all'interno di un elemento Font inline) inserisci i tag Font con il valore di colore desiderato nell'attributo Color.
Tutto ciò confonderà terribilmente il codice sorgente, il che è molto, molto indesiderabile, perché la velocità di caricamento del sito ne risentirà e verrà creato un carico eccessivo sulle apparecchiature di comunicazione Internet. Gli sviluppatori non potevano farlo.
Pertanto, hanno trovato la seguente via d'uscita dalla situazione attuale. Gli sviluppatori del W3C hanno deciso di progettare tutte le rappresentazioni visive di un documento web sotto forma di uno speciale linguaggio di markup di stile, che hanno chiamato fogli di stile a cascata o semplicemente CSS (leggi come CSS). Qual è l'essenza della tecnologia?
E il punto è questo: collegando un linguaggio di markup di stile a qualsiasi documento (pagine), saremo in grado di impostare una rappresentazione visiva di tutti quegli elementi (creati da tag Html) che appariranno in questo documento.
C'è una risorsa su Internet che ti aiuta a vedere molto chiaramente come una pagina web può cambiare aspetto solo perché ad essa è collegato un altro file di fogli di stile a cascata. Secondo me questa sarebbe la risposta migliore alla domanda: cos'è il CSS e perché è necessario?.
È possibile visualizzare la visualizzazione di base del documento (pagina Web) seguendo questo collegamento:
Niente di speciale, ma se fai clic sul collegamento "Visualizza tutti i progetti" dal menu a sinistra, puoi vedere dozzine o addirittura centinaia di opzioni di progettazione per la stessa pagina Web collegando un altro foglio di stile (un altro file di fogli di stile).
Tieni presente che il codice HTML sorgente rimane esattamente lo stesso e Cambia solo il design CSS. Incredibile, vero?!
I CSS non sono un linguaggio di markup nel senso, ad esempio, di Html. Questo è un linguaggio di markup stilistico: ha una propria sintassi, un proprio contenuto interno e per molti aspetti sarà molto diverso da ciò che è già stato studiato in precedenza.
Inoltre, rispetto all'HTML, il linguaggio di markup dello stile è molto più complesso. Ci sono molte sfumature che dovrai conoscere oltre ai concetti di base. Non c'erano sfumature speciali nell'HTML: hai studiato tutti gli elementi e puoi lavorare facilmente con il codice. Mi sembra che i CSS possano essere paragonati agli scacchi: non basta sapere come si muovono tutti i pezzi, devi anche essere in grado di giocare.
Allora, cos’è e in cosa consiste? Questa presunta lingua può essere dividere in due parti:
Regole che dicono al browser come dovrebbe apparire un elemento sullo schermo.
I selettori sono etichette che permettono al browser di capire quali elementi del codice HTML dovranno applicare queste regole.

Vediamo ora come il design specificato in stili è collegato al codice sorgente della pagina web. Ci sono tre modi principali utilizzando CSS con HTML:
Allegato: il codice CSS viene scritto direttamente nel tag dell'elemento desiderato utilizzando l'attributo Style
Incorporamento: tutto il codice di stile per un documento web viene scritto nella sua intestazione (all'interno dei tag Head) utilizzando l'elemento Style
Collegamento: tutto il codice CSS viene inserito (estratto) in un file esterno separato, collegato al documento utilizzando l'elemento Collegamento nella sua intestazione

Bene, vedi come abbiamo già imparato molto sul linguaggio di markup di stile. Adesso è il momento di parlarne sintassi. In generale, è abbastanza semplice:
Una regola nel codice CSS è composta da due elementi: una proprietà (nel nostro esempio è ) e il suo valore (nel nostro esempio è rosso e #CCCCCC). Un prerequisito è separando una proprietà dal suo valore con i due punti.
Ulteriore. Una regola è necessariamente separata da un'altra punto e virgola. Dopo l'ultima regola non si può più usare il punto e virgola, ma per evitare eccessi è meglio stabilire come regola di usarlo sempre. non hanno significato nel codice CSS e puoi impostarli a tua discrezione.
Utilizzo dello stile per connettere CSS al codice HTML
Bene, ora diamo un'occhiata agli esempi di tutti quei modi di applicare le regole di stile al nostro documento che esistono e che sono stati descritti in termini generali appena sopra.
Il primo metodo è chiamato metodo Incorporamenti CSS in Html utilizzando l'attributo Stile:
Vediamo come possiamo utilizzare questo metodo per impostare il colore e lo sfondo di un paragrafo:
Qual è il metodo di nidificazione
Come puoi vedere, con una semplice mossa abbiamo colorato il testo del paragrafo in rosso (color:red) e allo stesso tempo abbiamo posizionato uno sfondo grigio sotto di esso ( background:#cccccc). Lo stile si riferisce a quei sei che possono essere utilizzati insieme a qualsiasi tag (sono elencati nella parte inferiore dello screenshot):
In Css utilizzeremo attivamente anche quelli universali, ma di questo parleremo negli articoli successivi, ma per ora abbiamo considerato la possibilità di utilizzare Style per collegare le regole di progettazione dello stile a determinati elementi del codice Html. Ti consente di utilizzare un insieme di queste stesse regole (in quantità illimitate) come valore.
Il metodo di annidamento utilizzando l'attributo Style è molto semplice da implementare nella pratica, ma è comunque nel layout reale usato molto raramente. Ma con l'aiuto di esso puoi facilmente provare a sperimentare qualcosa e solo allora trasferire tutte queste regole in un file separato con fogli di stile CSS.
Il modo successivo per connettere un linguaggio di markup di stile è chiamato metodo incorporare CSS in Html. Questo metodo è fondamentalmente diverso dal metodo di investimento discusso in precedenza.
Invece di includere in ogni tag della pagina l'attributo Style contenente le regole del linguaggio di stile, ora scriveremo tutte le regole CSS necessarie per questo documento web all'interno di un unico tag stile dell'etichetta, che a sua volta verrà inserito nell'intestazione di questo documento (tra gli elementi Head).
Ricordi cos'è Head e dove è scritto nella struttura di un documento web? Se non ricordi, cercalo in questo diagramma a blocchi:
Quelli. nel codice potrebbe assomigliare a questo:
... ...
Non è del tutto chiaro? Bene, ora provo ad illustrarlo:
Per evitare che il browser confonda le regole di stile con il linguaggio di markup ipertestuale, sarà necessario specificare un attributo obbligatorio nell'elemento Style Digita con valore "testo/css"(intestazione del contenuto multimediale per fogli di stile a cascata). Quello. Il codice contenuto in questo elemento verrà interpretato dal browser come CSS.
Esaminiamo ulteriormente l'esempio fornito appena sopra. Come puoi vedere, è lo stile a dettare legge racchiuso tra parentesi graffe, e davanti ad essi è scritto il cosiddetto selettore nella forma della lettera latina “P”. Perché è necessario questo selettore?
In quale altro modo possiamo indicare al browser che queste regole CSS dovranno essere applicate solo ai tag di paragrafo (selettore P) di un determinato documento web e a nient'altro.
Qui abbiamo nuovamente toccato la questione della sintassi. Quando si utilizzano metodi in linea e di nidificazione, tutte le regole del linguaggio di markup di stile devono essere racchiuse tra parentesi graffe e precedute da assicurati di stare in piedi o più selettori:
Selettore CSS (Proprietà: Valore; Proprietà: Valore)
Quando utilizziamo il metodo di nidificazione, non abbiamo utilizzato un selettore e parentesi graffe, perché al browser era già chiaro che queste regole CSS dovevano essere applicate proprio al tag all'interno del quale era scritto l'attributo Style.
Quando si utilizzava il metodo di incorporamento o di annidamento, la situazione relativa alla determinazione dei destinatari di queste regole di stile diventava più complicata ed era necessario l'uso di parentesi graffe e selettori. Quello. indichiamo al browser che dovresti gentilmente applicare questo insieme di regole CSS (racchiuso tra parentesi graffe) a tutti i paragrafi e questo insieme - per qualcos'altro.
Nel caso più semplice si può utilizzare come selettore il nome di un tag, a cui applicare le regole del linguaggio CSS, racchiuso tra parentesi graffe che si aprono subito dopo il nome del selettore. Nel nostro esempio, il nome del tag di paragrafo “P” viene utilizzato come selettore. Parleremo più in dettaglio dei selettori nel linguaggio di markup di stile nel prossimo articolo (vedi link sopra).
Riassumiamo il metodo di incorporamento del codice CSS in un documento Html: tutte le regole di stile necessarie per questo documento saranno descritte in un unico tag Style e non in molti elementi diversi, come sarebbe il caso se si utilizzasse il metodo di incorporamento appena descritto Sopra.
Esportazione dei fogli di stile CSS in un file separato utilizzando Link
L'ultimo modo per integrare il codice di stile in un documento web si chiama metodo di legame. Il modo più semplice per illustrare questo metodo è:
La sua principale differenza rispetto ai metodi discussi sopra (annidamento e incorporamento) è che quando si utilizza il metodo di collegamento, tutte le regole del linguaggio CSS vengono trasferiti in un file esterno separato. Sarà nuovamente testo (come qualsiasi documento Html) e di solito viene assegnata l'estensione .css in modo che sia possibile assegnare un programma speciale () per aprirlo su un computer locale che esegue Windows.
Quando si utilizza un file CSS esterno, special Etichetta di collegamento, che viene scritto nuovamente tra gli elementi Head di apertura e chiusura nell'intestazione della pagina web. Il collegamento è classificato come invisibile nel browser.
In questo caso, il browser troverà il file del foglio di stile specificato (da esso preceduto nell'attributo Href del tag Link), lo caricherà e applicherà le regole del linguaggio CSS in esso specificate per il design esterno del documento Html corrente.
In generale, il collegamento è molto simile all'uso del tag Style descritto in precedenza, ma può accelerare notevolmente il caricamento delle pagine del sito e ridurre il carico sulle apparecchiature di comunicazione Internet.
Quando si utilizza l'elemento Style (metodo incorporato), ogni volta il browser dovrà caricare le regole CSS e i selettori in esso incorporati insieme al codice HTML del documento e, nel caso di utilizzo di un file di fogli di stile esterno, solo il browser deve caricare Style.css una volta e solo dopo prenderlo dalla tua cache (un'area sul disco rigido del computer dell'utente) quando progetti altre pagine del tuo sito.
L'attributo type="text/css" del tag Link significa che questo contenuto multimediale non sarà altro che un linguaggio di markup di stile. Ma viene utilizzato anche quando si collega un file CSS e un documento Html Attributo Rel con valore del foglio di stile. Il fatto è che Link (collegamento ipertestuale del servizio) può essere utilizzato per scopi completamente diversi.
Se guardi il codice sorgente di questa pagina in un browser, vedrai che nell'area Head c'è tutta una serie di diversi tag Link:
E lo scopo di ciascuno di questi collegamenti ipertestuali di servizio è determinato dal valore dell'attributo Rel. Ad esempio, rel="icona collegamento" viene utilizzato per indicare il percorso del file e rel="alternate" può essere utilizzato per indicare una versione alternativa della pagina (un esempio di rappresentazione alternativa di un documento Html potrebbe essere) .
Bene, nel caso in cui utilizziamo l'attributo rel="stylesheet" in Link, impostiamo il browser percorso del file del foglio di stile(nell'attributo Href questo percorso può essere specificato in forma assoluta o relativa). Quelli. Usando l'attributo Rel, diciamo al browser come apparirà il file, il cui percorso è specificato nell'Href (foglio di stile - con CSS).
Sui siti viene quasi sempre utilizzato il metodo della rilegatura CSS e Html (file di fogli di stile esterni). Gli attributi e i tag di stile vengono solitamente utilizzati solo per i test, sebbene possano esserci attività specifiche quando il loro utilizzo è giustificato (ad esempio durante la progettazione). Ma nel lavoro reale sui siti web vengono utilizzati file esterni, ad es. metodo vincolante.
Con questo mi congedo e giuro di promettervi che seguirà una continuazione in un futuro molto prossimo. Ripeto ancora una volta che imparare i CSS è solitamente molto più difficile che imparare l'HTML, quindi cercherò di essere il più dettagliato e chiaro possibile.

Buona fortuna a te! A presto sulle pagine del blog del sito
Potresti essere interessato
Stile elenco (tipologia, immagine, posizione) - Regole Css per personalizzare l'aspetto delle liste nel codice Html
Visualizza (blocco, nessuno, in linea) in CSS: imposta il tipo di visualizzazione degli elementi Html sulla pagina web
A cosa servono i CSS, come collegare i fogli di stile CSS ad un documento Html e la sintassi base di questo linguaggio
Sfondo in CSS (colore, posizione, immagine, ripetizione, allegato): tutto per impostare il colore di sfondo o l'immagine di sfondo degli elementi Html
Priorità in Css e loro aumento dovuto a Importante, combinazione e raggruppamento di selettori, stili utente e autore
Altezza, larghezza e overflow: regole CSS per descrivere l'area del contenuto nel layout a blocchi
Unità di dimensione (pixel, Em ed Ex) e regole di ereditarietà nei CSS Stile diverso per i collegamenti interni ed esterni tramite CSS
Selettori di pseudo-classi e pseudo-elementi nei CSS (hover, first-child, first-line e altri), relazioni tra tag del codice Html
Galleggia e cancella nei CSS: strumenti di layout a blocchi