balise span

donald7 · Message par **donald7** » 14 déc. 2007, 11:34

bonjour

je continue à essayer de comprendre les feuilles de style et leur emploi à travers kompozer et je découvre les différentes versions de Zen Garden. Je suis très impressionné de voir les différences obtenues en ne modifiant que la feuille css.

En analysant les codes des feuilles html et css, j'essaye de comprendre ce qu'apporte la balise dans le code html et je trouve pas

quelle différence obtient on entre ces deux lignes de code ?

Code : Tout sélectionner

<h1><span>The beauty of CSS Zen Garden</span></h1>
<h1>The beauty of CSS Zen Garden</h1>

a l'ecran il n'y a pas de différence mais je suppose que la difféference arrive quand on ajoute la feuille de style

Merci

donald

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Message par **chinon37** » 14 déc. 2007, 11:51

bonjour,

La balise est utilisée pour "styler" une partie du texte.
Dans ton exemple, tu as mis tout le texte entre les balises 
En fait, sera utile si tu veux par exemple que zen garden soit en gras ou de couleur différente
dans ce cas, tu auras le code suivant:

Code : Tout sélectionner

<h1>The beauty of CSS <span>Zen Garden</span></h1>

tu appliques une classe à et le texte s'affiche différemment

[edit:
Copie ce code dans l'onglet source d'un nouveau fichier de KpZ après avoir supprimer ce que l'onglet comprenait:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 6 November 2007), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
    <style type="text/css">
.color {
    color: #33cc00;
    font-size: 110%;
    }

    </style>
  </head>
  <body>
    <h1>
      the beauty of <span class="color">Zen Garden</span>
    </h1>
  </body>
</html>

Tu verras l'effet de style de span: je lui ai attribué la classe .color. Si tu modifie quelque chose dans l'éditeur de style pour .color, tu comprendras l'intérêt de span

donald7 · Message par **donald7** » 14 déc. 2007, 12:26

Effectivement j'obtiens un beau vert prairie pour Zen Garden mais là tu as ajouté un atttribut class et une valeur color

et je comprends que cela marche

ce qui me trouble est que dans le fichier html de zen garden, il y a des balises toutes nues qui ne peuvent pas, à priori, être exploitées par la feuille de style.

extrait :

Code : Tout sélectionner

<h1><span>css
Zen Garden</span></h1> <h2><span>The Beauty of
<acronym title="Cascading Style Sheets">CSS</acronym>
Design</span></h2> </div>
<div id="quickSummary"> <p class="p1"><span>A
demonstration of what
can be accomplished visually through <acronym
 title="Cascading Style Sheets">CSS</acronym>-based
design. Select any
style sheet from the list to load it into this page.</span></p>

ce qui m'intrigue est que est une balise html , et il faut bien qu'elle puisse converser avec la feuille de style pour que le style désiré soit appliqué au texte entre les deux balises, non ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Message par **chinon37** » 14 déc. 2007, 12:50

rien ne t'empêche de créer une règle span...
Si au lieu de créer la règle .color, j'avais créé une règle span avec les mêmes attributs (couleur verte et taille à 110%), on aurait eu le même résultat.
Sauf que dans ce dernier cas, tous les span de la page auront le même aspect.
Avec des classes, on peut avoir des span avec des styles différents

[avis purement perso: l'intérêt de créer une règle span est limité et manque de souplesse, ce qui est l'intérêt de l'utilisation de cette balise. L'utilisation de classes apporte cette souplesse.]

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 déc. 2007, 12:56

Même les balises span nues peuvent être adressées et donc être référencées dans le css par une gestion des sélecteur css.
Par exemple tu peux faire une règle qui s'applique à tous les spans de titre 1, dans ce cas pas besoin de classes ou d'identifiants particuliers.

Message par **chinon37** » 14 déc. 2007, 12:58

Oui, bien sûr. Il est aussi possible de faire des règles de type h1 span, i.e. les balises span contenues dans un titre h1.
Je ne pense jamais à ces règles

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 déc. 2007, 13:28

En fait, ton message n'était pas encore arrivé quand j'ai commencé ma réponse pour éclairer le cas Zen Garden...Je suis parfois très lent dans mes propos, même au clavier

Message par **chinon37** » 14 déc. 2007, 14:43

Fabrice.Tres.Net a écrit :En fait, ton message n'était pas encore arrivé quand j'ai commencé ma réponse pour éclairer le cas Zen Garden...Je suis parfois très lent dans mes propos, même au clavier

+1... bienvenue au club

Geckozone

balise span

balise span

Qui est en ligne ?