Propriétés CSS couramment utilisées
☛ Concernant les propriétés CSS, je vous suggère de consulter le manuel pour plus de détails et de commodité. Je classerai ici plusieurs propriétés courantes et. sélectionnez-en simplement quelques-unes. Les valeurs d'attribut communes sont réservées aux débutants comme moi qui apprennent simplement le front-end.
1. Style de police
L'abréviation de font, écrite comme font:font-style|| - taille | Police spéciale oblique
♣Petite lettre majuscule t (font-varian) : normale || Petite police majuscule petites majuscules♣Poids de la police (font-weight) : Normal || Gras couramment utilisé || Extra gras || Plus clair || Directement exprimé en chiffres (valeur 100-900) ♣Taille de la police (font-size) : ici, nous introduisons uniquement ce qui peut être utilisé pour exprimer (px, em, rem) ♣La hauteur de ligne de la police : vous pouvez utiliser le pourcentage de longueur px (en fonction de la taille de la police) || utiliser la valeur numérique ( Facteur de produit) spécifie la hauteur de ligne ♣Famille de polices (font-family) : Spécifie le texte à utiliser une certaine police ou séquence de polices. La valeur est placée entre guillemets simples.démo : body{font-family:helvetica,verdana,sans-serif;}
/*Notes*/ : classés par ordre de priorité. Séparez par des virgules. Comme indiqué dans la définition de police ci-dessus, en supposant que vous n'ayez pas la police Helvetica sur votre ordinateur mais que vous ayez Verdana, votre texte sera affiché dans Verdana.
❤@font-face police intégrée (extension parascolaire)@font-face peut charger le fichier de police côté serveur, afin que le navigateur puisse afficher le fichier de police qui ne se trouve pas sur l'ordinateur de l'utilisateur. Polices installées. Syntaxe :
@font-face {
font-family : nom de police personnalisé ;
src : url (fichier de police sur le serveur) Relatif ou chemin absolu) format (type de police) ;
}
Exemple :
@font-face {/*Cette méthode d'écriture est compatible avec tous les navigateurs*/
font-family : bgg;
src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */
url('fonts/fontawesome- webfont .eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/fontawesome-webfont.woff') format('woff'), / * chrome, firefox */
url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */
}
p{ font-family: bgg }
★Autres styles de polices moins couramment utilisés :
♣caption : utilisez des polices de texte pour les contrôles système avec des titres (tels que des boutons, des menus, etc.) (CSS2)
♣icon : Utiliser la police du label de l'icône (CSS2)
♣menu : Utiliser la police du menu (CSS2)
♣message-box : Utiliser la police du texte du message dialog (CSS2)
♣small-caption : Utiliser la police du petit contrôle (CSS2)
♣status-bar : Utiliser la police de la barre d'état de la fenêtre (CSS2)
2. Style du texte
♦Couleur de la couleur du texte ●Nom de la couleur Les 16 couleurs de base sont aqua, noir, bleu, fuchsia , gris, vert, citron vert, marron, bleu marine, olive, violet, rouge, argent, blanc sarcelle et jaune.
●Contrôle de couleur hexadécimal (hex) (6 chiffres), son format est #336699. Prend en charge les méthodes de comptage de raccourcis pour certaines valeurs hexadécimales. Par exemple, le numéro 336699 pourrait s'appeler le numéro 369.
● Valeur RVB La valeur RVB varie de 0 à 255, R représente le rouge, G représente le vert et B représente le bleu. démo : { color : rgb(51,204,0) >
♦Text-indent, la valeur est la valeur en em, 1em est égal à la largeur d'un mot.
♦Texte horizontal alignement text-align : gauche (alignement à gauche) || center (alignement au centre) || right (alignement à droite) || justifier (justifier les deux extrémités)
♦ Alignement vertical du texte alignement vertical : sub (indice vertical pour le texte aligné) || super (exposant pour le texte aligné verticalement) || Il existe d'autres manuels
♦espacement des lettres, la valeur est normale et la valeur en px.
♦Ajustement du texte retour à la ligne : normal (autorise l'ouverture ou le débordement du contenu) || coupure de mot (le contenu sera renvoyé dans les limites. Les sauts de ligne sont autorisés dans les mots si nécessaire)
♦Contrôle du soulignement de la décoration du texte : aucun (non souligner, par défaut), souligner (souligner), clignoter, surligner (surligner), passer au trait (barré)
♦ Le cas du texte text-transform : la première lettre en majuscule || Convertir en majuscule || Convertir en minuscules
3. Style de liste list-style
▶list-style- image:url(/dot.gif); -symbole de style, sélectionnez l'image comme symbole guide pour l'élément de la liste ▶list-style-position : position du symbole de la liste
♥à l'extérieur (valeur par défaut, La liste est proche du symbole )
♥inside (la liste est en retrait et séparée du symbole)
▶list-style-type : type de symbole (en voici plusieurs couramment utilisés, si vous avez besoin d'un plat japonais, vous pouvez consultez le manuel pour les faux films)
♥Aucun (aucun) ♥Chiffres arabes (décimaux) ♥Cercle plein (disque) ♥Cercle creux (cercle) ♥Carré plein (carré)
♥Lettres anglaises minuscules (alpha inférieur) ♥Anglais majuscule lettres (alpha majuscule) ♥Chiffres romains minuscules (romain minuscule) ♥Chiffres romains majuscules (romain majuscule)
4. L'abréviation de style d'arrière-plan, écrite comme {background-color||background-image||background-repeat||background-attachment||background-position;>
background : La couleur d'arrière-plan, l'image d'arrière-plan, la méthode de mosaïque d'arrière-plan et le positionnement de l'arrière-plan doivent être en ordre. Exemple d'arrière-plan : #F00 url(header_bg.gif) en haut à gauche fixe sans répétition ;
♠Couleur d'arrière-plan♠ Arrière-plan en perspective : transparent ;
♠Image d'arrière-plan backgroung-image:url (chemin du fichier image);
♠Méthode de mosaïque d'arrière-plan background-repeat : répéter (tout en mosaïque, par défaut) | | pas de répétition (pas de carrelage) || répéter-x (carrelage horizontal) || répéter-y (carrelage vertical)
rond (l'image d'arrière-plan se met automatiquement à l'échelle jusqu'à ce qu'elle s'adapte et remplisse tout le conteneur) || espace (l'image d'arrière-plan est carrelée avec le même espacement et remplit tout le conteneur ou une certaine direction)
♠Défilement de l'image d'arrière-plan background-attachment: scroll Valeur par défaut. L'image d'arrière-plan se déplace à mesure que le reste de la page défile.
Corrigé, l'image d'arrière-plan ne bouge pas lorsque le reste de la page défile. ||inherit spécifie que le paramètre de la propriété background-attachment doit être hérité de l'élément parent.
♠Positionnement de l'arrière-plan background-position : Alignement gauche et droit (gauche||centre||) Alignement haut et bas (haut||bas) ;
Vous pouvez également écrire l'alignement sous forme de valeur numérique (ou pourcentage %) : Valeur gauche (%) Valeur supérieure (%)
♠Taille de l'arrière-plan background-size
background-size : auto Automatiquement, la valeur par défaut est la taille de l'image ;
background-size : px ou pourcentage Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".
background-size: cover; Redimensionnez l'image d'arrière-plan proportionnellement pour couvrir complètement le conteneur.
background-size: contain; Agrandit l'image à sa taille maximale afin que sa largeur et sa hauteur s'adaptent parfaitement à la zone de contenu. Mais il ne dépasse pas le conteneur
background-size: 100px 100%; Changer le rapport largeur et hauteur
♠La position de départ de l'arrière-plan background-origin
Écriture {background-origin:padding-box background commence derrière la bordure (par défaut)||border-box l'image d'arrière-plan commence à partir de la bordure||content-box background commence à partir du contenu}
5 . Bordure de style bordure
Abréviation de la ligne de bordure : {border:border-width border-style border-color;>
démo : La la bordure à quatre côtés est la même : {border:1px solid #00F} ;Si vous souhaitez un côté séparé, choisissez la direction souhaitée : {border-[left||right||top||bottom ]:border-width border-style border-color;}
♜Border style border-style : aucun (pas de bordure, par défaut) || caché (bordure masquée) || (ligne pointillée doublée, couramment utilisée)
pleine (ligne continue, couramment utilisée) || double (ligne continue double) || rainure (ligne continue claire) || Ligne)|| début (ligne continue avec lumière en haut à gauche et profonde en bas à droite)
♜La largeur de la bordure, la valeur est la valeur en px.
♜Le couleur de la ligne de bordure border-color, la valeur est le mot anglais de la couleur ou la couleur hexadécimale
♜inherit : Spécifie que le paramètre de l'attribut border doit être hérité de l'élément parent.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
