Maison >interface Web >tutoriel HTML >Balise span en HTML
Balise span en HTML
- WBOYoriginal
- 2024-09-04 16:25:35648parcourir
La balise Span en HTML est considérée comme un élément en ligne. Elle est similaire à la balise div, mais la balise div est délibérément utilisée pour les éléments de niveau bloc, tandis que la balise span est utilisée pour les éléments en ligne. Il est principalement utilisé chaque fois qu'un utilisateur souhaite regrouper les éléments en ligne dans sa structure de code. La balise Span en HTML est utilisée pour donner du style à un contenu particulier en utilisant la classe d'éléments ou l'attribut id. Il n'est pas possible d'effectuer un changement visuel seul en utilisant la balise span dans le document HTML. Cela fonctionne comme une balise en ligne dans le document HTML. L'utilisation des balises span dans votre code permet de réduire les attributs de code et HTML.
Syntaxe avec exemple
La syntaxe pour définir une balise span est la suivante :
Syntaxe :
<span class=""> Contents </span>
- Comme indiqué ci-dessus, le texte de syntaxe est inclus dans l'ouverture et la balise de fermeture est considéré comme un attribut span.
- Ceci est principalement utilisé pour regrouper des éléments en ligne. Cela permet de minimiser notre code dans un document HTML.
- Cela fonctionne de manière similaire à la balise div, mais une différence majeure est que div est utilisé comme un élément de niveau bloc, tandis que la balise span fonctionne comme une balise en ligne en HTML.
- La balise span n'est pas en mesure de fournir un changement visuel à elle seule.
- Cela fonctionne sur des balises telles que , , ,
, , et bien d'autres. - Cette balise n'est pas capable de créer un saut de ligne, mais elle donne la possibilité à l'utilisateur de séparer les choses des autres éléments. Il est donc possible d'effectuer des modifications uniquement sur le texte sélectionné plutôt que d'effectuer des modifications sur tout le code.
- Cela ne prend que la largeur requise, plutôt que d'occuper toute la largeur disponible dans le conteneur. Le meilleur exemple de balise span est l'attribut et l'image. Il utilise des conteneurs pour du texte montrant l'utilisation de balises span.
- Cela ne nécessite pas d’attributs spécifiques dans le codage ; avec l'aide de certains CSS et classes courants, nous pouvons définir une balise span.
- Nous pouvons mettre en évidence un texte spécifique, appliquer une couleur d'arrière-plan au texte et ajouter une image d'arrière-plan au texte à l'aide de la balise span du HTML.
- Il est également possible de changer la police du texte à l’aide de la balise span. Cela aidera à modifier la taille de la police, la couleur, la couleur d'arrière-plan, le style de police, etc.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>
</body>
</html>
Sortie :
- La balise Span n'a pas d'attribut spécifique ; comme les autres balises, il prend également en charge les attributs globaux et les attributs d'événement.
Propriétés de la balise Span en HTML
Voici quelques propriétés permettant d'appliquer un style avec . Ce sont les suivants :
- Style de police CSS : Il est utilisé pour appliquer un style au texte donné. Le texte doit être normal, italique, initial, hérité, etc.
- Famille de polices CSS : Elle est utilisée pour appliquer différents types de polices d'une liste donnée à un texte spécifique.
- Taille de la police CSS : Il est utile de définir la taille de la police en fonction du texte.
- CSS font-weight : Cette propriété est utilisée pour définir la police qui sera soit en gras, soit en épaisse.
- Transformation de texte CSS : Cela fera une majuscule du texte.
- Décoration de texte CSS : Cette propriété est utilisée pour décorer le texte sous la forme d'une ligne de décoration de texte, d'une couleur de décoration de texte, etc.
- Couleur CSS : Cette propriété de la balise span utilisée pour colorer le contenu du texte et les décorations du texte.
- Couleur d'arrière-plan CSS : Il s'agit d'une propriété utile pour définir la couleur d'arrière-plan de l'élément.
- CSS text-shadow : Cette propriété permet à l'utilisateur d'ajouter une ombre au texte.
- CSS text-align-last : Cela aidera à faire l'alignement du texte.
- Espacement des mots CSS : Cette propriété dans la balise span utilisée pour gérer l'espacement entre les mots.
- Espace blanc CSS : Cette propriété nous aide à gérer les espaces blancs à l'intérieur de l'élément spécifié.
- Hauteur de ligne CSS : Il fournit la hauteur de la ligne dans le code HTML.
- Saut de mot CSS : Cette propriété nous aide à définir où la ligne réelle doit être interrompue.
- Débordement de texte CSS : Il s'agit de la propriété la plus utile de la balise span, qui nous aide à identifier les contenus débordés qui ne sont pas affichés et qui devraient le signaler à l'utilisateur.
Exemples de balise Span en HTML
Un exemple de balise span en html est donné ci-dessous :
Exemple n°1
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>
<body>
<!-- span tags with inline style/css -->
<h2>Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2> Span tag with background color</h2>
<span style="background-color:lightblue;">
Everybody have natural beauty. Try look at your picture when you are a baby. Your eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got it.</span>
<br>
<h2> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>
</body>
</html>
Sortie :
Exemple n°2
Code :
<!--Example 2--> <!DOCTYPE html> <html> <head> <title>HTML Span Tag</title> </head> <body> <h2> Span tag Examples</h2> <p>Good, Better, Best Never let it rest. <span style="color:crimson;"> "Till your good is better and your better is best" </span></p> <p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font- size: 18px;"> STAY THE SAME OR CHANGE </span> </p> <p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;"> "Opportunities don't happen, you create them" </span></p> </body> </html>
Sortie :
Example #3
Code:
<!DOCTYPE html>
<html>
<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>
<body>
<h2> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>
</body>
</html>
Output:
Conclusion
From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.
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!
css html define for require break signal using class Attribute Property Event this overflow background transform word
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Pré-balise en HTMLArticle suivant：Pré-balise en HTML