Le résumé le plus complet des styles CSS

Cet article partage principalement les styles CSS les plus complets, qui sont très complets. La maîtrise de ces styles complétera certainement une page CSS parfaite. Les amis qui en ont besoin pourront s'y référer.

Un attribut de police : (police)

size{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és : PX, PD (Normal) Unités : PX, PD, EM ;}(petites majuscules) normal;(normal)
majuscule{text-transform: capitalize;}(première lettre majuscule) majuscule ;(majuscule) minuscule;(minuscule) aucun;(aucun)
modification{ text-decoration: underline;}(souligné) overline;(overline) line-through;(barré) clin;(clignoter)
Couramment polices utilisées : (font-family)
"Courier New", Courier, monospace, "Times NewRoman", Times, serif, Arial, Helvetica, sans-serif, Verdana
Attribut d'arrière-plan : (background)
Couleur{background-color : #FFFFFF;}
Image{background- image : url();}
Répéter {background-repeat : no-repeat;}
Défiler {background-attachment : corrigé ;} (fixe) scroll ; (scroll)
Position {background-position : left;}(horizontal) top(vertical)
Méthode d'abréviation {background:#000 url(..) répétition 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, je dois donc l'étudier davantage*/
Lettre- spacing: normal;} Valeur /*Cet attribut semble utile, veuillez vous entraîner davantage*/
Align {text-align: justifier;}(Aligner les deux extrémités)gauche;(Aligner à gauche) à droite;(Aligner à droite) au centre;( Center)
Indent{text-indent: Value px;}
Alignement vertical{vertical-align: baseline;}(baseline) sub;(subscript) super;(subscript)top middle; ; text-bottom;
Espacement des mots : normal ; Valeur
espace blanc : pre; (réservé) nowrap ;
display {display:block;} (block) inline ( intégré) élément de liste ; élément de liste ; table-en-tête-groupe ; group; table-raw; table-column-group; table-column; table-cell;table-caption; (titre du tableau) /*La compréhension de l'attribut display est très vague*/
Attribut Box : (Box)
width:; float:; clear: les deux; padding:; Order: en haut à droite, en bas à gauche ;(ridge) inset;(dent) outset; -width:; Border width
border-color:#;
Méthode d'abréviation border: width style color;/* Abréviation*/
Attribut de liste: (List-style)
Type list-style- type : disque ; (point) cercle ; (cercle) carré ; (carré) décimal ; (nombre) inférieur-romain ; alpha supérieur ;
Position liste-style-position : extérieur ; (extérieur) inside;
Image list-style-image: url(..);
Attributs de positionnement : (Position)
Position : relative ; statique ;
visibilité : caché ; 🎜>overflow : visible ; caché ; auto ;
clip : rect (12px,auto,12px,auto) (Crop)

Deux attributs de texte CSS :

color : # 999999 ; /*Couleur du texte*/
famille de police : Song Dynasty, sans-serif ; /*Police du texte*/
taille de police : 9pt; itelic; /*Texte italique*/
font-variant:small-caps ; /*Small font*/
lettre-espacement : 1pt; /*Distance entre les mots*/

line-height : 200% ; /*Définir la hauteur de la ligne*/

font-weight:bold; / *Texte en gras*/

vertical-align:sub /*Subscript*/

vertical-align:super; /
text-decoration:line-through; / *Ajouter un barré*/
text-decoration: overline; /*Ajouter une ligne supérieure*/
text-decoration:underline; 🎜>text-decoration:none; /*Supprimer le lien Souligné*/
text-transform : capitalize; /*Capitalize the first word*/
text-transform : uppercase; text-transform : minuscule; /*Anglais minuscule*/
text-align:right; /*texte aligné à droite*/
text-align:left; >text-align:center; /*texte aligné au centre*/
text-align:justify; /*Alignement du texte*/
attribut vertical-align
vertical-align:top /*Vertical; alignement vers le haut*/
vertical-align:bottom; /*Vertical down Alignment*/
vertical-align:middle /*Vertical center align*/
vertical-align:text-top; texte verticalement vers le haut*/
vertical-align:text-bottom; / *Aligner le texte verticalement vers le bas*/

3.

padding-top:10px; /*Laissez la bordure supérieure vide*/
padding-right:10px; /*Laissez la bordure droite vide*/
padding-bottom:10px /*Laissez le bas; border blank* /
padding-left:10px; /*Laisser la bordure gauche vide

4. Attributs du symbole CSS :

list-style-type:none; */
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 de cercle plein*/
list-style-type:circle; /*Symbole de cercle creux*/
list-style-type:square /*Carré solide; symbol* /
list-style-image:url(/dot.gif); /*Picture symbol*/
list-style-position: outside /*Ligne convexe*/
list-style-; position :inside; /*indent*/

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

background-color: #F5E2EC; /*Arrière-plan de perspective*/
background-image : url(/image/bg.gif); /*Image d'arrière-plan*/
background-attachment :fixed /*Filigrane d'arrière-plan fixe*/
background - répéter : répéter; /*Arrangement de répétition - page Web par défaut*/
background-repeat : no-repeat /*Aucun arrangement de répétition*/
background-repeat : répéter-x /*Arrangement de répétition sur le x; -axis /* La position des axes x et y de l'image d'arrière-plan*/
background-position : top; /*Align up*/
background-position: buttom; >position d'arrière-plan : gauche /*Aligner à gauche*/

position d'arrière-plan : à droite; /*Aligner à droite*/

position d'arrière-plan : centre*/

7 . Propriétés de connexion CSS :

