Dimensione del pulsante CSS
Esempio 01:
In questo esempio, useremo la proprietà di larghezza e altezza per l'elemento pulsante per aumentare le sue dimensioni. Utilizzeremo l'approccio del tag in stile CSS in questo esempio per aggiungere diverse proprietà. Innanzitutto, esamineremo la dimensione predefinita dell'elemento pulsante presente in un file HTML.
Come possiamo vedere nella sceneggiatura data, non abbiamo modificato le dimensioni del pulsante. Nel seguente output, possiamo vedere che la dimensione del pulsante è molto piccola e non è possibile per una pagina web.
Quindi, ora aggiungiamo lo stile al pulsante. Innanzitutto, apriamo il tag principale per il file. In questo tag, il tag di stile per CSS si chiama. In questo tag, aggiungiamo tutte le proprietà per l'elemento pulsante. Scriviamo tutte le proprietà per l'elemento pulsante all'interno della parentesi della classe dei pulsanti. Innanzitutto, impostiamo il colore di sfondo su "giallo". Quindi, abbiamo impostato la larghezza in formato pixel su "100px". Infine, abbiamo impostato l'altezza in formato pixel su "30px". Chiudiamo lo stile e le tag di testa dopo che tutta la formattazione è completa. Quindi andiamo al tag del corpo. Scriviamo il titolo della pagina usando il tag H1 nel tag del corpo e quindi apriamo il tag pulsante. La classe dal tag di stile viene chiamata nel tag pulsante. Successivamente, chiudiamo il tag del pulsante con il testo che viene visualizzato sul pulsante in mezzo, così come il tag del corpo.
Come spiegato in precedenza, abbiamo aggiunto il codice nello script precedente. Ora apriamo questo nuovo script sul nostro browser dopo averlo salvato nel formato corretto.
Nell'output fornito, possiamo vedere che il pulsante ha tutta la formattazione compresa la dimensione che abbiamo specificato nella classe di stile nell'intestazione del file.
Esempio 02: utilizzando CSS inline per modificare le dimensioni di un pulsante in un file HTML
In questo esempio, useremo il CSS in linea per modificare la dimensione dell'elemento pulsante predefinito di un file HTML. Tutte le proprietà di stile verranno assegnate all'interno del tag pulsante. Questo è un metodo non convenzionale per aggiungere CSS a qualsiasi elemento e sarà associato solo all'elemento corrente.
Come possiamo vedere nello snippet precedente, ci siamo spostati direttamente nel corpo del file poiché tutto il contenuto sarebbe nel tag del corpo. Innanzitutto, apriamo il tag H1 per scrivere un'intestazione per la pagina e poi chiuderlo. Quindi, apriamo il tag del pulsante. In questo tag, chiamiamo l'attributo di stile per la sua parola chiave. Successivamente, scriviamo tutte le proprietà per l'elemento pulsante nelle virgole invertite e le separano usando il carattere a secolo. Innanzitutto, assegniamo il colore di sfondo, "giallo". Quindi, assegniamo la larghezza nel formato pixel. Alla fine, assegniamo l'altezza, anche nel formato pixel. Dopo questo, chiudiamo il tag del pulsante con il testo in mezzo, che apparirà sul pulsante. E chiudi il tag del corpo insieme ad esso. Ora salviamo questo file in ".HTML ”formato e aprilo sul nostro browser per ottenere il seguente risultato:
Come possiamo vedere nell'output della nostra sceneggiatura, sono visibili l'intestazione e il pulsante dal tag del corpo. Il pulsante ha tutti i valori definiti nel tag, tra cui l'altezza e la larghezza.
Esempio 03: Aumentare la dimensione di un pulsante quando si libra con il nostro cursore in un file HTML
In questo esempio, useremo le proprietà della larghezza e dell'altezza dell'elemento pulsante per renderlo più grande, solo quando il puntatore è sopra di esso. In questo esempio, useremo i tag in stile CSS per aggiungere numerosi attributi ed effetti all'elemento pulsante.
In questo esempio, personalizziamo il pulsante utilizzando i tag in stile CSS. Innanzitutto, apriamo il tag principale del file. E poi, chiamiamo il tag in stile CSS da lì. Aggiungiamo tutti gli attributi dell'elemento pulsante in questo tag. All'interno della parentesi della classe dei pulsanti, inseriamo tutte le proprietà per l'elemento pulsante; In questo esempio, impostiamo il colore di sfondo su "giallo."Quindi, apriamo una classe di bottoni che eredita un metodo chiamato" Hover ". In questa funzione, facciamo quanto segue: impostiamo la larghezza in formato pixel su "100px" e impostiamo l'altezza in formato pixel su "30px". Dopo aver finito la formattazione, chiudiamo lo stile e le tag della testa. Quindi andiamo al tag del corpo. Usiamo il tag H1 per creare il titolo della pagina nel tag corpore, quindi aprire il tag pulsante. Il tag pulsante utilizza la classe dal tag di stile e avere il testo che appare sul pulsante in mezzo. In seguito, chiudiamo il tag del pulsante e il tag del corpo.
Come possiamo vedere nell'output precedente, le dimensioni e il colore di sfondo sono cambiati mentre ci passavamo sul pulsante con il nostro cursore. Questo perché la funzione hover ha tutte queste proprietà definite nel tag di stile del file dell'intestazione.
Esempio 04: Utilizzo della dimensione del carattere per migliorare la dimensione di un pulsante usando CSS
In questo esempio, opteremo a un metodo diverso per modificare le dimensioni di un pulsante. La proprietà delle dimensioni del carattere verrà utilizzata per aumentare le dimensioni di un pulsante utilizzando il tag di stile CSS.
Innanzitutto, apriamo il tag di stile nell'intestazione del file e creiamo una classe di styling per il pulsante. In questa classe, assegniamo un colore di sfondo al pulsante. Dopodiché, assegniamo anche la dimensione del carattere. In questo caso, è impostato su "25px". Quindi, chiudiamo la classe e lo stile e le tag della testa, rispettivamente. Quindi il tag del corpo ha un'intestazione e un tag pulsante che ha la classe di tag di stile ereditata in esso. Dopo questo, chiudiamo i tag e salviamo il file per aprirlo sul nostro browser.
Nella schermata di output, possiamo vedere che il pulsante ha una dimensione aumentata dal pulsante predefinito che l'HTML fornisce a causa della modifica della proprietà delle dimensioni del carattere.
Conclusione
In questo articolo, abbiamo discusso della dimensione dell'elemento pulsante presente nel linguaggio di markup ipertestuale. Il pulsante predefinito ha una dimensione molto piccola che rende difficile navigare su una pagina web. Quindi, abbiamo usato i diversi approcci in CSS come il tag di stile e l'approccio CSS in linea. La proprietà più comune utilizzata per modificare le dimensioni è la proprietà di larghezza e altezza di un pulsante. Abbiamo discusso di questo concetto e implementato questo sul blocco note++. Abbiamo anche implementato l'approccio delle dimensioni del carattere per aumentare le dimensioni di un pulsante.