Salutations à tous ceux qui ont envie de nouvelles connaissances et lit mon blog. La publication d'aujourd'hui, je souhaite consacrer un sujet très facile, qui appelle néanmoins régulièrement un certain nombre de problèmes de nouveaux arrivants: "Comment supprimer ou ajouter le stress inférieur HTML."

Autant que vous sachiez déjà, le soussecore inférieur peut être réglé manuellement, mais les liens sont installés par défaut. C'est pourquoi, dans l'article, je vous rappellerai comment poser des titres de soulignement, je vous dirai comment installer la ligne inférieure sur toute la largeur du bloc, ainsi que sur la manière de faire face à la mise en forme standard des liens. Eh bien, commençons!

Et venir, ici cela souligne!

Il existe une étiquette de paire spéciale pour les traits de texte TEXT: mot.

Cependant, des versets professionnels utilisent les mécanismes des tables en cascade de style, c'est-à-dire CSS, pour la conception de l'apparence de tout. Et c'est vrai. Cette approche partage le marquillage de la stylisation, rend la formatage flexible et pratique. De plus, il est plus facile d'attraper les bugs (erreurs) dans le code.

Pour souligner le contenu textuel, de telles propriétés sont principalement utilisées: frontière. et décoration de texte..

Élément frontière. Il est responsable de l'installation du cadre autour du bloc spécifié et vous permet également de définir l'épaisseur de la ligne et son style.

Cette unité est suffisamment flexible, car vous pouvez spécifier le formatage des côtés individuels de la limite. Ceci est réalisé avec l'aide de propriétés:

