Une exploration préliminaire du CSS HTML (attributs)

CSS (Cascading Style Sheets)

CSS est un langage informatique utilisé pour exprimer des styles de documents tels que HTML ou XML. CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement les éléments de la page Web.

CSS peut fournir un contrôle précis au pixel près sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les objets de page Web et les styles de modèle.

Attribut de taille CSS (Dimension)

hauteur Définir la hauteur de l'élément
largeur Définir la largeur de l'élément
hauteur max Définir la hauteur maximale de l'élément
max-width définit la largeur maximale de l'élément
min-height définit la hauteur minimale de l'élément
min-width définit la largeur minimale de l'élément

Propriété d'arrière-plan CSS (Background)

background Définir toutes les propriétés d'arrière-plan dans une seule instruction
background-color Définir la couleur d'arrière-plan de l'élément
background-image Définir l'image d'arrière-plan de l'élément

background-position Définir la position de l'image d'arrière-plan

top top

right right

left left

centre milieu

background-repeat Définir l'arrière-plan Comment répéter les images

répéter tout répéter

répéter-x répéter horizontalement

répéter-y répéter verticalement

no-repeat ne pas répéter
background -attachment Indique si l'image d'arrière-plan défile au fur et à mesure que la page défile

Propriétés de bordure CSS (bordure et Outline)

properties

Description

border Définir toutes les propriétés de bordure

border-bottom Définir le bottom border

border-bottom-color Définir la couleur de la bordure inférieure

border-botton-style Définir le style de la bordure inférieure

border-botton-width Définir la largeur de la bordure inférieure

border-color Définir la couleur des quatre bordures

border-left Définir la bordure gauche

border-left-color Définir la couleur de la gauche border

border-left-style Définir le style de la bordure gauche

border-left -width Définir la largeur de la bordure gauche

border-right- Définir la droite border

border-right-color Définir la couleur de la bordure droite

border-right-style Définir le style de la bordure droite

border-right-width Définir la largeur de la bordure droite

border-style Définir le style des quatre bordures

solide Le style est une ligne continue

