Résumé des quatre propriétés CSS courantes

******* Propriétés CSS communes **********

[police]

police Définit ou récupère les propriétés de texte dans un objet. Cette propriété est une propriété composite.

Les paramètres utilisant la première méthode de déclaration doivent être disposés dans l'ordre indiqué ci-dessus, et font-size et font-family ne peuvent pas être ignorés. Une seule valeur est autorisée par paramètre. En cas d'omission, la valeur par défaut de la propriété indépendante correspondant à son paramètre sera utilisée.

 : Spécifiez le style de police du texte

 : Spécifiez si le texte est en petites majuscules

 : Spécifiez l'épaisseur de la police du texte

 : Spécifiez la taille de la police du texte

 : Spécifiez la hauteur de ligne de la police du texte

 : Spécifiez le texte pour utiliser une certaine police ou séquence de polices

légende : Utiliser le texte d'un contrôle système intitulé Police (comme les boutons, les menus, etc.) (CSS2)

icône : Utiliser la police de l'étiquette de l'icône (CSS2)

menu : Utiliser le police du menu (CSS2)

message-box : Utiliser la police du texte de la boîte de dialogue d'information (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)

------------------ -------------- --------------------------

font-family : définir ou récupérer une séquence de noms de polices pour le texte de l'objet.

Valeur par défaut : déterminée par l'agent utilisateur

La séquence

peut contenir des polices intégrées.

Les références générales aux polices peuvent être citées sans guillemets. Si le nom de la police contient des espaces, des chiffres ou des symboles (tels que des connecteurs), des guillemets sont requis pour éviter de provoquer des erreurs.

L'agent utilisateur parcourra la séquence de polices définie jusqu'à ce qu'une certaine police corresponde.

body{font-family:helvetica,verdana,sans-serif;}

Comme la définition de police ci-dessus, en supposant que vous n'avez pas la police helvetica sur votre machine, mais vous avez verdana, ceci Votre texte sera affiché en verdana.

 : Nom de la police. Par ordre de priorité. Séparez par des virgules. Si le nom de la police contient des espaces ou des caractères chinois, il doit être placé entre guillemets

 : nom de la séquence de police.

-------------------------------------- --- ----------------------------------------------- --- -------

font-size : Définissez ou récupérez la taille de la police dans l'objet.

 : Ajuster en fonction de la police de l'objet. Valeurs des paramètres facultatifs : xx-small | x-small | small | medium | large, x-small : 8/9 (h5), medium : 1 (h4), grand : 6/5 (h3 ), x-large : 3/2 (h2), xx-large : 2 /1 (h1),

 : Ajuster par rapport à la taille de la police dans l'objet parent. Calculé en utilisant des unités em proportionnelles. Valeurs des paramètres facultatifs : plus petit | plus grand

 : utilisez la valeur de longueur pour spécifier la taille du texte. Les valeurs négatives ne sont pas autorisées.

 : Spécifiez la taille du texte en pourcentage. La valeur en pourcentage est basée sur la taille de la police dans l'objet parent. Les valeurs négatives ne sont pas autorisées.

-------------------------------------- --- ----------------------------------------------- --- ------------

font-stretch : Définissez ou récupérez si le texte de l'objet est étiré horizontalement.

Le texte est étiré par rapport à la largeur normale de la police affichée par le navigateur.

ultra-condensé : 4 bases plus étroites que la largeur normale du texte.

extra-condensé : 3 bases plus étroites que la largeur normale du texte.

condensé : 2 bases plus étroites que la largeur normale du texte.

semi-condensé : 1 base plus étroite que la largeur normale du texte.

normal : largeur de texte normale

semi-développé : 1 base plus large que la largeur de texte normale.

développé : 2 bases plus larges que la largeur normale du texte.

extra-expansé : 3 bases plus larges que la largeur normale du texte.

ultra-étendu : 4 bases plus larges que la largeur normale du texte.

-------------------------------------- --- ----------------

font-style : Définissez ou récupérez le style de police du texte dans l'objet.

normal : Spécifiez le style de police du texte comme police normale.

italique : Spécifiez le style de police du texte comme italique. Pour les polices spéciales qui ne sont pas conçues en italique, oblique sera appliqué si vous souhaitez utiliser une apparence italique

oblique : Spécifie que le style de police du texte est une police italique. Inclinez artificiellement le texte au lieu de sélectionner les italiques dans la police

