Maison >interface Web >tutoriel HTML >Résumé des propriétés CSS

Résumé des propriétés CSS

巴扎黑
巴扎黑original
2017-07-23 16:38:571195parcourir

Propriétés CSS communes :

Attribut de police : (police)
Taille taille de police : x-large (extra large) xx-small (très petit) Généralement utilisé ; pour le chinois Non, utilisez simplement des valeurs numériques. Unité : PX, PD
Style de police : oblique;(italique) italique;(italique) normal;(normal)
hauteur de la ligne : normal (normal) Unités : PX, PD, EM
font-weight : gras (gras) plus léger (fin) normal ;( normal)
variant font-variant : petites majuscules ; (petites majuscules) normal ; (normal)
case text-transform : majuscule (majuscule) ; ) aucun ; (aucun)
Modifier la décoration du texte : souligner (souligner) surligner (ligne supérieure) (supprimer la ligne) clignoter ; 🎜>Polices couramment utilisées : (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Attributs d'arrière-plan
 : (arrière-plan)Couleur
Image d'arrière-plan-image : url();
Répéter l'arrière-plan-répéter : pas de répétition ;
Faire défiler la pièce jointe de l'arrière-plan : fixe ;(fixe) défilement ;( défilement)
Positionner l'arrière-plan -position : gauche (horizontal) en haut (vertical);
Arrière-plan de la méthode d'abréviation :#000 url(..) répéter en haut à gauche fixe
Bloquer ; attribut
 : (Bloquer)espacement des lettres : normal ; valeur
droit Liu text-align : justifier (aligner les deux extrémités) à gauche ; gauche) droite ; (aligner à droite) centre ; (centre)
Retrait du texte : valeur px ;
Alignement vertical : ligne de base ; sub; (indice) super ; (indice) haut ; texte-haut ; milieu ; texte-bas ;
espacement des mots : normal ; -space : pre ; (réservé) nowrap ; (pas de saut de ligne)
display:block ; partie) compact (compact) marqueur (marqueur) ; table-raw-group ; table-footer-group ; table-cell; table-caption;(titre du tableau)
Attribut de la boîte
 : (Boîte)
largeur : hauteur :; ; clear:both; padding:; Ordre : haut, droite, bas, gauche Attributs de bordure
 : (Bordure)
style de bordure : pointillé (ligne pointillée) pointillé ; (ligne pointillée) plein ; rainure (ligne de rainure) ;(crête) encart ;(dent) début ;border-width:; border width
border-color:#;
Méthode d'abréviation border: width style color;
Attribut de liste
 : (List-style)
Type list-style-type : disque (point) cercle (cercle) carré (carré) décimal ; -roman ; (numéro de code décimal romain) ; alpha inférieur ; alpha supérieur ;Position de style de liste : à l'extérieur (à l'extérieur) ;
Liste d'images-style-image : url(..);
Attributs de positionnement : (Position)
Position : absolue statique ;
visibilité : hériter ; visible ; caché ;
débordement : visible ; défilement ;
clip : rect(12px,auto ,12px,auto) (recadrage)

Collection de codes d'attribut CSS

