Une autre collection pratique d'abréviations CSS couramment utilisées et d'échange syntax_Experience

Pourquoi des abréviations CSS ?

Lors de la conception de pages Web standards WEB, il est essentiel d'écrire une grande quantité de syntaxe CSS. Généralement, nous pouvons générer automatiquement le code CSS correspondant via le panneau "Style CSS" du logiciel Dreamweaver.

Cependant, bien que le code CSS généré par le logiciel soit clair et facile à comprendre, c'est en raison de l'explication claire par CSS de la définition du style de barre qu'il rend la lecture du code CSS à la fois longue et compliquée. temps, le nombre d'octets du code CSS augmente également... Ceci est difficile à tolérer pour les personnes qui recherchent une efficacité et une perfection élevées.

Par exemple, lorsque nous définissons la taille du remplissage pour un élément, nous utilisons le remplissage. Lorsqu'il existe des exigences différentes pour le remplissage en haut, à droite, en bas et à gauche, le code généré par le logiciel peut ressembler à ceci :


.t1 {
padding-top : 3px ;
padding-right : 20px
padding-bottom : 3px ;
padding-left : 20px ; >}



L'écrire simplement est

Copier le code Le code est comme suit :

.t2 {
padding: 3px 20px 3px 20px;


Les quatre valeurs latérales du padding correspondent au top (supérieur ), droite (droite), bas (inférieur), gauche (gauche). Bien entendu, cet exemple peut également être abrégé en :

Copiez le code Le code est le suivant :

.t3 {

padding: 3px 20px 3px;
}

Lorsque gauche (gauche) n'est pas disponible, la valeur par défaut est la valeur de droite (droite ), lorsque bottom (bottom) n'est pas disponible, la valeur par défaut est la valeur de top, donc la plus simple dans cet exemple est :
.t4{
padding: 3px 20px;
(Bien sûr, si le remplissage est une valeur A, cela signifie que le haut, la droite, le bas et la gauche sont identiques)




cnbruce

cnrose<style type="text/css"> <!-- .t1 { padding-top: 3px; padding-right: 20px; padding-bottom: 3px; padding-left: 20px; } .t2 { padding: 3px 20px 3px 20px; } .t3 { padding: 3px 20px 3px; } .t4 { padding: 3px 20px; } span { border: 1px solid #CCCCCC; } --> </style> <span class="t1">cnjames</span> <span class="t2">www.cnbruce.com</span> <span class="t3"></span><span class="t4"> </span> [Ctrl+A Tout sélectionner Remarque :
Si vous devez introduire des J externes, vous devez actualiser pour exécuter ] Le long exemple de l'exemple ci-dessus, 4 lignes de code condensées en une seule ligne de code d'introduction, est l'avantage de l'abréviation CSS. Bien sûr, souvent, lorsque nous apprenons l'expérience CSS d'autres personnes, nous verrons également de nombreuses abréviations CSS similaires. Mais si vous ne le comprenez pas vous-même, vous ne comprendrez pas comment apprendre ces méthodes et expériences CSS. Par conséquent, nous devons comprendre et maîtriser certaines syntaxes d’abréviations CSS couramment utilisées.

Syntaxe commune des abréviations CSS
1, Arrière-plans Arrière-plans
Les attributs de l'arrière-plan sont les suivants :
background-color :
background-image : url(/images /2007-6 .jpg);
background-repeat : pas de répétition ;
background-attachment : corrigé
background-position : centre en bas ;
Le code CSS peut être abrégé comme suit :


background:#FCF url(/images/2007-6.jpg) fond central fixe sans répétition
C'est-à-dire l'arrière-plan : couleur d'arrière-plan, image d'arrière-plan, répétition d'arrière-plan, pièce jointe d'arrière-plan, position horizontale d'arrière-plan, position verticale d'arrière-plan

La couleur d'arrière-plan "#FFCCFF" peut également être abrégée en "#FCF" , qui concerne les valeurs de couleur hexadécimales, si chaque deux bits (RRGGBB) ont la même valeur, peut être abrégé de moitié (RVB). Dans le même temps, l’image d’arrière-plan n’a pas besoin d’être placée entre guillemets.