a /*Tous les hyperliens*/
a:link /*Format du texte du lien hypertexte*/
a:visité /*Format du texte du lien visité*/
a : actif /*Format du lien pressé*/

a:survol /*Souris pour lier*/

Style du curseur de la souris :

Doigt de lien CURSEUR : main

Curseur en croix :réticule
Flèche vers le bas curseur: s-resize
Curseur flèche croisée: déplacer
Curseur flèche droite: déplacer
Ajouter un point d'interrogation curseur: aide
Curseur flèche gauche: w-redimensionner
Curseur flèche vers le haut: n- resize
Flèche pointant vers le haut et vers le curseur droit :ne-resize
Flèche pointant vers le haut et curseur vers la gauche :nw-resize
Texte Je tape le curseur :text
Flèche inclinée vers le bas et curseur droit :se- redimensionner
Flèche en diagonale en bas à gauche du curseur : sw-resize
Curseur en entonnoir :attendre
Motif de curseur (IE6) p {cursor:url("cursor file name.cur"),text;}


8. Liste des bordures CSS :

border-top : 1px solid #6699cc /*top border*/
border-bottom : 1px solid #6699cc ; /
border-left : 1px solid #6699cc; /*left border*/
border-right : 1px solid #6699cc; /*right border*/

Ce qui précède est la méthode d'écriture recommandée, mais elle peut également être utilisé La méthode conventionnelle est la suivante :

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

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

border -top-style: solid/*Définissez le style supérieur du cadre supérieur*/

Autres styles de cadre


solide / *Cadre plein*/
pointillés / *Cadre pointillé*/
double /*Cadre double*/

rainure /*Cadre convexe tridimensionnel*/

crête /*Cadre en relief tridimensionnel* /
encart /*Cadre concave*/

début /*cadre convexe*/

8. Application du formulaire CSS :


Zone de texte
Bouton
Case à cocher

Bouton de sélection

Zone de texte multiligne
Option de menu déroulant 1 option 2

9. Style de bordure CSS :


marge supérieure :10px; /*bordure supérieure*/
margin-right:10px; /*valeur de marge droite*/
margin-bottom:10px /*valeur de marge inférieure*/

margin-left:10px; /*valeur de la marge gauche*/

10. Attributs CSS : Style de police

1 Style de police {font:font-stylefont-variant font-weight font-size font-family}
2 Type de police {font-family:"Font 1","Font 2","Font 3", ...}
3 tailles de police {font-size:numeric|hériter| moyen| plus grand| xx-large| plus petit|x-small| Style {font-style:inherit|italic|normal|oblique}
5 Épaisseur de la police {font-weight:100-900|bold|bolder|lighter|normal;}
6 Couleur de la police {color: value;}
7 couleur de l'ombre {text-shadow : valeur de couleur 16 bits}
8 hauteur de ligne de police {hauteur de ligne : valeur numérique | hériter|normal ;}
9 espacement des lettres {espacement des lettres : valeur numérique | hériter| normal}
10 espacement des mots {word-spacing:numeric|inherit|normal}
11 transformation de police {font-variant:inherit|normal|small-cps}
12 conversion anglaise {text- transformer:inherit |aucun|capitaliser|majuscule|minuscule}
13 déformation de la police {font-size-adjust:inherit|none}
14 police
{font-stretch:condensed|expanded|extra-condensed| extra-développé |hériter|plus étroit|normal|semi-condensé|semi-développé|ultra-condensé|ultra-développé|plus large}

11. Style de texte (Style de texte)

1 Espacement des lignes {line-height:numeric|inherit|normal;}

2 Décoration du texte {text-decoration:inherit|none|underline|overline|line-through|blink}
3 Espace au début de paragraphe {text-indent :numeric|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}

12. Style d'arrière-plan

1 Couleur d'arrière-plan {background-color: value}

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| répéter-x| répéter-y}
4 Arrière-plan fixe {background-attachment:fixed|scroll}
5 Positionnement de l'arrière-plan {background-position:numeric|top|bottom|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 de l'arrière-plan | Pièce jointe de l'arrière-plan | Position de l'arrière-plan}

13. Style de cadre (style de boîte)

1 Bordure vierge { margin :margin-topmargin-right margin-bottom margin-left}

2 padding {padding:padding-toppadding-right padding-bottom padding-left}
3 largeur de bordure
{border-width:border- top -widthborder-right-width border-bottom-width border-left-width}
Valeur de largeur : mince|moyen|épais|valeur
4 couleur de bordure {border-color : valeur valeur valeur valeur} Valeurs : représentent respectivement valeurs de couleur haut, droite, bas, gauche
5 style de bordure
{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 border{border :border-widthborder-style color}
Bordure supérieure{border-top:border-top-width border-style color}
Bordure droite{border-right:border-right-width border-stylecolor}
Bordure inférieure{border-bottom:border-bottom-width border-stylecolor}
Bordure gauche{border-left:border-left-width border-style color}
7 Largeur{largeur : longueur|pourcentage | auto}
8 Hauteur{height:numeric|auto}
9 Float{float:left|right|none}
10 Clear{clear:none|left|right|both}

Quatorze, Liste des catégories

1 Affichage du contrôle {display:none|block|inline|list-item}

2 Contrôle vide {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:directory style type|directory style position|url}
7 Forme de la souris
{ Cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

Recommandations associées :

La production de pages Web Dreamweaver utilise la méthode d'imbrication de style CSS

Exemple de code pour afficher les styles CSS dans Angular4

Tableau de configuration CSS À quoi devez-vous faire attention en matière de style

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!