Un attribut de texte CSS : color : #999999 ; /*text color*/
font-family : Song Dynasty, sans-serif ; /*Text font*/
font -size : 9pt ; /*Taille du texte*/
font-style:itelic; /* Texte italique*/
font-variant:small-caps; *petite police*/
espacement des lettres : 1 pt ; /*espace entre les caractères*/
line-height : 200%; /*Définir la hauteur de la ligne*/
font-weight:bold; /*Text bold*/
vertical- align :sub; /*subscript*/
vertical-align:super; /*superscript*/
text-decoration:line-through; /
text-decoration: overline; /*Ajouter la ligne supérieure*/
text-decoration:underline; /*Ajouter un soulignement*/
text-decoration:none; /*Supprimer le soulignement du lien*/
text-transform : capitalize; /*Capitaliser le premier mot*/
text- transform : majuscule; /*Anglais majuscule*/
text-transform : minuscule; /*Anglais minuscule*/
text-align:right /*Texte aligné ; right*/
text-align:left; /*Texte aligné à gauche*/
text-align:center /*Texte aligné au centre */
text-align:justify; /*Alignement du texte*/
attribut d'alignement vertical
alignement vertical : top /*Aligner verticalement ; vers le haut*/
vertical-align:bottom; /*Aligner verticalement vers le bas*/
vertical-align:middle /*Alignement vertical au centre*/
vertical-align:text-top; /*Aligner le texte verticalement vers le haut*/
vertical-align:text-bottom; /*Texte verticalement Aligner vers le bas*/
2. Bordure CSS vierge
padding-top:10px; /*Laisser la bordure supérieure vide*/
padding-right:10px; /*Laissez la bordure droite vide*/
padding-bottom:10px; /*Laissez la bordure inférieure vide*/
padding-left :10px /*; Laissez la bordure gauche vide
3. Attributs du symbole CSS :
list-style-type:none /*Not numbered*/
list-style-type:decimal; /*Chiffres arabes*/
list-style-type:minuscule-roman; /*Chiffres romains minuscules*/
list-style-type:upper-roman; /*chiffres romains majuscules*/
list-style-type:lower-alpha /*lettres anglaises minuscules*/
list-style-type:upper-alpha; /*lettres anglaises majuscules*/
list-style-type:disc; /*symbole de cercle plein*/
list-style-type:circle; /*Symbole du cercle creux*/
list-style-type:square; /*Symbole du carré plein*/
list-style-image:url(/dot.gif); /*Symbole de style d'image*/
list-style-position: outside; list-style-position:inside; /*indent*/
4. Style d'arrière-plan CSS :
/* Couleur d'arrière-plan*/
background:transparent; /*Fond de perspective*/
background-image: url(/image/bg.gif);
background-attachment : corrigé ; /*Filigrane fixe en arrière-plan*/
background-repeat : répéter ; /*Répéter la disposition - page Web par défaut*/
background-repeat : no-repeat; /*Aucun arrangement de répétition*/
background-repeat : repeat-x; /*Répéter l'arrangement sur l'axe des x*/
background-repeat : repeat-y; /*Répétez la disposition sur l'axe y*/
Spécifiez la position de l'arrière-plan
background-position : 90% 90%; /*La position des axes x et y de l'image d'arrière-plan*/
background-position : top /*Aligner vers le haut*/
background-position : bouton; /*Align down*/
background-position : left; /*Align left*/
background-position : right; /*Vers Aligner à droite*/
background-position : center; /*Align center*/
5. Attributs de connexion CSS :
a /*Tous les hyperliens*/
a:link /*Format de texte de l'hyperlien*/
a:visité /*Format du texte du lien consulté*/
a:actif /*Format du lien pressé*/
a : survol /*Souris pour créer un lien */
Style du curseur de la souris :
Curseur de doigt de lien : main
Curseur en croix : réticule
Flèche pointant vers le bas : s-resize
Curseur à flèche croisée : déplacer
Flèche pointant vers la droite du curseur : déplacer
Ajouter un point d'interrogation curseur:aide
Flèche pointant vers la gauche curseur:w-resize
Flèche pointant vers le haut curseur:n-resize
La flèche pointe vers le curseur supérieur droit:ne-resize
La flèche pointe vers le curseur supérieur gauche:nw-resize
Texte Je tape curseur:texte
Flèche en diagonale du curseur inférieur droit :se-resize
Flèche du curseur en diagonale inférieure gauche :sw-resize
Curseur en entonnoir :attendre
Motif de curseur (IE6) p {cursor:url("cursor file name.cur"),text;}
6. Liste des bordures CSS :
border -top : 1px solid #6699cc /*Top border*/
border-bottom : 1px solid #6699cc /*Bordure inférieure*/
border; -left : 1px solid #6699cc ; /*Bordure gauche*/
border-right : 1px solid #6699cc /*Bordure droite*/
Ci-dessus ; la méthode d'écriture recommandée, mais vous pouvez également utiliser la méthode conventionnelle comme suit :
border-top-color : #369 /*Définir la couleur supérieure de la bordure*/
border-top-width: 1px /*Définir la largeur supérieure de la bordure supérieure*/
border-top-style: solid/*Définir le style supérieur de la bordure supérieure* /
Autres styles de cadre
solide /*cadre solide*/
pointillé /*cadre pointillé*/
double / *Cadre double ligne*/
rainure /*Cadre convexe intérieur tridimensionnel*/
crête /*Cadre en relief tridimensionnel* /
encart /*cadre concave*/
début /*cadre convexe*/
7. Application du formulaire CSS :
Zone de texte
Bouton
case à cocher
Bouton de sélection
Multi -zone de texte en ligne
Menu déroulant option 1 option 2
8. Style de bordure CSS :
marge supérieure : 10 px ; /*bordure supérieure*/
margin-right:10px; /*valeur de la marge droite*/
margin-bottom:10px /*valeur de la marge inférieure*; /
margin-left:10px; /*Valeur de la marge gauche*/

