Des bases à la maîtrise : tutoriel pratique CSS (2)

Sept. Contrôler le style du texte

Le style de contrôle du texte comprend deux parties : la casse du texte et la modification du texte.

1． Casse du texte

La casse du texte permet aux concepteurs Web d'éviter d'avoir à compléter la casse du texte lors de sa saisie. Au lieu de cela, ils peuvent définir la casse du texte partiel selon leurs besoins après la saisie.

Le format de base est le suivant :

text-transform : Paramètre

Plage de valeurs du paramètre :

·uppercase : Tout le texte est affiché en lettres majuscules

·minuscule : tout le texte est affiché en minuscule

·capitaliser : la première lettre de chaque mot est affichée en majuscule

·aucun : les paramètres de déformation du texte du parent sont non hérité

Remarque : héritage Cela signifie que les identifiants HTML seront hérités par les paramètres qui contiennent leurs propres identifiants.

2． Modification de texte

L'objectif principal de la modification de texte est de modifier le soulignement lorsque le navigateur affiche des liens texte.

Le format de base est le suivant :

text-decoration : Paramètre

Plage de valeurs du paramètre :

·underline : Souligner le texte

·overline : souligner le texte

·line-through : barrer le texte

·blink : faire clignoter le texte

·aucun : ne pas afficher ce qui précède Any effet

8. Contrôler le style du texte

Le style de contrôle du texte comprend six parties : la distance des mots, la distance des lettres, l'espacement des lignes de texte, l'alignement horizontal du texte, l'alignement vertical du texte et l'indentation du texte.

1． Espacement des mots

L'espacement des mots fait référence à la distance entre chaque mot en anglais, à l'exclusion des caractères chinois.

Le format de base est le suivant :

espacement des mots : distance d'espacement

La valeur de la distance d'espacement : points, em, pixels, in, cm, mm, pc , ex, normal etc.

2． Espacement des lettres

L'espacement des lettres fait référence à la distance entre les lettres anglaises. Les fonctions, l'utilisation et les paramètres sont très similaires à l'espacement des mots.

Le format de base est le suivant :

lettre-espacement : espacement des lettres

3. Espacement principal

L'espacement principal fait référence à la distance verticale entre les lignes de base supérieure et inférieure. De manière générale, dans les cahiers d'exercices anglais de cinq lignes, la troisième ligne horizontale de haut en bas est ce que l'ordinateur considère comme la ligne de base de cette ligne.

Le format de base est le suivant :

line-height : distance entre les lignes

Valeur de la distance entre les lignes :

·Nombres sans unités : 1 est le nombre de base, équivalent à 100 % de la relation proportionnelle

·Nombres avec unités de longueur : reportez-vous aux unités spécifiques

·Relation proportionnelle

Remarque : si le texte la police est très Si l'espacement des lignes est relativement petit, les lignes supérieure et inférieure du texte peuvent se chevaucher.

4． Alignement horizontal du texte

L'alignement horizontal du texte peut contrôler l'alignement horizontal du texte, et il fait non seulement référence au contenu du texte, mais inclut également la définition de l'alignement des images et des éléments d'image.

Le format de base est le suivant :

text-align : Paramètre

Valeur du paramètre :

·left : aligné à gauche

· droite : alignement à droite

·centre : alignement au centre

·justifier : alignement relatif à gauche et à droite

Mais il convient de noter que text-alight est un bloc- level et ne peut être utilisé que dans des identifiants tels que < p>, < blockquqte>, <

5． Alignement vertical du texte

L'alignement vertical du texte doit être relatif à la position du texte parent, et non à l'alignement vertical du texte sur la page Web. Par exemple, s'il y a une section de texte dans une cellule d'un tableau, le réglage du centrage vertical de ce texte est mesuré par rapport à la cellule, c'est-à-dire que le texte sera affiché au centre de la cellule et non au centre de. la page Web entière.

Le format de base est le suivant :

alignement vertical : paramètre

Valeur du paramètre :

·top : alignement supérieur

·bottom : alignement inférieur

·text-top : alignement relatif du haut du texte

·text-bottom : alignement relatif du texte inférieur

·baseline : alignement de la ligne de base

·middle : alignement au centre

·sub : affiché sous forme d'indice

·super : affiché sous forme d'exposant

6. Retrait du texte

Le retrait du texte permet d'afficher le texte dans une zone plus étroite que la valeur par défaut. Il est principalement utilisé pour mettre en retrait la première ligne du style chinois, ou pour mettre en retrait de grands paragraphes de texte cité et de notes. .

