Taille de la case CSS

Dans cet article, nous discuterons des propriétés CSS pour augmenter la taille d'une case à cocher. La case à cocher par défaut dans le langage de balisage hypertexte est petite et peut parfois être difficile à localiser sur la page Web. Nous discuterons de la hauteur, de la largeur et de la transformation des propriétés couramment utilisées du CSS. Nous allons mettre en œuvre plusieurs exemples liés à ce phénomène dans l'environnement du bloc-notes ++.

Exemple 01: Augmenter la taille d'une case à cocher par défaut en utilisant les propriétés de hauteur et de largeur via le style étiquette CSS

Dans cet exemple, nous augmenterons la taille d'une case à cocher par défaut que le langage de balisage hypertexte fournit. La technique de la balise de style CSS sera utilisée dans cet exemple pour donner à la case à cocher une taille différente. Les deux propriétés qui changent la taille seront ajoutées à une classe de style pour la case à cocher dans cet exemple.

Dans le script ci-dessus, nous commençons par l'en-tête du fichier dans lequel nous avons appelé la balise CSS «style». À l'intérieur de cette balise, nous ajouterons une classe pour l'élément d'entrée qui représente la case à cocher de la langue de balisage hypertexte. Nous nommerons la taille de la classe. Dans cette classe, nous définirons les propriétés qui modifieront la taille de la case à cocher. Tout d'abord, nous définirons la propriété de largeur en lui donnant une valeur de «50px». Ensuite, nous définirons la propriété de hauteur en lui donnant la même valeur.

Après cela, nous fermerons le style du fichier et les balises d'en-tête pour ouvrir la balise corporelle. Dans la balise du corps, nous commencerons par lui donner une rubrique avec une balise «H1». Ensuite, nous ouvrirons la balise d'entrée. Dans cette balise, nous définirons le type de l'élément d'entrée en l'étiquetant comme une case à cocher. Après cela, nous appellerons également la «taille» de la classe de style que nous avons créée dans l'en-tête du fichier. En fin de compte, nous le spécifierons comme «vérifié» par défaut et fermerons la balise d'entrée et de corps.

Après avoir enregistré le script précédent et l'ouvrir sur notre navigateur, nous obtiendrons la sortie ci-dessus. En raison des paramètres de hauteur et de largeur dans cette sortie, la case a élargi en taille.

Exemple 02: Augmenter la taille d'une case à cocher par défaut en utilisant les propriétés de hauteur et de largeur via CSS en ligne

L'approche de balise de style CSS en ligne sera utilisée pour ajuster la taille de la case à cocher dans cet exemple. Nous augmenterons une case à cocher par défaut offerte par la langue de balisage hypertexte dans cet exemple. Les deux fonctionnalités changeant la taille seront appliquées à une balise de style à l'intérieur de l'élément d'entrée de cet exemple.

Au début du script, nous ouvrirons une balise de style dans la balise de tête uniquement pour le corps du fichier dans lequel nous allons aligner le texte du corps au centre de ce script. Ensuite, nous fermerons le style et la tag de tête pour ouvrir l'étiquette corporelle. Dans la balise Body, nous donnerons une direction à la page à l'aide de la balise «H1». Ensuite, nous ouvrirons la balise d'entrée et définirons le type de l'élément d'entrée en l'identifiant comme une «case à cocher."Suite à cela, nous spécifierons le style de la case à cocher en utilisant le terme CSS en ligne« Style."Dans cet appel, nous définirons les caractéristiques de largeur et de hauteur en leur fournissant des valeurs de pixels. Ensuite, nous le définirons sur «vérifié» par défaut et fermer les étiquettes d'entrée et de corps. Nous enregistrerons ce fichier dans le «.Format HTML »et ouvrez-le sur notre navigateur pour obtenir la sortie affichée ci-dessous:

Nous pouvons observer dans cette sortie que la case à cocher a augmenté en raison des propriétés de hauteur et de largeur telles que définies à l'intérieur de l'attribut de style de la balise d'entrée.