----------------------- --- ----------------------------------------------- --- -----------------

font-variant : définit ou récupère si le texte de l'objet est constitué de petites lettres majuscules.

normal : police normale

petites majuscules : petite police majuscule

------ --- ----------------------------------------------- ---

font-weight : Définissez ou récupérez le poids de la police du texte dans l'objet.

L'effet de

est déterminé par le mappage spécifique des variables de police des polices installées sur le système client. Le système sélectionne le

le plus proche

Match. Autrement dit, les utilisateurs peuvent ne pas voir la différence entre les différentes valeurs.

normal : Police normale. Équivalent au numéro 400

gras : Gras. Équivalent au numéro 700.

plus gras : Extra gras. C'est également équivalent au rôle des objets forts et b

plus légers : fins

 : utilisez des chiffres pour représenter l'épaisseur de la police du texte. Plage de valeurs : 100 | 200 | 400 | 500 | 700 | 900

---------------- ------------------------------------------------ -- --------------------------------

***** * ************************************************** ************************************************** * ***********

display:inline Laissez les éléments affichés en ligne sous forme de blocs être affichés en ligne

Le la fonction de display:inline consiste à définir l'objet à afficher en tant qu'élément en ligne. inline est la valeur par défaut pour les objets en ligne

DIV1

DIV2

Ici, DIV1 et DIV2 occupent respectivement une ligne, mais après leur avoir ajouté des attributs, ils changent

DIV1

DIV2

DIV1 et DIV2 sont maintenant affichés sur la même line

display:block consiste à afficher l'élément en tant qu'élément de niveau bloc

display:inline-block rend l'objet en tant qu'élément. objet en ligne, mais le contenu de l'objet est un rendu d'objet bloc. Les objets en ligne adjacents seront rendus sur la même ligne, autorisant les espaces.

-------------------------------------- --- ----------------------------------------------- --- ----------------------------------

******* ***** ******************************************** ****** ********************************************** ******* ****

【border】 Attribut composite. Définit les propriétés de la bordure de l'objet.

Si vous utilisez cet attribut composite pour définir un seul paramètre, les valeurs par défaut des autres paramètres remplaceront sans condition les paramètres d'attribut unique correspondant.

border-color : Définir ou récupérer la couleur de la bordure de l'objet.

Si les quatre valeurs de paramètres sont fournies, elles seront appliquées aux quatre côtés dans l'ordre supérieur, droit, inférieur et gauche.

Si un seul est fourni, il sera utilisé pour les quatre côtés.

Si deux sont fournis, le premier est pour le haut et le bas, et le second est pour la gauche et la droite.

Si trois sont fournis, le premier est pour le haut, le deuxième est pour la gauche et la droite et le troisième est pour le bas.

Si border-width est égal à 0 ou border-style est défini sur none, cet attribut sera ignoré.

-------------------------------------- --- ----------------------------------------------- -

attribut composite border-image. Définit ou récupère le style de bordure de l'objet à remplir avec une image.

Utilisez une image au lieu de border-style pour définir le style de bordure. Lorsque border-image vaut none ou que l'image est invisible, l'effet de style de bordure défini par border-style sera affiché.

[ border-image-source ] : définissez ou récupérez si la bordure de l'objet utilise un style de définition d'image ou un chemin de source d'image.

[ border-image-slice ] : Définir ou récupérer la méthode de segmentation de l'image d'arrière-plan de la bordure de l'objet.

[ border-image-width ] : Définir ou récupérer l'épaisseur de la bordure de l'objet.

[ border-image-outset ] : définit ou récupère l'extension de l'image d'arrière-plan de la bordure de l'objet.

[ border-image-repeat ] : Définissez ou récupérez la méthode de mosaïque de l'image de bordure de l'objet.

-------------------------------------- --- ------------------

border-radius Définit ou récupère des objets en utilisant un cadre aux coins arrondis. Fournissez 2 paramètres, séparés par "/". Chaque paramètre permet de définir 1 à 4 valeurs de paramètre. Le premier paramètre représente le rayon horizontal, et le deuxième paramètre représente le rayon vertical. Si le deuxième paramètre est omis, alors Le. par défaut est égal au premier paramètre

Rayon horizontal : si les quatre valeurs de paramètre sont fournies, le coin supérieur gauche, le coin supérieur droit et le coin inférieur droit (l'ordre du bas -droite) et en bas à gauche (en bas à gauche) agit sur les quatre coins.

Si un seul est prévu, il sera utilisé pour les quatre coins.

Si deux sont fournis, le premier est utilisé pour le haut gauche et le bas droit, et le second est utilisé pour le haut droit et le bas gauche).