Le format de base est le suivant :

text-indent : distance d'indentation

Valeur de distance d'indentation :

·Nombre avec unité de longueur

·Relation proportionnelle

Cependant, il convient de noter que lors de l'utilisation de la relation proportionnelle, certaines personnes peuvent penser que la proportion par défaut du navigateur est relative à la largeur du paragraphe. En fait, ce n'est pas le cas. le cas. Le navigateur entier La fenêtre est la référence par défaut du navigateur.

De plus, text-indent est un attribut de niveau bloc et ne peut être utilisé que dans des identifiants tels que < p>, < ;.

Neuf. Styles pour contrôler la couleur et l'arrière-plan

Les styles pour contrôler la couleur et l'arrière-plan comprennent six parties : l'attribut de couleur, la couleur d'arrière-plan, l'image d'arrière-plan, la répétition de l'image d'arrière-plan, la fixation de l'image d'arrière-plan et le positionnement de l'arrière-plan.

1． Le format de base de l'attribut de couleur

est le suivant :

couleur : paramètre

Plage de valeurs du paramètre de couleur :

·Représenté par la valeur RVB

·Représenté par une valeur de couleur hexadécimale (hex)

·Représenté par le nom anglais de la couleur par défaut

Il est sans doute le plus pratique d'exprimer la couleur par défaut par son nom anglais, mais comme il y a trop peu de types de couleurs prédéfinis, de plus en plus de web designers préfèrent utiliser le RVB. La méthode RVB présente de nombreux avantages. Non seulement elle permet de représenter avec précision les couleurs sous forme numérique, mais elle constitue également la spécification par défaut utilisée dans de nombreux logiciels de production d'images (tels que Photoshop). Elle constitue une base solide pour une meilleure intégration des images et des pages Web. .

2． Couleur d'arrière-plan

En HTML, il n'y a qu'une seule façon d'ajouter une couleur d'arrière-plan à un objet, c'est d'abord de créer un tableau, de définir la couleur d'arrière-plan dans le tableau, puis de placer l'objet dans la cellule. . C'est plus gênant. Non seulement cela nécessite beaucoup de code, mais cela pose également quelques problèmes avec la taille et le positionnement de la table. Maintenant, il est facile de le faire directement avec CSS, et la gamme d'objets est très large, il peut s'agir d'un morceau de texte, ou simplement d'un mot ou d'une lettre.

Le format de base est le suivant :

background-color : paramètre

La valeur du paramètre est la même que l'attribut color.

3. Le format de base de l'image d'arrière-plan

est le suivant :

background-image : url(URL)

URL est le chemin de stockage de l'image d'arrière-plan. Si « aucun » est utilisé à la place du chemin de stockage de l’image d’arrière-plan, rien ne sera affiché.

4． Répétition de l'image d'arrière-plan

La répétition de l'image d'arrière-plan contrôle si l'image d'arrière-plan est en mosaïque ou non. En d'autres termes, combinée au contrôle du positionnement de l'arrière-plan, une image d'arrière-plan peut être affichée séparément quelque part sur la page Web.

Le format de base est le suivant :

background-repeat : Paramètre

Plage de valeurs du paramètre :

·no-repeat : Ne pas répéter l'arrière-plan en mosaïque images

·répéter-x : créer la mosaïque d'image uniquement dans le sens horizontal

·répéter-y : créer la mosaïque d'image uniquement dans le sens vertical

Si aucun arrière-plan l'image est spécifiée Pour les attributs répétés, le navigateur affiche par défaut l'image d'arrière-plan en mosaïque horizontalement et verticalement.

5． Image d'arrière-plan fixe

Image d'arrière-plan fixe contrôle si l'image d'arrière-plan défile avec le défilement de la page Web. Si vous ne définissez pas l'attribut fixe de l'image d'arrière-plan, l'image d'arrière-plan par défaut du navigateur défilera avec le défilement de la page Web. Afin d'éviter que des images d'arrière-plan trop sophistiquées n'endommagent la vue du spectateur lors du défilement, vous pouvez dissocier l'image d'arrière-plan et le contenu du texte, qui doivent être regroupés avec la fenêtre du navigateur.

Le format de base est le suivant :

background-attachment : Paramètre

Plage de valeurs du paramètre :

·fixe : Lorsque la page Web défile, l'image d'arrière-plan est relative au navigateur Pour la fenêtre du navigateur, elle est fixe

·défilement : lorsque la page Web défile, l'image d'arrière-plan défile avec la fenêtre du navigateur

