Rulest CSS

“In CSS, il set di regole è definito come la regola che abbiamo seguito per dare stile ai selettori. Possiamo usare il nome del selettore e quindi dichiararlo utilizzando proprietà diverse. Possiamo utilizzare uno o più selettori nel nostro codice CSS e utilizzare più proprietà insieme ai loro valori nella parte della dichiarazione. Quando utilizziamo qualsiasi proprietà CSS, dobbiamo assegnare alcuni valori a queste proprietà in base alla nostra scelta. Se è disponibile una parola chiave che utilizziamo anziché il valore, assegneremo anche queste parole chiave a tale proprietà. In breve, utilizziamo il nome del selettore e quindi posizioniamo le parentesi graffe e in queste parentela ricci, utilizziamo diverse proprietà di stile che vogliamo applicare al selettore selezionato e quindi diamo il valore a queste proprietà. Spiegheremo in dettaglio questo set di regole in CSS seguendo questa regola nel nostro codice CSS qui."

Sintassi

Selettore
Costo dell'immobile;

Esempio 1

Per seguire questo set di regole nel nostro codice CSS, dobbiamo scrivere un po 'di codice in HTML e modellare questi elementi HTML in un file CSS seguendo la regola nel nostro codice CSS. Dobbiamo creare un nuovo file e quindi, dopo aver selezionato HTML come lingua, iniziare la codifica in questo file. È inoltre possibile utilizzare Notepad o qualsiasi editor di testo per la compilazione di questi codici.

Ora, dichiareremo l'intestazione 1 e 2 usando i tag e creeremo un semplice paragrafo sotto queste intestazioni. Stiamo creando questi titoli e i paragrafi nel corpo dell'HTML e, dopo aver salvato questo, ci sposteremo nel file CSS per applicare proprietà a questi titoli e paragrafi seguendo la regola. Dobbiamo collegare il file CSS a questo file in modo che tutte le proprietà che useremo nel file CSS siano applicate qui a questo paragrafo e intestazioni.

Seguiremo la regola per lo styling di questi titoli e paragrafi; Innanzitutto, utilizziamo il nome del selettore e quindi posizioniamo le parentesi graffe secondo la regola. Dopo questo, dobbiamo dare il nome della proprietà che vogliamo usare. Qui, "H1" è il selettore e all'interno delle parentesi graffe, abbiamo la proprietà "colore", che viene utilizzata per cambiare il colore del carattere in quel colore che posizioniamo qui come valore per questa proprietà. Useremo il colore "bianco" come colore del carattere e poi cambieremo la "famiglia di carattere" impostando "Times New Roman" come valore per questa "famiglia dei caratteri."

Come abbiamo selezionato il colore "bianco" per il carattere, quindi dobbiamo cambiare il colore dello sfondo. Quindi, per questo, utilizziamo la proprietà "color background" e impostiamo il "nero" come valore di questa proprietà. Qui, completiamo lo stile di "H1" e chiudiamo le parentesi graffe ricci. Ora, per applicare lo stile su "H2", usiamo di nuovo il selettore, che è "H2", e quindi diamo la proprietà all'interno delle parentesi graffe ricci. Abbiamo impostato la proprietà "Black" e la proprietà "Font-Family" che stiamo usando qui e diamo "Arial" come valore. Come qui, stiamo usando il carattere nero, quindi impostiamo la proprietà "color sfondo" su "bianco" e chiudiamo le parentesi graffe del "H2" qui.

Poi arriva il paragrafo, quindi useremo la "P" come selettore e quindi dichiarare proprietà qui per il paragrafo. Stiamo impostando le dimensioni del carattere del paragrafo utilizzando la proprietà "Size Font" e quindi impostando il valore "15px" per questo. Quindi, cambia la "famiglia del carattere" di questo paragrafo in "calibri", che imposta il semplice carattere del paragrafo in carattere "calibri". Vogliamo anche cambiare lo stile del carattere, quindi, per questo, stiamo usando la proprietà "in stile font" e usiamo la "parola chiave" qui, che è "corsivo."Il nostro carattere di paragrafo apparirà in" corsivo "" in stile font."Quindi, abbiamo la proprietà" font-peso "e usiamo la parola chiave" audace "per cambiare il carattere in uno stile audace. Il colore del carattere del paragrafo è impostato utilizzando la proprietà "Colore" su "Rosso."

L'output fornito mostra che tutte le proprietà che abbiamo usato nel file CSS sono applicate al testo che scriviamo nel codice HTML. Lo stile del carattere, il colore e il colore di sfondo, tutte le proprietà che usiamo tutte qui rese nell'output. Se non seguiamo la regola, queste proprietà di stile non vengono applicate al nostro testo o documento.