double Double ligne continue (la largeur est de 1px, l'effet est invisible)

dottde Ligne pointillée (apparaît sous forme de ligne continue sous IE6/7)

Ligne pointillée en pointillés (apparaît sous forme de ligne continue sous IE6/7)

border- top Définit la bordure supérieure

border-top-color Définit la couleur de la bordure supérieure

border-top-style Définit le style de la bordure supérieure

border-top -width Définit la largeur de la bordure supérieure

border-width Définit la largeur des quatre bordures

outline Définit tous les attributs du contour

outline-color Définit la couleur du outline

outline-style Définit le style du contour

outline-width Définit la largeur du contour

border-bottom-left-radius Définit la forme du contour inférieur coin gauche de la bordure

border-bottom-right-radius Définir la forme du coin inférieur droit de la bordure

border-top-left-radius Définir la forme du coin supérieur gauche de la bordure

border-top-right-radius Définit le coin supérieur droit de la bordure Forme

border-radius Attribut raccourci, définit les quatre attributs border-*-radius

border-image Attribut raccourci, définit tous les attributs border-image-*

border-image-outset Spécifie la quantité de zone d'image de bordure au-delà de la frontière

border-image-repeat Si l'image doit être répétée, arrondie ou étirée

border-image-slice Spécifie le décalage vers l'intérieur de la bordure de l'image

border-image-width Spécifie la largeur de la bordure de l'image

border-image-source Spécifie l'image utilisée comme bordure

box-shadow Ajouter une ou plusieurs ombres à la boîte

Attribut de police CSS ( Police)

Propriété

Description

police Définir toutes les propriétés de la police

font-family Définir la famille de polices du texte

font-size Définir la taille de la police du texte

font-size-adjust Spécifie la valeur d'aspect de l'élément

font-stretch Réduit ou étend la famille de polices actuelle

font-style Définit le style de police du texte

font-variant Définir la méthode d'ouverture du texte chinois et anglais

font-weight Définir l'épaisseur du texte

text-align Définir l'alignement du texte

center Centre left Align left right Align right

letter-spacing Définir l'espacement du texte

text-decoration Définir la ligne de décoration du texte

aucun Principalement utilisé pour supprimer le soulignement d'une balise

souligner Souligné

surligner surligner

trait barré

Remarque : Si un élément enfant est placé à l'intérieur d'un autre élément (élément parent) , définissez le texte sur la décoration de l'élément parent et constaterez que la décoration du texte de l'élément enfant ne peut pas être effacée

Solution :
1 Utiliser la position de positionnement absolue : ansolute
2.

paramètre de transformation de texte Conversion de casse

majuscules Tous les mots sont en majuscules

minuscules Tous les mots sont en minuscules

majuscule Mettre en majuscule la première lettre

font-style Définir le style du texte

normal normal

italique italique

oblique texte oblique

font-variant définit la méthode d'ouverture du texte dans Chinois et anglais

nomal normal

la programmation anglaise à petit caos est en majuscule et affichée en petite taille de police

attribut de texte CSS (Texte )

Attributs

Description

couleur Définir la couleur du texte

direction Spécifier la direction /direction d'écriture du texte

letter-spacing Définir l'espacement des caractères

line-height Définir la hauteur de la ligne

text-align Spécifier l'alignement horizontal du texte

vertical-align Spécifie l'alignement vertical du texte

text-decoration spécifie l'effet décoratif ajouté au texte

text-indent spécifie l'indentation de la première ligne de texte

tex-transform contrôle la casse du texte

unicode-bidi Définir la direction du texte

white-space Spécifier comment gérer les espaces blancs dans les éléments

word-spacing Définir l'espacement des mots

Propriété de table CSS ( Table）

Attribut

Description

border Définir la bordure

border-color Définir la couleur de la bordure

cellspacing Définir la largeur du cadre du tableau

cellpadding Définir la distance entre les données et le cadre

background-color Définir la couleur d'arrière-plan du tableau

background-url Paramètres Image d'arrière-plan du tableau

colspan Fusionner les cellules horizontalement

rowspan Fusionner les cellules verticalement

Quatre étapes de fusion de cellules

1. Déterminer le point de départ des cellules Quelle cellule commence à fusionner
2. Déterminer si les cellules sont fusionnées verticalement ou horizontalement 3. Déterminer comment de nombreuses cellules doivent être fusionnées 4. Traitez les cellules redondantes

Attribut de liste CSS (Liste)

Propriété

Description

list-style Définir tout en une seule instruction Les attributs de la liste

list-style-image Définir l'image comme marque d'élément de liste

list-style-position Définir la position de placement de la marque de l'élément de liste

à l'intérieur Placer le style de liste Dans le contenu

à l'extérieur Par défaut, le style de liste n'est pas dans le contenu , généralement en psdding

list-style-type Définir le type de marque d'élément de liste

Écriture composite

list-style 1. Type 2. Position 3. Image

Effacer le style par défaut

padding : 0px;

margin:0px;

list-style:aucun;

Attribut de marge CSS (Marge)

Attribut

Description

margin Définir toutes les propriétés de marge dans une seule instruction

margin-top Définit la marge supérieure de l'élément

margin-right Définit la marge droite de l'élément

margin-bottom Définit la marge inférieure de l'élément

margin-left Définir la marge gauche de l'élément

Propriété de remplissage CSS (Padding)

Propriété

Description

padding Définit toutes les propriétés de remplissage dans une seule déclaration

padding-top Définit le remplissage supérieur de l'élément

padding-right Définit le remplissage droit de l'élément

padding-bottom Définit le remplissage inférieur de l'élément

padding-left Définit le remplissage gauche de l'élément

Attribut de positionnement CSS (Positioning)

Attribut

Description

position spécifie le type de positionnement de l'élément

bottom définit le décalage entre la limite de la marge inférieure de l'élément positionné et la limite inférieure de son bloc conteneur

right Définit le décalage entre le bord de la marge droite de l'élément positionné et le bord droit de son bloc contenant

left Définit le décalage entre le bord de la marge gauche de l'élément positionné et le bord gauche de son bloc conteneur

top Set Le décalage entre la limite de marge supérieure de l'élément positionné et la limite supérieure de son bloc conteneur

overflow Spécifie ce qui se passe lorsque le contenu déborde de la boîte de l'élément

cursor Spécifie le type de curseur à afficher

float précise si la boîte doit flotter

display spécifie le type de boîte que l'élément doit générer

vertical- align définit l'alignement vertical de l'élément

visibilité spécifie si l'élément est visible

z-index Définit l'ordre d'empilement des éléments

Pseudo-classes CSS (Pseudo-classes)

Attributs

Description

 : actif Ajouter un style à l'élément activé

 : focus Donner le focus à la saisie au clavier Ajouter un style à l'élément

 : survoler Lorsque la souris survole l'élément, ajouter un style à l'élément

 : link Ajouter un style à un lien non visité

 : visité Ajouter un style au lien visité

 : lang Ajouter un style à l'élément avec l'attribut lang spécifié

CSS pour l'élément (Pseudo éléments)

Propriété

Description

 : première lettre Ajouter un style spécial à la première lettre du texte Styles

 : première ligne Ajouter des styles spéciaux à la première ligne du texte

: bofore Ajouter du contenu avant l'élément

: après Ajouter du contenu après l'élément

Conclusion

La simplicité ne précède pas la complexité, mais vient après la complexité

Pour Pour plus d'articles sur les CSS (propriétés) en HTML, veuillez faire attention au site Web PHP chinois !