Per specificare come apparirà un documento HTML, vengono utilizzati fogli in stile CSS. Inoltre, ci sono tre modi per scrivere proprietà di stile CSS che sono CSS in linea, CSS incorporati e fogli di stile CSS esterni. Un foglio di stile incorporato è quello che integra i dati del foglio di stile in un documento HTML utilizzando l'elemento.

Questo articolo discuterà:

• Struttura della pagina HTML
• Come creare un foglio di stile incorporato CSS?

Struttura della pagina HTML

Una pagina HTML ha principalmente due sezioni, "Testa" E "corpo". La sezione principale contiene le meta informazioni sulla pagina, mentre la sezione del corpo comprende gli elementi visibili nella pagina web, come immagini, elenchi, tabelle, intestazioni e altro ancora.

Il foglio di stile CSS è incorporato all'interno della sezione della testa, all'interno dell'elemento, come evidenziato con la freccia rossa:

Come creare un foglio di stile incorporato CSS?

In HTML, in primo luogo, crea un elemento div con il nome della classe "contenuto". All'interno di questo elemento, aggiungi

Elemento ed elemento associati agli attributi:

• src: Questo attributo viene utilizzato per specificare il percorso dell'immagine.
• Al: Questo attributo specifica il testo alternativo che verrà visualizzato quando un'immagine non viene caricata.
• larghezza: Questo attributo viene utilizzato per specificare la larghezza dell'immagine.

Quindi, aggiungi il
Tag per aggiungere pause di riga e

elemento con l'ID "parà"Per aggiungere contenuti alla pagina Web:

Scuola Linuxhint

Ciao mondo!

Stile tutti gli elementi

*
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

IL "*"È utilizzato per rappresentare tutti gli elementi applicati al"famiglia di font" proprietà. Qui, il valore "Verdana, Ginevra, Tahoma, Sans-Serif"Viene fornito per garantire che se il primo stile di carattere non è supportato dal browser, verrà applicato il prossimo.

Elemento div "contenuto" di stile

.contenuto
larghezza: 500px;
Altezza: 300px;
imbottitura: 5px;
Margine: auto;
imbottitura-sinistra: 50px;
Background-color: #7db9e4;

IL ".contenuto"È specificato per accedere all'elemento Div con contenuto di classe e applicare le proprietà fornite:

• "larghezza"La proprietà imposta la larghezza dell'elemento.

• "altezza"Set di proprietà/regola l'altezza dell'elemento.
• "imbottitura"L'attributo include lo spazio attorno al contenuto dell'elemento o all'interno del bordo dell'elemento.
• "margine"La proprietà aggiunge spazio attorno all'elemento.
• "imbottitura-sinistra"La proprietà aggiunge lo spazio a sinistra del contenuto dell'elemento.
• "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.

Elemento "img" di stile

img
Transizione: tutti 0.3s facilità;

L'elemento viene applicato in transizione con il CSS "transizione"Proprietà, dove"Tutto"È un effetto di transizione,"0.3s"Si riferisce alla durata della transizione e"sollievo"Si riferisce all'effetto di transizione con un inizio lento, quindi veloce, e termina lentamente.

Elemento "IMG" di stile su Hover

.contenuto img: hover
Cursore: puntatore;
Transform: prospettiva (100px) Translate3D (50px, 20px, 20px);

Di seguito sono spiegate le proprietà applicate all'elemento su Hover:

• "cursore"La proprietà specifica lo stile del cursore del mouse sull'elemento, in cui il valore"Pointer"Mostra una mano del cursore con un dito indicatore.
• Come valore del "trasformare"Proprietà, la"prospettiva (100px)"La funzione viene utilizzata per specificare la distanza tra l'utente e l'oggetto e"Translate3D (50px, 20px, 20px)"Trasferisce un elemento nel piano 3D. Questi parametri visualizzano rispettivamente l'asse x, l'asse Y e l'asse z.

Stile ID "para" dell'elemento "P"

#para
Font-size: 25px;
Font-weight: audace;
Colore: #3802ce;
imbottitura: 5px;

IL "#parà"Viene utilizzato per accedere all'elemento con ID para e applicare le seguenti proprietà:

• "dimensione del font"La proprietà imposta la dimensione del carattere dell'elemento.
• "Font-peso"La proprietà imposta la dimensione del carattere per essere sottile o spessa.
• "colore"La proprietà viene utilizzata per impostare/applicare il colore del carattere dell'elemento.

Ecco l'output del codice sopra indicato:

Dall'output si può osservare che il foglio di stile incorporato è stato applicato con successo.

Conclusione

I fogli di stile incorporati CSS sono adatti a documenti che hanno esigenze di progettazione specifiche. Per creare un foglio di stile incorporato, è necessario dichiarare proprietà CSS all'interno dell'elemento. Questo elemento di stile è specificato nel tag Head HTML. In questo post, abbiamo dimostrato il metodo per creare fogli di stile CSS incorporati con un esempio.