Exemple 03: Augmenter la taille d'une case à cocher par défaut en utilisant la propriété Transform via Style Tag CSS

Nous augmenterons la taille d'une case à cocher par défaut fournie par le langage de balisage hypertexte. Dans cet exemple, la boîte à cocher recevra une taille personnalisée à l'aide de la technique de la balise de style CSS. Dans cet exemple, la propriété Transform sera ajoutée à une classe de style à cocher qui agrandira la taille de la case à cocher par défaut.

Dans le script suivant, nous commençons par l'en-tête du fichier où nous avons nommé la balise CSS «style."Dans la balise d'entrée, nous ajouterons une classe à l'élément d'entrée qui représente la case à cocher Language de balisage hypertexte. Nous appellerons alors la taille de la classe. À l'intérieur, nous créerons l'attribut qui ajustera la taille de la case à cocher. La propriété Transform sera définie et écrite avec le mot-clé de l'échelle qui acceptera le total de taille d'échelle comme une entrée. Après cela, nous fermerons la balise de style du fichier et l'en-tête pour faire de la place pour la balise corporelle. Nous allons commencer par une balise «H1» dans l'étiquette corporelle pour lui donner une rubrique. Ensuite, nous ouvrirons la balise d'entrée où nous allons étiqueter l'élément d'entrée en tant que case à cocher et décrire son type. Après cela, nous nommerons la «taille» de la classe de style que nous avons établie dans l'en-tête du fichier. Enfin, nous allons définir la valeur par défaut sur «vérifié» et fermer les étiquettes d'entrée et de corps.

Nous obtiendrons la sortie ci-dessus après avoir enregistré le script précédent et l'ouvrir dans notre navigateur. Dans cette sortie, nous pouvons voir que la case à cocher s'est développée en raison de la propriété de transformation.

Exemple 04: Utilisation de trois propriétés CSS pour augmenter la taille d'une case à cocher dans un fichier HTML

L'approche de balise de style CSS en ligne sera utilisée pour ajuster la taille de la case à cocher dans cet exemple. Les trois propriétés CSS seront ajoutées à une balise de style à l'intérieur de la balise d'entrée dans cet exemple. Nous augmenterons la taille de la boîte à cocher par défaut offerte par la langue de balisage hypertexte.

Dans ce script, nous commencerons par ouvrir une balise de style dans la balise de tête qui ne s'applique qu'au corps du fichier. Ensuite, nous allons centrer le contenu du corps. Les étiquettes de style et de tête seront ensuite fermées, permettant à l'étiquette corporelle d'être ouverte. Avec l'aide de l'élément «H1» dans l'étiquette corporelle, nous donnerons à la page une rubrique. Suite à cela, nous utiliserons le terme CSS en ligne CSS pour exprimer le style de la case à cocher. Dans cet appel, nous spécifierons les caractéristiques de largeur et de hauteur en leur fournissant des valeurs de pixels. Ensuite, nous ajouterons également la propriété Transform de cet appel pour mettre à l'échelle la case en conséquence. Après cela, nous le définirons comme «vérifiés» et fermerons les étiquettes d'entrée et de corps. Nous enregistrerons ce fichier dans le «.Format HTML »et ouvrez-le sur notre navigateur pour obtenir la sortie affichée ci-dessous:

À la suite de la hauteur, de la largeur et des propriétés de transformation de cette sortie définies à l'intérieur de la balise d'entrée, la case a élargie en taille.

Conclusion:

Dans cet article, nous avons discuté de plusieurs propriétés CSS qui sont utilisées pour augmenter la taille ou développer une case à cocher de taille par défaut dans un fichier HTML. Les deux premières propriétés sont la hauteur et la largeur qui peuvent être ajoutées à une classe ou une balise de style dans l'élément d'entrée de la langue de balisage hypertexte. Ces propriétés ont été utilisées pour augmenter la taille d'une case à cocher dans deux techniques CSS différentes qui sont des étiquettes CSS de style et CSS en ligne. Nous avons également implémenté la propriété Transform que CSS fournit qui utilise la fonction d'échelle pour étendre une case par défaut.