Collection complète de styles CSS (version organisée)-tutoriel CSS-php.cn

Ce chapitre partagera avec vous la collection complète de styles CSS (version organisée), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Propriétés de la police : (police)

taille{font-size : x- large;}(extra large) xx-small;(extrêmement petit) Généralement non utilisé en chinois, utilisez simplement des valeurs numériques, unité : PX, PD

Style {font-style: oblique;}(italic) italic ;(italique) normal;(normal)

line-height {line-height: normal;}(normal) Unité : PX, PD, EM

thickness {font-weight : gras ; } (gras) plus clair ; (fin) normal ; (normal)

variante {font-variant : petites majuscules ;} (petites lettres majuscules) normal (normal)

{text- transformer: majuscule;}(première lettre en majuscule) majuscule;(majuscule) minuscule;(minuscule) aucun;(aucun)

modification {text-decoration: underline;}(souligné) overline (overline) line-; à travers ; (barré) clignoter;

Polices couramment utilisées : (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

Attribut d'arrière-plan : (arrière-plan)

Couleur{background-color : #FFFFFF;}

Image{background-image: url();}

Répéter{background-repeat : no-repeat ;}

scroll {background-attachment: fixed;}(fixed) scroll;(scroll)

position {background-position: left;}(horizontal) top(vertical);

Méthode d'abréviation { background:#000 url(..) répéter fixe en haut à gauche;} /*Abréviation·Cela apparaît souvent lors de la lecture du code, alors étudiez-le attentivement*/

Attribut de bloc : (Bloquer) /*C'est la première fois que je connais cet attribut, j'ai donc besoin d'étudier davantage*/

Letter-spacing {letter-spacing: normal;} Value/*Cet attribut semble-t-il utile, avec plus de pratique */

Aligner {text-align: justifier;} (aligner les deux extrémités) à gauche (aligner à gauche) à droite (aligner à droite) au centre ; Indent{text-indent: value px;}

Alignement vertical{vertical-align: baseline;}(baseline) sub;(subscript) super;(subscript) top; text-top; -bottom;

espacement des mots : normal ; valeur

espace blanc : pré;(réservé) nowrap;(pas de saut de ligne)

Afficher {display:block;}(block) inline;(embedded) list-item;(list item) run-in;(append part) compact;(compact) Marker;(marker) table; table-raw-group ; table-header-group ; table-footer-group ; table-column-group ; table-caption ; (titre du tableau) ; */

Propriétés de la boîte : (Box)

width :; clear:both padding :; ; Ordre : en haut à droite, en bas à gauche

Attribut de bordure : (Bordure)

border-style : pointillé ; (ligne pointillée) pointillé ; (ligne pointillée) solide; double;(ligne double) rainure;(ligne de rainure) crête;(crête) encart;(dent) début;

border-width:; -color:#;

Bordure de la méthode d'abréviation : couleur de style de largeur /*abréviation*/

Attribut de liste : (style de liste) Type de style de liste : disque (point) cercle (cercle) ; carré (carré) décimal (nombre) romain supérieur ; -alpha;

position list-style-position: outside;(外) inside;

image list-style-image: url(..);

Attributs de positionnement : (Position)Position : relative ; statique ;

visibilité : hériter visible ; overflow : visible ; caché ; auto ;

clip : rect(12px,auto,12px,auto) (crop)

Liste complète des codes d'attribut CSS

Un attribut de texte CSS :

color : #999999; /*Text color*/ font-family : 宋体; ,sans-serif; /*Police du texte*/

taille de la police : 9pt; /*Taille du texte*/

style de police: italique;

font-variant:small-caps; /*small font*/

lettre-espacement : 1pt; /*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/*strikethrough*/

text-decoration: overline; /*Ajouter la ligne supérieure*/

text-decoration:underline /*Ajouter un soulignement*/

text-decoration:none /*Delete link; Souligner*/

text-transform : majuscule; /*Capitaliser le premier mot*/

text-transform : majuscule /*Majuscule anglaise*/

text-transform : minuscule; /*Anglais minuscule*/

text-align:right; /*Text-aligned right*/

text-align:left /*Text-aligned left*/

text-align:center; /*Texte-aligné au centre*/

text-align:justify /*Text-aligned*/

vertical; -align attribut

vertical-align: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; *Alignement du texte verticalement 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:lower-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 circulaire plein*/

list-style-type:circle /*Symbole circulaire creux*/

list- style-type:square; /*Symbole carré plein*/

list-style-image:url(/dot.gif); 🎜>list-style-position: outside; /*ligne convexe*/

list-style-position:inside /*indent*/

4. Style d'arrière-plan CSS :

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

image d'arrière-plan : url(/image/bg.gif); /*Image d'arrière-plan*/

pièce jointe d'arrière-plan : fixe ; /*Filigrane d'arrière-plan fixe*/

background-repeat : répéter; /*Arrangement des répétitions - page Web par défaut*/

background-repeat : no-repeat /*Aucun arrangement de répétition*/

background-repeat : répéter- x; /*Répétez la disposition sur l'axe des x*/

background-repeat : répéter-y /*Répétez la disposition sur l'axe des 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; /*Align right* /

background-position : center; /*centeralignement*/

5. >a /*tous les hyperliens* /

a:link /*Format du texte du lien hypertexte*/

a:visité /*Format du texte du lien consulté*/

a:actif /*Press Link format*/

a:hover /*Souris pour lier*/

Style du curseur de la souris :

Lien doigt CURSEUR : main

Curseur en croix :réticule

Flèche pointant vers le bas curseur :s-resize

Curseur en forme de croix :déplacer

Flèche pointant vers la droite du curseur :déplacer

Ajouter un point d'interrogation curseur : aide

Flèche pointant vers le curseur gauche :w-resize

Flèche pointant vers le haut curseur :n-resize

Flèche pointant vers le haut et à droite curseur:ne- resize

flèche vers le haut et à gauche curseur:nw-resize

Texte Je tape curseur:text

flèche pointant vers le bas et vers la droite curseur:se-resize

Flèche en diagonale en bas à 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 solide #6699cc; /*Bordure inférieure*/

bordure gauche : 1px solide #6699cc /*Bordure gauche*/

bordure droite : 1px solide #6699cc; Ligne de bordure droite*/

Ce qui précède est la méthode d'écriture recommandée, mais vous pouvez également utiliser la méthode conventionnelle comme suit :

border-top-color : #369 /*Définissez la couleur supérieure de la ligne de bordure supérieure */

border-top-width: 1px /*Définir la largeur supérieure de la bordure supérieure*/

border-top-style: solid/*Définir le haut style de la bordure supérieure*/

Autres styles de cadre

solide /*cadre plein*/

pointillé /*cadre pointillé*/

double /* Double fil de fer*/

rainure /*cadre convexe incrusté en trois dimensions*/

crête /*cadre en relief tridimensionnel*/

encart /*cadre concave*/

début /*cadre convexe*/

7. Application de formulaire CSS :

Zone de texte

Bouton

Boîte de sélection complexe

Bouton de sélection

Zone de texte multiligne

Menu déroulant option 1 option 2

8. Style de bordure CSS :

margin-top:10px; /*marge supérieure*/

margin-right:10px /*valeur de marge droite*; /

margin-bottom:10px; /*Valeur de marge inférieure*/

margin-left:10px /*Valeur de marge gauche*/

Attribut CSS : Style de police (Style de police)

Numéro de série Syntaxe de la marque de description chinoise

1 Style de police {font: font-style font -variante font-weight font-size font-family}

2 Type de police {font-family:"Font 1", "Font 2", "Font 3",...}

3 Taille de police {font-size:numeric|inherit| medium| grand| plus grand| xx-large| petit| plus petit| 🎜>5 police-weight {font-weight:100-900|bold|plus clair|normal;>

6 couleur de police { couleur : valeur ;🎜>

7 couleur de l'ombre {texte-ombre : valeur de couleur 16 bits🎜>

8 hauteur de ligne de police {hauteur de ligne : valeur numérique | hériter | normal ;🎜 >

Espacement de 9 caractères {lettre-espacement : valeur numérique|hériter|normal}

Espacement de 10 mots {espacement de mots:numérique|hériter|normal}

11 déformation de la police {fonte -variant:inherit|normal|small-cps}

12 Conversion anglaise {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 transformation de police {font-size-adjust :hériter|aucun

14 police {font-stretch:condensé|expansé|extra-condensé|extra-expansé|hériter|plus étroit|normal|semi-condensé|semi-expansé|ultra-condensé|ultra- élargi|plus large>

Style de texte (Style de texte)

Syntaxe de la marque de description chinoise du numéro de série1 interligne {line-height: value|inherit|normal;}

2 Décoration du texte {text-decoration:inherit|none|underline|overline|line-through|blink}

3 Espace au début du paragraphe {text-indent:value|inherit}

4 Alignement horizontal {text-align:left|right|center|justify}

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 de la marque de description chinoise1 Couleur d'arrière-plan {background-color : valeur >

2 Image d'arrière-plan {background-image: url(URL)|none}

3 Répétition d'arrière-plan {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat- y>

4 Arrière-plan fixe {background-attachment:fixed|scroll}

5 Positionnement de l'arrière-plan {background-position : valeur|haut|bas|gauche|droite|centre}

6 Style de dos {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 boîte

Syntax der chinesischen Beschreibungsmarke der Seriennummer

1 Rand {margin:margin-top margin-right margin-bottom margin-left}

2 padding {padding : Polsterung oben Polsterung rechts Polsterung unten Polsterung links >

Breitenwert: dünn|mittel|dick|Wert

4 Randfarbe {Rahmenfarbe: Wert Wert Wert Wert} Wert Wert: stellt jeweils die Farbwerte oben, rechts, unten und links dar

5 Rahmenstil {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 Rahmen {border:border-width border-style Farbe}

Oberer Rand {border-top:border-top-width border-style color}

Rechter Rand {border-right:border-right-width border-style color}

Unterer Rand{border-bottom:border-bottom-width border-style color}

Linker Rand{border-left:border-left-width border-style color}