6. Positionnement en arrière-plan

Le positionnement en arrière-plan est utilisé pour contrôler la position de l'image d'arrière-plan affichée sur la page Web.

Le format de base est le suivant :

position d'arrière-plan : tableau des paramètres

Plage de valeurs du paramètre :

·Paramètre numérique avec unité de longueur

·haut : alignement supérieur par rapport à l'objet de premier plan

·bas : alignement inférieur par rapport à l'objet de premier plan

·gauche : alignement à gauche par rapport à l'objet de premier plan

·droite : par rapport à l'objet de premier plan Alignement à droite

·centre : alignement au centre par rapport à l'objet de premier plan

·Relation proportionnelle

Si le centre dans le paramètre est utilisé devant un autre paramètre, cela signifie un centrage horizontal ; si utilisé Derrière un autre paramètre, cela signifie un centrage vertical.

10. Contrôler le style de la liste

La liste est une méthode d'affichage très utile en HTML. Elle peut organiser soigneusement le contenu parallèle associé verticalement, donnant à la page Web un aspect soigné et professionnel et donnant aux téléspectateurs une impression de clarté.

La feuille de style ajoute quelques fonctions à la liste. Le style de la liste de contrôle comprend trois parties : le style de liste, le symbole graphique et la position de la liste.

1． Symboles de liste

Les symboles de liste font référence aux symboles affichés devant chaque élément de la liste.

Le format de base est le suivant :

list-style-type : paramètre

Plage de valeurs du paramètre :

·disque : cercle

·cercle : cercle creux

·carré : carré

·décimal : nombre décimal

·minus-romain : chiffre romain minuscule

·supérieur - roman : chiffres romains majuscules

· alphabétique inférieur : lettres grecques minuscules

· alphabétique supérieure : lettres grecques majuscules

· aucun : aucun affichage de symbole

disque dans le paramètre est l'option par défaut.

2． Symboles graphiques

Les symboles graphiques signifient que les puces de la liste d'origine peuvent être remplacées par des graphiques.

Le format de base est le suivant :

list-style-image : URL

URL est l'adresse du fichier graphique utilisé pour remplacer la puce, et vous pouvez utiliser une adresse relative ou une adresse absolue.

3. Position de la liste

Position de la liste décrit l'endroit où la liste est affichée.

Le format de base est le suivant :

list-style-position : paramètre

Plage de valeurs du paramètre :

·inside : affiché à l'intérieur du modèle BOX

·extérieur : affiché à l'extérieur du modèle BOX

Un nouveau concept apparaît ici : le modèle BOX. BOX fait référence à un conteneur qui contient des objets auxquels des règles de style sont appliquées. L'introduction détaillée sera donnée plus tard.

Onze. Contrôler le style de l'interface utilisateur

Sur une page Web, la souris a généralement la forme d'une flèche, prend la forme d'une main lorsqu'elle pointe vers un lien et prend la forme d'un sablier lorsqu'elle attend que la page Web soit téléchargée... Cela semble être le cas. une convention. Bien que cette conception nous permette de connaître l'état actuel du navigateur ou ce qu'il peut faire, il semble qu'elle ne puisse pas répondre pleinement à nos besoins. Prenez un lien, par exemple, il peut pointer vers un fichier d'aide, ou il peut avancer ou reculer d'une page. Pour de nombreuses fonctions, la même souris en forme de main ne peut à elle seule expliquer le problème. Heureusement, CSS propose jusqu'à 13 formes de souris parmi lesquelles choisir.

Le format de base est le suivant :

curseur : paramètre de forme de la souris

Tableau des paramètres de forme de la souris CSS :

code CSS

forme de la souris

style="cursor:hand"

Forme de la main

style="cursor:crosshair"

Forme de la croix

style="cursor:text"

Forme du texte

style="cursor:wait"

Forme du sablier

style="cursor:move"

Forme de flèche croisée

style="cursor:help"

Forme de point d'interrogation

style="cursor:e-resize"

Forme de flèche droite

style="cursor:n-resize"

Forme de flèche vers le haut

style="cursor:nw-resize"

Haut forme de flèche gauche

style="cursor:w-resize"

En forme de flèche gauche

style="cursor:s-resize"

Bas en forme de flèche

style="cursor:se-resize"

Forme de flèche vers le bas vers la droite

style="cursor:sw-resize"

Bas forme de flèche gauche

Ce qui précède est le contenu de Des bases à la maîtrise : Tutoriel pratique CSS (2). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (). www.php.cn) !