Propriétés CSS : Style de police (Style de police)
Syntaxe de balisage de description chinoise du numéro de série
1 Style de police {font:font-style font-variant font-weight font-size font-family}
2 Type de police {famille de police : "Font 1", "Font 2", "Font 3",...}
3 Taille de police {font-size : valeur |hériter| moyen| grand| x- grand| xx-large| petit| 🎜>5 Épaisseur de police {font-weight:100-900|gras|plus léger|normal;} 6 Couleur de police {color:Number;}
7 Couleur de l'ombre {text-shadow : valeur de couleur 16 bits}
8 Hauteur de la ligne de police {line-height : valeur|inherit|normal;}
Espacement de 9 mots {espacement des lettres : valeur numérique | héritage | normal}
Espacement de 10 mots {espacement des mots : valeur numérique | héritage | normal}
11 déformation de la police{ font-variant:inherit|normal|small-cps }
12 conversion anglaise {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 polices Déformation {font-size-adjust:inherit|none}
14 polices {font-stretch:condensed|expanded|extra-condensed|extra-expanded|hériter|plus étroit|normal semi| -condensé| semi-développé|ultra-condensé|ultra-développé|plus large}
Style de texte (Style de texte)
Syntaxe de la marque de description chinoise du numéro de série
1 Interligne {line-height:numeric|inherit|normal;}
2 Décoration du texte {text-decoration:inherit|none|underline|overline|line-through| clignotant}
3 Espace au début du paragraphe {text-indent:value|inherit}
4 Alignement horizontal {text-align:left|right|center| justifier}
5 Alignement vertical {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 Mode d'écriture {writing-mode :lr-tb|tb-rl}
Style d'arrière-plan
Numéro de série Syntaxe des marques de description chinoises
1 Couleur d'arrière-plan {
2 Image d'arrière-plan {background-image: url(URL)|none}
3 Répétition d'arrière-plan {background-repeat:inherit|no- répéter|répéter|répéter-x| répéter-y}
4 Arrière-plan corrigé {background-attachment:fixed|scroll}
5 Positionnement de l'arrière-plan {background-position : numérique|haut|bas|gauche|droite|centre}
6 Style d'arrière-plan {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 d'arrière-plan}
Style de cadre (style de boîte)
Numéro de série Syntaxe de la marque de description chinoise
1 marge vide {marge : marge supérieure-marge droite-marge inférieure-gauche}
2 rembourrage {padding:padding-top padding-right padding-bottom padding-left}
3 largeur de bordure {border-width:border-top-width border -right-width border-bottom -width border-left-width} 
Valeur de largeur : fin|moyen|épais|valeur numérique
4 couleur de bordure {border- color:numeric value value value} numeric value : Représente respectivement les valeurs de couleur supérieure, droite, inférieure et gauche
5 Style de bordure {border-style:none|hidden|inherit|dashed|solid |double|inset|outset|ridge|groove}
6 bordure {border:border-width border-style color}
Bordure supérieure {border-top:border -top-width border-style color}
Bordure droite {border-right:border-right-width border-style color}
Bordure inférieure {border-bottom :border-bottom-width border-style color}
Bordure gauche {border-left:border-left-width border-style color}
7 Largeur {width : longueur|pourcentage|auto}
8 hauteur {hauteur : valeur|auto}
9 float {float:left|right|none}
10 clear {clear:none|left |right|both}
Liste des catégories
Syntaxe des marques de description chinoises des numéros de série
1 Affichage de contrôle {display:none|block|inline |list-item}
2 Contrôle de l'espace blanc {white-space:normal|pre|nowarp}
3 Liste de symboles {list-style-type:disc|circle |square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 Liste graphique {list-style-image:URL}
5 Liste de positions {list-style-position:inside|outside}
6 Liste de répertoires {list-style : type de style de répertoire|emplacement de style de répertoire|url}
7 forme de souris {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize| w-resize|s-resize|se-resize|sw-resize}

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