Propriétés courantes des polices CSS : introduction à background-origin et background-clip

(1) Polices couramment utilisées Attributs :

　　font-weight : valeur d'attribut 100-900 400 est égal à la normale 700 est égal au gras, plus la valeur est grande, le plus fort Thick

　font-size : taille de police, l'unité peut être px ou %

　font-family : famille de polices, par exemple : Microsoft Yahei

　font-style : Style de police italique italique normal normal

　font-variant:small- majuscules Les lettres sont converties en lettres plus petites

Remarque : Tous les attributs peuvent également être écrits via l'attribut font, par exemple :

Police : italique gras 75%/1.8 'Microsoft Yahei',sans - serif, l'ordre d'écriture : font-style font-variant font-weight font-size line-height font-famiyl, plusieurs styles sont séparés par des espaces et doivent être écrits dans cet ordre, la taille de la police et la hauteur de la ligne doivent être séparées par /

(2) Couleur de la police : couleur : la valeur de l'attribut peut être écrite en couleur anglais, par exemple : rouge

ou rgb (0-255 ,0-255,0-255);

Ou rgba(0-255,0-255,0-255,0-1);0 signifie transparent, 1 signifie opaque

　opacité :0-1; signifie aussi transparence. La différence avec rgba(), cet attribut agira sur les balises descendantes, alors que rgba() ne le fera pas.

(3) Espacement des lignes, alignement

　　　　 Line-height (hauteur de la ligne) : a. Pixels Unité, telle que 48px b. Sans px multiple de la hauteur de ligne normale c. Le pourcentage est le même que b (ajustez la méthode de centrage vertical du texte chinois dans contrôle , la hauteur du contrôle = la ligne- hauteur du contrôle)

　　text-align (alignement) : Alignement horizontal du texte dans les éléments de niveau bloc gauche centre droite

　lettre -espacement (espacement des caractères) : la distance entre les mots

　　text-decoration (modification du texte) : souligner souligner supprimer line-through Overline none (vous pouvez supprimer le soulignement du lien hypertexte)

　　overflow : contrôlez la méthode d'affichage du texte hors plage, s'affiche automatiquement barres de défilement en fonction de la quantité de texte, le défilement affiche toujours la barre de défilement et le texte masqué hors plage est masqué. Vous pouvez également définir les directions horizontales et verticales via overflow-x, . overflow-y

　text-overflow : Définissez la méthode d'affichage du texte redondant, clip pour le recadrer, les points de suspension, (l'accent est mis sur, laissez chaque ligne d'ellipses d'affichage de texte redondantes, a.white-spacing:nowrap b.overflow:hiddern text -overflow:ellipsis)

　　text-shadow : (4 valeurs d'attribut : distance d'ombre horizontale, verticale distance de l'ombre, distance du flou, couleur de l'ombre) L'ombre du texte, les deux premières valeurs d'attribut ne peuvent pas être omises. Plus la distance horizontale de l’ombre est grande, l’ombre se déplace vers la droite. Plus la distance verticale de l’ombre est grande, plus l’ombre se déplace vers le bas. Distance du flou de l'ombre. Plus la valeur est grande, plus l'ombre est floue. La valeur par défaut est 0, pas de flou. Couleur de l'ombre, facultative, la valeur par défaut est le noir

　text-indent : retrait de la première ligne, vous pouvez ajuster la taille du retrait avec la valeur en pixels

text-stroke : épaisseur du trait, couleur du trait

　　espace blanc:nowarp Définit la ligne chinoise à afficher en continu à la fin (le chinois par défaut est le retour à la ligne automatique, l'anglais ne sera pas automatiquement renvoyé à la ligne et sera automatiquement renvoyé en fonction de espaces)

　　word-break : Le navigateur coupe les lignes au niveau des espaces par défaut. Lorsque la longueur d'un mot dépasse la plage, il sera affiché en continu. mots

( 5) Style d'arrière-plan :

fond (forme abrégée)

Photo) : url (

L'adresse de la photo ), l'image de fond et la couleur de fond existent en même temps, le fond l'image couvrira la couleur d'arrière-plan

　　　　

background-repeat (méthode de répétition de l'image d'arrière-plan) : pas de répétition (non carrelé) répétition-x (carrelage horizontal) répétition-y (carrelage vertical) répétition tuile (par défaut) 　　　　background-position

(coordonnées de position, Offset a 2 valeurs d'attribut : horizontale et verticale) : Spécifiez la position : gauche/centre/droite, vous pouvez écrire des pixels ou des pourcentages, n'écrivez qu'une seule valeur d'attribut, la valeur par défaut est la direction horizontale, l'autre direction est par défaut le centre vertical (Remarque : lors de l'utilisation de pixels, la distance réelle du coin supérieur gauche de l'image se déplace dans chaque direction. Lorsque vous utilisez des pourcentages, il est recommandé de ne pas utilisez des nombres négatifs, qui représentent le rapport de répartition de la distance vide restante après la suppression de l'image, par exemple : position de l'arrière-plan : 30 % supprimés horizontalement. Après l'image, la zone restante est de 3 : 7 points)

　　top

/center/

bottom Lorsqu'une seule valeur d'attribut est écrite, l'autre est centrée par défaut

　　　　

background-clip :border-box (affiché depuis le bord extérieur de la bordure) padding-box (affiché depuis le bord intérieur de la bordure) content-box (affiché à partir du contenu du texte, des images d'arrière-plan ou des couleurs d'arrière-plan qui ne sont pas affichées la zone sera recadrée et non affichée)

　　　

background-origin : point de départ du positionnement border-box (en partant du bord extérieur de la bordure) padding-box (en partant du bord extérieur de la bordure) Bord intérieur de la bordure) content-box (à partir de la zone de contenu du texte) 　　background-size

 : La taille de l'image d'arrière-plan a généralement deux attributs : la largeur et height Lorsqu'il n'y a qu'une seule valeur d'attribut, la valeur par défaut met à l'échelle la largeur et la hauteur proportionnellement

Comment écrire la largeur et la hauteur : a. Écrire directement les pixels b. Écrire le pourcentage (pourcentage de la largeur et de la hauteur du conteneur 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!