Maison  >  Article  >  interface Web  >  Résumé de la syntaxe d'abréviation CSS couramment utilisée

Résumé de la syntaxe d'abréviation CSS couramment utilisée

巴扎黑
巴扎黑original
2017-04-05 17:13:21960parcourir

L'utilisation d'abréviations peut aider à réduire la taille de vos fichiers CSS et à les rendre plus faciles à lire. Les principales règles pour les abréviations CSS sont les suivantes :

Couleur

Les valeurs de couleur hexadécimales, si les valeurs de chacun des deux chiffres sont les mêmes, peuvent être abrégées de moitié, par exemple :

​ #000000 peut être abrégé en #000 ; #336699 peut être abrégé en #369 ; Taille de la boîte

Il existe généralement quatre méthodes d'écriture :

    property:value1; signifie que toutes les arêtes sont une valeur value1

  • property:value1 value2; signifie que les valeurs du haut et du bas sont valeur1 et les valeurs de droite et gauche sont valeur2

  • property:value1 value2 value3; signifie que la valeur du haut est valeur1, la valeur de droite et de gauche est valeur2 et la valeur du bas est valeur3

  • property:value1 value2 value3 value4; Les quatre valeurs représentent haut, droite, bas, gauche
  • Un moyen pratique de se souvenir est dans le sens des aiguilles d’une montre, en haut à droite, en bas à gauche. Des exemples d'applications spécifiques en marge et en remplissage sont les suivants :

marge : 1em 0 2em 0.5em ;

Frontière(frontière)

Les propriétés de la bordure sont les suivantes :

    border-width:1px;

  • style de bordure:solide;

  • couleur de la bordure : #000;
  • Il peut être abrégé en une phrase : border:1px solid #000;

La syntaxe est

border:width style color;

Arrière-plans

Les attributs du fond sont les suivants :

    couleur d'arrière-plan : #f00;

  • background-image:url(background.gif);

  • background-repeat:no-repeat;

  • background-attachment:fixed;

  • position d'arrière-plan:0 0;
  • Il peut être abrégé en une phrase : background:#f00 url(background.gif) no-repeatfixed 0 0;

La syntaxe est

background:color image repeat attachment position;

Vous pouvez omettre une ou plusieurs valeurs d'attribut. En cas d'omission, la valeur d'attribut utilisera la valeur par défaut du navigateur. La valeur par défaut est :

    . couleur : transparent

  • image : aucune

  • répéter : répéter

  • pièce jointe : faire défiler

  • position : 0% 0%
  • Polices (polices)

Les attributs de la police sont les suivants :

    style de police:italique;

  • font-variant:small-caps;

  • font-weight:gras;

  • taille de police : 1em ;

  • hauteur de ligne : 140 % ;

  • font-family:"Lucida Grande",sans-serif;
  • Il peut être abrégé en une phrase : font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Notez que si vous abrégez la définition de police, vous devez définir au moins deux valeurs : font-size et font-family.

Listes

Pour annuler les points et les numéros de série par défaut, vous pouvez écrire list-style:none;,

Les attributs de list sont les suivants :

    liste-style-type:carré;

  • liste-style-position:à l'intérieur;

  • liste-style-image:url(image.gif);
  • Il peut être abrégé en une phrase : list-style:square inside url(image.gif);

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn