Maison  >  Article  >  interface Web  >  Comment utiliser l'attribut class de la balise HTML span ? Voici une explication détaillée de l'attribut class

Comment utiliser l'attribut class de la balise HTML span ? Voici une explication détaillée de l'attribut class

寻∝梦
寻∝梦original
2018-08-28 13:54:3531268parcourir

Cet article vous parle principalement d'une certaine utilisation de l'attribut class de la balise HTML span. Celui-ci doit être utilisé avec le style CSS. Maintenant, je peux parler des bases du style CSS pour ceux qui ont les connaissances de base. facile. Jetons un coup d'oeil à cet article maintenant

Tout d'abord, regardons la signification de l'attribut class de la balise HTML span :

span in L'anglais signifie span, mais dans la production de pages Web, il s'agit d'une balise complète de balise html :

est utilisée pour combiner des éléments en ligne dans le document. La

classe est utilisée pour définir le style des étiquettes en HTML et peut être réutilisée. Elle peut définir la longueur, la largeur, la hauteur, la couleur de fond, etc. pour différentes étiquettes...

Pour. exemple, , où main est le nom de la classe et est défini avec "." en CSS

Recherchez le développement :

Voici un exemple :

<p><span>some text.</span>some other text.</p>

L'explication de l'exemple est ici :

Si vous n'appliquez pas de styles à span, le texte de l'élément span ne sera pas différent des autres textes. Néanmoins, l'élément span dans l'exemple ci-dessus ajoute une structure supplémentaire à l'élément p.

Vous pouvez appliquer des attributs d'identification ou de classe aux travées, ce qui peut ajouter une sémantique appropriée et faciliter l'application de styles aux travées.

Il est possible d'appliquer des attributs class ou id au même élément , mais il est plus courant de n'en appliquer qu'un seul. La principale différence entre les deux est que class est utilisé pour des groupes d'éléments (éléments similaires ou peut être compris comme un certain type d'éléments), tandis que id est utilisé pour identifier des éléments individuels et uniques.

Conseil : En fait, vous avez peut-être remarqué que certains textes du site W3School sont stylisés différemment des autres textes. Par exemple, les « conseils » sont en orange gras. Bien qu'il existe de nombreuses façons d'obtenir cet effet, notre approche est la suivante : utilisez le "indice" pour utiliser l'élément span, puis appliquez la classe à l'élément parent de l'élément span, c'est-à-dire l'élément p, afin que vous puissiez appliquer span à l'élément enfant de cette classe Style correspondant.

Voici le code en HTML :

<p class="tip"><span>提示:</span>... ... ...</p>

Voici le code en CSS :

p.tip span {
font-weight:bold;
color:#ff9955;
}

De cette façon, un simple attribut CSS, associé à l'application de la balise span, peut permettre d'appliquer une balise à d'autres éléments de balise. C'est l'un des avantages des styles CSS et est pratique à utiliser.

Voici un autre exemple de classe complet de balise HTML span :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">注意:这是一个很重要的段落。 :)</p>
</body>
</html>

Autant que vous pouvez le comprendre à partir de l'image, il s'agit également d'une page Web très simple , avec l'ajout de Click css style pour modifier l'ensemble du style. Par exemple, changez la couleur de la police en bleu.

Tout comme l'image :

Comment utiliser lattribut class de la balise HTML span ? Voici une explication détaillée de lattribut class

D'accord, ce qui précède est une introduction à l'attribut class de la balise HTML span. Si vous avez des questions, veuillez les poser ci-dessous.

【Recommandation de l'éditeur】

Comment écrire un chemin relatif pour la balise de base en HTML ? (Instructions d'utilisation incluses)

Quelle est l'utilisation de l'attribut src de la balise HTML img ? Analyse des méthodes d'utilisation spécifiques (avec exemples inclus)

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!

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