Si trois sont fournis, le premier est pour le haut à gauche, le deuxième est pour le haut à droite, le bas à gauche et le troisième est pour le bas à droite.

Le rayon vertical suit également les 4 points ci-dessus.

 : Définissez la longueur du rayon de coin de l'objet avec une valeur de longueur. Les valeurs négatives ne sont pas autorisées

 : Définit la longueur du rayon de coin de l'objet en pourcentage. Les valeurs négatives ne sont pas autorisées

------------------------------- --- ------------------------------------

border-width définit ou récupère la largeur de la bordure de l'objet.

Si les quatre valeurs de paramètres sont fournies, elles seront appliquées aux quatre côtés dans l'ordre supérieur, droit, inférieur et gauche.

Si un seul est fourni, il sera utilisé pour les quatre côtés.

Si deux sont fournis, le premier est pour le haut et le bas, et le second est pour la gauche et la droite.

Si trois sont fournis, le premier est pour le haut, le deuxième est pour la gauche et la droite et le troisième est pour le bas.

Si border-style est défini sur none, cet attribut n'aura aucun effet.

 : Utilisez la valeur de longueur pour définir l'épaisseur de la bordure. Les valeurs négatives ne sont pas autorisées.

medium : Définit l'épaisseur par défaut de la bordure.

mince : Définissez une bordure plus fine que l'épaisseur par défaut.

épais : Définit une bordure plus épaisse que l'épaisseur par défaut.

-------------------------------------- --- ---

border-left-style Définir ou récupérer le style de bordure gauche de l'objet.

Si border-width est égal à 0, cet attribut n'aura aucun effet.

aucun : Aucun aperçu. border-color et border-width seront ignorés

hidden : masque la bordure. IE7 et versions antérieures ne prennent pas encore en charge

dotted : contour en pointillés. Affiché sous forme d'effet pointillé sous IE6

pointillé : contour en pointillés.

solide : contour de ligne continue

double : contour de ligne double. La somme de deux lignes simples et de leur intervalle est égale à la valeur de largeur de bordure spécifiée

groove : contour de rainure 3D.

Frête : profil de rainure convexe 3D.

encart : contour de bord concave 3D.

début : contour du bord convexe 3D.

-------------------------------------- --- -------------------

attribut composite border-top. Définit les propriétés de la bordure supérieure de l'objet.

Si vous utilisez cet attribut composite pour définir un seul paramètre, les valeurs par défaut des autres paramètres remplaceront sans condition les paramètres d'attribut unique correspondant.

[ border-top-width ] : Définissez ou récupérez la largeur de la bordure supérieure de l'objet.

[ border-top-style ] : Définissez ou récupérez le style de bordure supérieure de l'objet.

[ border-top-color ] : Définissez ou récupérez la couleur de la bordure supérieure de l'objet.

-------------------------------------- --- ----------------

box-shadow Définit ou récupère l'ombre de l'objet .

Vous pouvez définir plusieurs ensembles d'effets, chaque ensemble de valeurs de paramètres étant séparé par des virgules.

aucun : Pas d'ombre

① : La première valeur de longueur est utilisée pour définir la valeur de décalage horizontal de l'ombre de l'objet. Peut être une valeur négative

② : La deuxième valeur de longueur est utilisée pour définir la valeur de décalage vertical de l'ombre de l'objet. Peut être négatif

③ : Si la troisième valeur de longueur est fournie, elle est utilisée pour définir la valeur de flou d'ombre de l'objet. Les valeurs négatives ne sont pas autorisées

④ : Si la quatrième valeur de longueur est fournie, elle est utilisée pour définir la valeur d'extension de l'ombre de l'objet. Peut être négatif

 : Définit la couleur de l’ombre de l’objet.

encart : définissez le type d'ombre de l'objet sur ombre intérieure. Lorsque la valeur est vide, le type d'ombre de l'objet est ombre extérieure

----------------------- - ------------------------------------------------- -------

Transparence

s'écrit :

{
filter: alpha(opacity=10);  //针对ie
 
}

De cette façon, vous pouvez essentiellement visualisez-le dans tout Atteindre la transparence dans le navigateur

Ce qui précède est le résumé du quatrième attribut commun de CSS Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !