0
votes

Style initial des balises et

J'ai donc récemment réalisé que de nombreuses balises html (essentiellement toutes) qui résident dans le corps sont essentiellement des balises de texte avec un certain style:

par exemple

a {
    color: blue; /*of some sort*/
    text-decoration: underline;
}

b {
    font-weight: 700;
}

J'étais donc curieux. Pour les balises et , je me demandais, comment puis-je déplacer le texte vers le haut en ligne? Il serait intéressant de faire quelque chose où vous avez du texte ondulé. Donc, d'une autre manière de dire cela, quel est le style initial des balises et ?

Edit: Ce serait aussi bien pour moi de pouvoir jouer avec ces

html css

3 commentaires

Curieusement, la spécification HTML5 indique que sup et sub devraient avoir une line-height:normal dans leur style par défaut, mais je ne trouve aucun navigateur qui le fasse.

@Alohci Cela signifie-t-il que les navigateurs vous indiquent le style par défaut pour chaque balise?

Oui, les informations peuvent être obtenues à partir des outils de développement (F12), bien que les détails sur la façon dont varient un peu entre les navigateurs.

3 Réponses :

1
votes

Eh bien, la vraie réponse est que cela dépend que chaque navigateur peut implémenter son propre style sur chaque élément.

C'est également pourquoi la plupart des sites Web récents utilisent la réinitialisation et la normalisation des feuilles CSS.

Par exemple, dans le projet normalize.css , les styles sont:

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

^{Source: https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L125}

2 commentaires

Ce ne sont pas les styles par défaut

@dippas est totalement d'accord. Mais les normes sont censées être brisées, des bogues se produisent, etc. Si ce n'était pas le cas, il n'y aurait pas tant de plaintes à propos de "pourquoi ceci ou cela ne s'affiche pas correctement dans ce navigateur alors qu'il fonctionne dans l'autre"

3
votes

Les styles par défaut des deux balises sont les suivants:

<div>
  <sup>1</sup>
  <sub>2</sub>
  <sup>3</sup>
  <sub>4</sub>
</div>
<hr />
<div>
  <sup>a</sup>
  <sub>b</sub>
  <sup>c</sup>
  <sub>d</sub>
</div>

Vous pouvez voir plus d'informations ici

Edit: Ce serait aussi bien pour moi de pouvoir jouer avec ces

Utilisez simplement les balises.

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

0 commentaires

1
votes

Voici le style par défaut de la balise sup :

<p>Yay! 
    <span class="a">r</span>
    <span class="b">a</span>
    <span class="c">i</span>
    <span class="d">n</span>
    <span class="e">b</span>
    <span class="f">o</span>
    <span class="g">w</span>
    <span class="h">s</span>
    <span class="i">a</span>
    <span class="h">n</span>
    <span class="g">d</span>
    <span class="f">u</span>
    <span class="e">n</span>
    <span class="d">i</span>
    <span class="c">c</span>
    <span class="b">o</span>
    <span class="a">r</span>
    <span class="b">n</span>
    <span class="c">s</span>
</p>

.a {
  font-size: smaller;
  vertical-align: 0px;
}
.b {
  font-size: smaller;
  vertical-align: -2px;
}
.c {
  font-size: smaller;
  vertical-align: -4px;
}
.d {
  font-size: smaller;
  vertical-align: -2px;
}
.e {
  font-size: smaller;
  vertical-align: 0px;
}
.f {
  font-size: smaller;
  vertical-align: 2px;
}
.g {
  font-size: smaller;
  vertical-align: 4px;
}
.h {
  font-size: smaller;
  vertical-align: 2px;
}
.i {
  font-size: smaller;
  vertical-align: 0px;
}

<p>Yay! 
    <span class="a">u</span>
    <span class="b">n</span>
    <span class="c">i</span>
    <span class="d">c</span>
    <span class="e">o</span>
    <span class="d">r</span>
    <span class="e">n</span>
    <span class="c">s</span>
</p>

Voici le style par défaut de la sub balise:

.a {
  font-size: smaller;
  vertical-align: sub;
}
.b {
  font-size: smaller;
  vertical-align: text-bottom;
}
.c {
  font-size: smaller;
  vertical-align: middle;
}
.d {
  font-size: smaller;
  vertical-align: text-top;
}
.e {
  font-size: smaller;
  vertical-align: super;
}

<p>E = mc<sub>2</sub> - or does it?</p>
<p>E = mc<span class="sub">2</span> - or does it?</p>

.sub {
  font-size: smaller;
  vertical-align: sub;
}

Alors oui, cela signifie que nous pouvons faire ceci:

sup {
    font-size: smaller;
    vertical-align: sub;
}

<p>E = mc<sup>2</sup> - or does it?</p>
<p>E = mc<span class="sup">2</span> - or does it?</p>

Si jamais vous vouliez utiliser des valeurs numériques pour l'alignement vertical, celles-ci fonctionneraient également, comme ceci:

.sup {
  font-size: smaller;
  vertical-align: super;
}

sup {
    font-size: smaller;
    vertical-align: super;
}

3 commentaires

Merci cela a été très utile, cela m'a permis de les déplacer à ma capacité. Est-il possible d'avoir un alignement vertical numérique?

pourquoi utiliser span avec les valeurs par défaut de sup & sub quand vous avez simplement ces balises? En utilisant les balises correctes, ce sera mieux sémantiquement

oui, c'était une démonstration - il suffit de montrer que cela fonctionne!

Style initial des balises <sup> et <sub>