In HTML, l'attributo del nome viene utilizzato per specificare un nome per un elemento in HTML, come età, data e molti altri. Viene anche utilizzato sotto forma di riferimento quando vengono inviati i dati in un modulo. Inoltre, l'utente può modellare l'elemento "nome"Accedendolo con l'aiuto di un selettore e quindi applicare le proprietà CSS, tra cui"altezza","colore","colore di sfondo","dimensione del font"E molti altri secondo la tua scelta.

Questo post dimostrerà sull'applicazione dello stile CSS a un nome dell'elemento.

Come posso applicare uno stile CSS a un nome elemento?

Sì, l'utente può modellare il nome dell'elemento con l'aiuto di varie proprietà CSS applicandole. Per fare ciò, prova la procedura passo-passo data.

Passaggio 1: crea un contenitore di div

Inizialmente, utilizza il ""Tag per creare un contenitore div. Quindi, aggiungi un attributo di classe e assegna un nome alla classe in base alle tue preferenze. In questo scenario, il "Div-Main"È impostato come nome della classe.

Passaggio 2: aggiungi l'intestazione

Successivamente, inserisci l'intestazione con l'aiuto di "

"E incorporare il testo tra il tag di apertura e chiusura.

Passaggio 3: creare un modulo

Per creare un modulo, seguire questa procedura:

• Innanzitutto, aggiungi un ""Elemento che viene utilizzato per la creazione di una forma.
• Successivamente, utilizza il “"Elemento per incorporare l'etichetta e poi,""L'elemento viene utilizzato per allocare i campi di forma.
• Il tipo di input è impostato come "testo"Che specifica il campo di testo nel modulo.
• IL "segnaposto"Assegna un breve suggerimento che definisce il valore da mostrare sul campo di input.
• "nome"L'attributo definisce un riferimento previsto quando viene inviato il modulo.
• IL "min"Specifica il valore minimo per un""Elemento.
• Il tipo di input "invia"Viene utilizzato per aggiungere un pulsante al modulo:

Stile CSS a un nome elemento

Il tuo nome




Il tuo genere




Della tua età

Si può notare che il modulo è stato creato correttamente:

Passaggio 4: classe di accesso

Ora, accedi alla classe utilizzando il selettore di classe con il nome della classe. Ad esempio, ".Div-Main"Viene utilizzato per accedere alla classe principale.

Passaggio 5: applicare le proprietà CSS

Dopo aver acceduto alla classe, applicare le proprietà CSS per lo styling:

.Div-Main
Border in stile: tratteggiato;
Margine: 20px 70px;
imbottitura: 20px;
Background-color: RGB (177, 245, 222);

Qui:

• "stile del bordo"La proprietà viene utilizzata per l'aggiunta di uno stile al bordo dell'elemento.
• "margine"Definisce uno spazio al di fuori del bordo definito attorno all'elemento, dove il primo valore è"20px"E aggiunge spazio nella parte superiore e inferiore e il secondo valore,"70px", Imposta lo spazio sui lati sinistro e destro.
• "imbottitura"Definisce uno spazio all'interno del confine.
• "colore di sfondo"È utilizzato per specificare il colore sul retro dell'elemento.

Produzione

Passaggio 6: elemento di accesso "nome"

Ora, accedi al ""Elemento"nome". Ad esempio, accederemo al campo di input con il nome "età".

Passaggio 7: applicare lo stile CSS sull'elemento "nome"

Successivamente, applica gli stili CSS sull'elemento "nome"Utilizzando le proprietà elencate:

Input [name = "Age"]
Altezza: 40px;
Colore: RGB (243, 242, 242);
Background-color: RGB (241, 34, 7);
FONT: audace;
Font-size: grande;

Nel codice sopra:

• "altezza"La proprietà alloca altezza all'elemento selezionato.
• "colore"Viene utilizzato per specificare il colore del testo dell'elemento.
• "colore di sfondo"Viene utilizzato per impostare il colore di sfondo dell'elemento.
• "font"È impostato come"grassetto"Per renderlo prominente.
• "dimensione del font"Specifica la dimensione del carattere. Quando la dimensione del carattere viene modificata, cambia anche le dimensioni del carattere.

Di conseguenza, l'elemento "età"Sarà disegnato come segue:

Ti abbiamo insegnato ad applicare lo stile CSS al nome dell'elemento.

Conclusione

Sì, l'utente può modellare il nome dell'elemento con l'aiuto di diverse proprietà CSS applicandole. Per fare ciò, prima, crea un modulo e aggiungi più campi. Quindi, accedi al "nome"Elemento da""Tag utilizzando il"Input [name = ""]"Sintassi. Quindi, applica le proprietà CSS richieste. Questo post ha spiegato il metodo per lo styling del nome dell'elemento applicando le proprietà CSS.