Come funziona CSS
I CSS possono essere utilizzati per modificare il design del layout, quindi devi solo scrivere un codice per tutti i tuoi elementi. Utilizzando CSS, è possibile utilizzare meno codice per creare la tua pagina web. È possibile applicare una regola CSS a tutti i tag su una pagina. Imparando CSS, puoi rendere il tuo sito Web fantastico.
Come funziona CSS
Il processo a cascata di CSS consente di combinare più fogli di stile. Aiuta a evitare conflitti quando stili diversi definiscono la stessa proprietà, come la dimensione del carattere. Quando un elemento ha più di un foglio di stile, il browser sceglierà quello più appropriato (l'ultimo) e risolverà il conflitto.
Componenti di un codice CSS
Questa sezione descrive le istanze fondamentali di un codice CSS.
Prendiamo l'esempio di un semplice codice CSS per un titolo (H1):
H1 Color: Black; Font-weight: audace;Il codice CSS di cui sopra comprende le seguenti parti:
- H1 è conosciuto come "selettore"
- Il testo scritto all'interno delle parentesi cure si chiama "dichiarazione“; Il codice all'interno delle parentesi graffe viene applicato al selettore definito prima delle parentesi cure.
- IL colore E Font-peso sono le proprietà mentre il nero E grassetto sono i valori delle proprietà
A parte i componenti sopra indicati, a punto e virgola viene inserito dopo ogni proprietà prima di iniziare l'altra. In breve, un semplice codice CSS ha quattro componenti: selettore, dichiarazione, proprietà E valore.
Come è incorporato il codice CSS
Un codice CSS può essere incorporato in uno dei seguenti modi:
- All'interno di un elemento HTML: Le proprietà sono definite in un elemento specifico di HTML e l'immagine mostrata di seguito mostra l'applicazione di CSS in linea.
- Come CSS interno: Il codice è scritto usando l'elemento e all'interno del Testa Tag del file HTML. Per una migliore sottovalutazione dei CS interni, abbiamo allegato l'immagine che mostra il carattere e il colore sono impostati per i paragrafi:
- Come file CSS esterno: un codice CSS è scritto all'interno di un file separato e quindi il file CSS è collegato al file HTML:
Come funzionano insieme CSS e HTML
Il fenomeno CSS e HTML si interrompe l'uno con l'altro. Un codice HTML può essere definito la struttura dell'edificio mentre CSS è il processo di abbellimento di quella struttura. Una struttura grezza è inutile senza vernice e altre decorazioni. L'HTML e CSS funzionano in collaborazione su una pagina Web:
Una pagina web segue il processo di seguito per caricare correttamente:
- Una pagina HTML viene caricata dal browser
- Il browser converte quell'HTML in DOM (Modello Object Data)
- Nel frattempo, il browser carica gli stili associati a quella pagina HTML: per questo, il file CSS (collegato a quel file HTML) viene analizzato per creare un albero del modello di oggetti dati (DOM).
- Dopo una riuscita aggiunta di regole di styling, viene quindi eseguito l'ultimo passaggio (display)
Di seguito viene visualizzata la rappresentazione visiva del caricamento di una pagina web
Il modello di oggetti dati (DOM) è una struttura gerarchica (simile ad albero) del codice HTML. Ogni elemento e le sue proprietà associate sono conosciute come nodi DOM. I selettori CSS (può essere qualsiasi elemento HTML) sono controllati con i nodi DOM e i nodi corrispondenti adottano le proprietà/valori definiti in un file CSS.
Conclusione
Il processo CSS identifica gli elementi di una pagina web. Determina anche come gli stili vengono applicati a questi elementi. È essenziale capire che CSS non è una lingua limitata a una lingua o a un unico foglio di stile. Questo post descrittivo illumina i fondamenti e il funzionamento di CSS. Inizialmente, abbiamo fornito brevi dettagli sul concetto fondamentale di CSS e quindi abbiamo descritto il funzionamento collaborativo di HTML e CSS.
Felice calcolo!