Lezioni nidificate CSS

CSS è un linguaggio che viene aggiunto a un altro linguaggio di progettazione front-end, HTML per creare un sito Web o una pagina web. Per la dichiarazione interna ed esterna di CSS, dobbiamo dichiarare ID o classi con le funzionalità che vogliamo applicare al contenuto di HTML.

Classe CSS:

In CSS o in qualsiasi altro linguaggio di programmazione, le classi svolgono un ruolo importante quando parliamo della specifica di qualsiasi elemento. In CSS, le lezioni vengono create per dichiarare un paio di stili ed effetti sugli elementi HTML. Tutte le proprietà CSS sono scritte all'interno del corpo di classe assegnando i valori alle proprietà. Per esempio:

.nome della classe
Property_name: valore;

Una classe è dichiarata con un punto e il nome di classe. Queste classi sono accessibili dal contenuto HTML quando il nome della classe è scritto all'interno dei tag particolari, come abbiamo fatto per uno dei contenuti HTML come il paragrafo < p class= "class_name"> Questo è un paragrafo

menzionando il nome tutte le caratteristiche di una classe vengono applicate a quel contenuto. Lo scopo principale della creazione di questa classe è che tutte le caratteristiche e gli stili possano essere consentiti contemporaneamente al contenuto di HTML.

Classi nidificate:

Proprio come la classe semplice, vengono anche create le lezioni nidificate durante la progettazione delle pagine Web. Il fenomeno nidificato non è sconosciuto anche per gli sviluppatori e i designer perché questo termine si applica alle dichiarazioni IF-Else, sui loop e ecc. La dichiarazione della classe nidificata CSS è in qualche modo simile ai loop nidificati. Non solo la classe, ma anche i tag HTML sono influenzati dal termine "classi nidificate". Un tag HTML di contenuto viene una volta dichiarato con un nome di classe. Quindi, all'interno di questo tag, l'altro tag dello "stesso" contenuto HTML viene dichiarato con un altro nome di classe. Alla fine, entrambi i tag sono chiusi collettivamente. Questo rende il primo tag quello esterno e il secondo tag un tag interiore. Possiamo usare più di un tag interiore alla volta. Una volta menzionato il nome della classe nei tag esterni, tutti i tag interni di altri contenuti HTML non dovranno aggiungere ulteriormente alcun nome di classe con essi.

testo

testo

Questa era la dichiarazione del nome di classe all'interno del corpo HTML. Ora vedremo come sono dichiarate le lezioni nella sezione testa. Innanzitutto, viene dichiarata la classe del tag HTML esterno e quindi quella interna.

Questa è in qualche modo la relazione di classe genitore-figlio. Perché il tag HTML esterno, ad esempio, il tag ha una classe 'Class1'. È dichiarato insieme al suo contenuto di paragrafo come:

.Class1 P

Non possiamo usare direttamente la classe di paragrafi. Ora, considera un tag DIV interiore che ha un'altra classe 'Classe2'. Per la classe nidificata, aggiungeremo la classe di entrambi i tag. L'esterno e quello interno di Div.

.class1 class2 p

Ciò è necessario per specificare il contenuto di HTML alla sua classe e a chi appartiene. Ora proveremo alcuni esempi per elaborare questo concetto.

Esempio 1:

In questo esempio, viene aggiunto un semplice colore del corpo utilizzando il tag HTML. Quindi, viene utilizzato un tag DIV con una classe CSS denominata contenitore.

All'interno di questo div, viene utilizzato un tag di intestazione per aggiungere una semplice intestazione. Un paragrafo viene utilizzato per aggiungere una semplice frase. Entrambi i tag non sono accompagnati dalla classe CSS perché questi saranno disegnati direttamente attraverso il nome del contenitore Div.

Ora all'interno del tag DIV, prima di chiudere questo div, aggiungeremo un altro div con un nuovo nome di classe CSS.

Questo div contiene di nuovo sia l'intestazione che i paragrafi al suo interno. Chiudi il Div, il primo tag di chiusura è per il Div interno e il secondo tag di chiusura è per il Div esterno.

Chiudi l'etichetta del corpo. Nel tag di stile della testa, in primo luogo, dichiareremo la classe del primo "contenitore". L'intestazione della classe del contenitore è accessibile dal nome della classe del div esterno.

.Container H1
Font-size: 24px;
Colore: ciano;

Il colore dei caratteri e le dimensioni del carattere sono applicati alla voce. Allo stesso modo, il paragrafo è applicato anche dal CSS con le stesse dimensioni del carattere e le proprietà del colore. Quando si tratta della descrizione della classe per il Div interno, usiamo sempre la classe Div esterna insieme alla classe Div interiore e quindi gli elementi all'interno del div. Questo per accedere correttamente al contenuto HTML. Non possiamo accedere direttamente alla classe all'interno del Div solo con il suo nome, proprio come la classe genitore-figlio in eredità. Innanzitutto, scriviamo il nome della classe genitore e poi la classe figlio. In questo modo, qualsiasi ambiguità riguardante diversi genitori e più di un bambino verrà rimossa.

.contenitore .Myclass p
Font-size: 24;
Colore: Lightgreen;

Chiudi tutti i tag aperti e salva il codice nel file dell'editor di testo come estensione HTML. Questa estensione consentirà di visualizzare la pagina Web nel browser.

Durante l'esecuzione, vedrai che verrà creata una pagina web nera con messa a terra con tutte le intestazioni e i paragrafi con lo stesso allineamento e gerarchia in cui sono stati dichiarati con tutti gli effetti CSS. Questo perché il foglio di stile contiene la proprietà CSS della classe nella stessa sequenza delle classi definite nei tag HTML.

Esempio 2:

Questo esempio riguarda l'uso di un elenco nel codice HTML. Lo stesso div con un contenitore di classe viene usato come div esterno per le classi nidificate. Vengono utilizzati un semplice tag di intestazione e paragrafo per il contenuto del div esterno. Dopodiché, un div interiore viene dichiarato con la stessa classe. Questo div contiene HTML non ordinato con esso.

Dopo questo div, un altro div all'interno del secondo div viene utilizzato per creare classi nidificate. Questo div contiene un nome di classe diverso per essere identificato correttamente.

< div class = "MyClass1" >

All'interno di questo Div, abbiamo usato una voce e una lista non ordinata. Ora, vediamo la sezione CSS. Tutte le classi e le proprietà sono dichiarate nello stesso modo in cui abbiamo fatto nell'esempio passato. Solo l'aggiunta è la classe del più interno o del terzo div.

.contenitore .Myclass1 h1
Font-size: 20px;
Colore bianco;

Salva il codice ed esegui il file.

Vedrai che ogni div e i suoi elementi sono applicati con gli effetti che abbiamo fornito nelle classi CSS.

Conclusione

Le classi nidificate CSS sono un approccio per dichiarare gerarchicamente le lezioni che causano il fenomeno esterno e interno dei tag. Assicurati che i tag HTML su cui dobbiamo implementare le classi nidificate CSS siano dello stesso tipo, ad esempio, un'intestazione. Se una gerarchia della dichiarazione di classe viene modificata o la sequenza è disturbata, sarà difficile applicare le proprietà CSS al contenuto di HTML in una classe nidificata. Abbiamo elaborato questo argomento usando due esempi, uno con un singolo contenuto interno, mentre il secondo esempio contiene due contenuti HTML interni.