Esempio n. 2

Qui, in questo codice HTML, creiamo un "div" all'inizio, all'interno del corpo. Quindi, creeremo due titoli diversi. Dopo questi titoli, abbiamo anche un paragrafo in questo codice. Tutti questi titoli e paragrafi sono scritti all'interno del "div."Chiudiamo il" div "alla fine del codice prima di chiudere il tag" corpo ".

Ora, qui puoi vedere come cambiamo lo stile di tutte queste intestazioni, div e paragrafi. Seguiamo di nuovo la regola per applicare lo stile. Innanzitutto, stiamo cambiando il "colore" del carattere e stacciamo il suo valore come "arancione."E usa un'altra proprietà per cambiare la famiglia dei caratteri utilizzando la proprietà" Font-Family "e impostando il nome" Algeriano "come valore.

Quindi, cambiamo solo il colore della seconda intestazione usando la proprietà "Colore" e impostiamo il colore della seconda intestazione su "Blue."Abbiamo anche un paragrafo, quindi abbiamo impostato il suo" colore di sfondo "su" rosa."Quindi la proprietà" Colore "cambia il colore del carattere in" nero "e il valore" 15px "per l'impostazione della dimensione del carattere."Vogliamo anche renderli tutti al centro della pagina, quindi per questo utilizziamo la proprietà" allineate al testo "e impostiamo la parola chiave" centro ", che imposta tutti questi selettori sul" centro "e come usiamo Per applicare questo "allineamento del testo" su tutti i selettori, quindi usiamo "corpo" e all'interno di questo "corpo" usiamo questa proprietà.

Nell'output, puoi vedere che tutti i titoli e i paragrafi sono allineati al centro e tutte le proprietà che definiamo sopra sono applicate qui. Nell'output, è possibile notare facilmente la differenza nel testo in quanto utilizziamo proprietà diverse per tutti i selettori.

Esempio n. 3

Nel nostro terzo e ultimo esempio, creeremo tre titoli, un paragrafo e anche un elenco che è un elenco non ordinato e faremo un po 'di stile su tutti questi.

Innanzitutto, applicheremo lo stile a "H1". Mettiamo il nome del selettore "H1" e usiamo proprietà diverse. Abbiamo impostato il suo colore di testo usando "Color: Green" e quindi usiamo "Font-Family", che è una proprietà e usiamo "Algerian" per questo. Poi arriva "colore di sfondo", che impostiamo come "giallo."Inoltre, allinea questo intestazione al" centro "con l'aiuto della proprietà" allineate al testo "e dai uno stile" corsivo "a questo" H1 ".

Ora, cambieremo lo stile di "H2" allo stesso modo di "H1". Il "colore" è impostato qui come "arancione" e la "famiglie del carattere" è "Arial" per questo. Il "colore di sfondo" per questo è "rosa" ed è "centrale" allineato. Abbiamo anche un paragrafo, quindi ora useremo questa "P" come selettore; La proprietà che stiamo usando per questo è la proprietà "Size Font" e la imposta come "15px" e la "famiglie di carattere" è "calibri" e il "font-peso" che usiamo è "in grassetto."

Dato che abbiamo un elenco in questo esempio, utilizziamo questo selettore "UL" e applichiamo stili. Abbiamo impostato il suo "colore", che definisce il colore del testo su "viola", e la "dimensione del carattere" di questo elenco è "20px" e "corsivo" in "Font Style."

Nell'output, il colore di sfondo della prima intestazione è diverso dalla seconda intestazione e la famiglia dei caratteri viene cambiata. Quindi anche la famiglia dei caratteri, il colore e lo stile per paragrafi ed elenchi sono diversi. Usiamo proprietà diverse per tutti i selettori, quindi ecco l'output, tutte queste proprietà vengono applicate.

Conclusione

Abbiamo discusso del set di regole in CSS in questo tutorial. Abbiamo scritto questo tutorial per spiegare quale sia il set delle regole e come seguiamo questo set di regole in CSS per applicare proprietà diverse. Abbiamo spiegato che dobbiamo prima usare il nome del selettore e quindi aprire una staffa riccia; Quindi, dopo aver aperto questa fascia ricci, posizioniamo il nome della proprietà che vogliamo utilizzare e quindi impostiamo il suo valore, o anche utilizziamo la parola chiave se disponibile per questa proprietà. Abbiamo discusso che dobbiamo seguire questa regola in CSS. Dopo aver appreso questo concetto da questo tutorial, utilizzerai la proprietà nel codice CSS.