1. fRONTIÈRE-droite (sur la droite)
2. fRONTIÈRE-haut. (d'en haut)
3. fRONTIÈRE-la gauche. (la gauche)
4. fRONTIÈRE-bas (bas)

• point ( pointé.)
• pointillé ( pointillé.)
• linéaire ( solide)
• double ( double.)
• blocs de cadrage de volume ( rainure,encadré,ridge I.début.)

N'oubliez pas que vous pouvez toujours répéter les paramètres de style du bloc parent avec un mot clé hériter..

Discutons maintenant de la propriété de langue CSS décoration de texte.. Cet élément est responsable des décorations de texte supplémentaires.

Ceux-ci inclus:

1. clignotant ( cligner.)
2. ligne sur le texte ( surmonter)
3. objets croisés ( ligne à travers.)
4. héritage de stylisation ( hériter.)
5. annuler toutes les décorations supplémentaires ( rien)
6. nous avons besoin d'un soulignement ( souligner)

C'est une pratique du temps

Maintenant, je veux que vous obteniez les connaissances acquises et que vous avez pratiquement testé l'exemple d'un code de programme donné par moi. Pour ceux qui connaissent ce sujet, cela sera également utile. Comme nous le savons tous: «La répétition est la mère des enseignements!».

Ce code implémente une stylisation modifiée de références et définit également le soulignement sous toute la largeur du bloc.

Texte du château souligné Titre

Sur cette note, j'ai terminé la publication de la formation. Il aborde tous les outils nécessaires pour souligner le contenu du texte, sachant que vous pouvez créer des options de conception de page de site Web.

N'oubliez pas de rejoindre les rangs de mes abonnés, car il y a encore beaucoup de sujets intéressants et utiles à venir, ainsi que de partager le blog de lien avec des amis. Bye Bye!

Sincèrement, chuechev romain

Le texte souligné dans HTML est mis en surbrillance à l'aide de la balise u. HTML (du mot souligner). Il est appliqué comme suit (la partie souhaitée du texte est placée entre les étiquettes ):

Sites de concepteurs "Nubex"

Mais ce code est considéré comme inutilité, donc beaucoup plus efficacement et plus efficacement d'utiliser des styles CSS pour les paysages de texte.

Soulignez le texte - CSS

Comme nous l'avons déjà parlé dans l'article, les paysages de texte sont définis à l'aide de la propriété. décoration de texte.. Le texte souligné est défini par le paramètre souligner:

Sites de concepteurs Nubex "

Pour souligner le texte à l'aide de CSS non seulement une ligne solide. Voyons quelles options vous pouvez souligner:

• Dettez le texte en pointillé CSS:

  Sites de concepteurs Nubex "

  
  
  
• Points de soulignement:

  Sites de concepteurs Nubex "

  
  
  
• Double caractéristique:

  Sites de concepteurs Nubex "

  
  
  

Comme on peut le voir dans les exemples ci-dessus, vous pouvez contrôler le style de soulignement à l'aide de la propriété. bordure du bas. (la ligne de fond). Avec ce paramètre, vous pouvez définir le type de soulignement, de la couleur, de l'épaisseur.

Vous permet de créer un soulignement différent dans HTML inférieur (souligné), du top (surligné), du texte traversé (ligne-travers), etc. Compatible cette puce avec le précédent et travaillera:

Dans la deuxième ligne, il est montré comment tout est enregistré dans une ligne avec une décoration de texte.

text-décoration-style - Texte de soulignement

L'option définit l'apparence de la ligne décorative pour / référence. Dans les nouvelles recommandations du CSS, des valeurs ondulées et doubles ont été ajoutées, elles ne sont que 5:

• ligne solide - ligne solide;
• double - double (à partir du premier exemple ci-dessus);
• pointillés - consiste en une séquence de points;
• pointillé - vous permet de faire un soulignement en pointillés CSS;
• wavy - Ligne ondulée spectaculaire.

text-Soulignant-Position - Positionnement CSS Soulignore

Avec l'aide de cette propriété, vous pouvez contrôler la position de la ligne par rapport à la police de glyphe.
Total 4 options sont disponibles:

• auto - est situé aussi près que possible de texte du texte;
• sous - sous la bordure la plus basse de la police;
• gauche et droite - gauche / droite pour les entrées affichées verticalement.

Voici la différence visuelle entre le texte inférieur sous-traitant en utilisant sous et Auto:

Je pense que la différence est assez évidente.

text-décoration-skip - nous supprimons le soulignement des articles

En utilisant l'option, vous pouvez annuler (Ignorer) la décoration de certains éléments de la chaîne HTML. Pour mieux comprendre les valeurs valides des espaces, des objets, une décoration de la boîte, des bords, une encre, je vais dupliquer la photo de la dernière note:

C'est-à-dire que, par exemple, avec l'aide de l'encre, vous pouvez rendre le soulignement inférieur en CSS, qui ne serait pas croisé avec les personnages. La valeur des objets vous permet de sauter les éléments en ligne (Inline-Block) - Insert Span, et la ligne solide sera interrompue à l'endroit approprié:

Les paramètres de la boîte-décoration, des espaces, des bords sont bien pires supportés par des navigateurs, de sorte que leur résultat est parfois différent de celui attendu. Voici un état de compatibilité / de soutien de la décoration de texte au moment de la rédaction de l'article:

Chips supplémentaires pour souligner

Les utilisateurs de débutants posent souvent quelques questions typiques sur le sujet, nous avons également décidé de les considérer. L'exemple global est au fond même après l'explication.

Comment supprimer la référence de soulignement

a: HOVER (Texte-Décoration: Soulignant;)

Les deux exemples ci-dessous vous permettent de comprendre la logique de travailler lorsque vous survolez: Ou vous indiquez initialement dans les références de sous-traitants CSS, puis retirez-la en survolée, ou inversement.

S'il y a d'autres questions sur le sujet, demandez-leur dans les commentaires. Nous allons essayer de considérer plus tard ou de suggérer dans les réponses. La pratique principale dans cette affaire est la pratique - essayez d'ajouter différentes propriétés pour l'option de décoration de texte directement dans les exemples ou de créer votre propre fichier de test. Nous espérons sur le sujet du sous-fond de texte et des liens dans CSS / HTML, il est devenu évident.

Soulignore pour les éléments de bloc tels que la balise

Vous pouvez dépenser deux. Par exemple, une ligne sous le texte est installée sur toute la largeur du bloc, quel que soit le volume de texte. Et aussi pour souligner que dans le texte. Ensuite, considérons les deux options.

Ligne sous le texte sur toute la largeur du bloc

Pour créer une ligne sous le texte, ajoutez la propriété de style de bordure à l'élément, sa valeur est simultanément de l'épaisseur de la ligne, de son style et de sa couleur (exemple 1).

Exemple 1. Ligne sur toute la largeur

HTML5 CSS 2.1 IE CR OP SA FX

Exemple de texte

La distance entre la ligne vers le texte peut être ajustée par la propriété inférieure du remplissage en le ajoutant au sélecteur H1. Le résultat de cet exemple est illustré à la Fig. une.

Texte de soulignement

Pour souligner uniquement le texte, vous devez utiliser la propriété Text-décoration avec la valeur de soulignement, ce qui l'ajoutez à nouveau au sélecteur H1 (exemple 2).

Exemple 2. Ligne sur la largeur du texte

HTML5 CSS 2.1 IE CR OP SA FX

Exemple de texte

L'en-tête noir attire l'attention, malgré le fait qu'il soit noir, pas blanc.

Le résultat de cet exemple est illustré à la Fig. 2.

Dans le cas de l'utilisation de la propriété Text-décoration, la ligne est liée de manière rigide au texte. Il ne sera donc possible de déterminer sa position et son style.