Discussion :

[ml1234]

bonjour,
j'ai de nombreux styles de textes à écrire sur une page et j'ai encore quelques difficultés à définir les <p> et comprendre les cascades de styles sur un même p ou h.
j'ai lu avec intérêt le tuto "premier pas avec css".
je pense qu'il me manque encore les span (différence avec styles?)

connaissez-vous un bon tuto sur les styles de texte ?

merci
Marc

[Erwan31]

je pense qu'il me manque encore les span (différence avec styles?)

Rien à voir style est un attribut HTML alors span est une balise HTML.
Style permet d'ajouter des style à un élément précis dans le HTML.

connaissez-vous un bon tuto sur les styles de texte ?

Non mais qu'aimerais tu savoir exactement?

[ml1234]

bonjour,
en fait, j'aimerais savoir facilement changer de taille, couleur,... sur une même page. je cherche donc un petit tuto qui reprend un peu les textes, sachant que celui sur les bases du css couvrait déjà les styles et les priorités en cas de cascade, de redondance,...
si j'ai bien compris j'utilise style comme classe d'un paragraphe et span pour changer une partie du texte de ce paragraphe stylisé. correct ?

quelques exemples vus sur des sites :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#bandeau p {
font-weight:bold;
}
 
#bandeau p span 
{
color:#d90000;
}
 
<div id="bandeau">
<p>mettre en forme des pages web avec css. <span>les bases</span></p>
</div>

donc j'ai compris que span permet de mettre en forme une zone d'un texte flottant


sur un site de resto, j'ai vu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<p style="padding-left: 30px;"><strong><span style="color: #dfdd38;">Les plats de salades</span></strong></p>

ou encore :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p align="center" class="MsoNormal" style="text-align: center; line-height: 200%;"><span lang="en" style="font-size: 14pt; line-height: 200%; font-family: &quot;Footlight MT Light&quot;,&quot;serif&quot;;">Assiette de poissons fumés<o:p /></span></p>            
 
 
<p style="margin-left: -18pt;" class="MsoNormal"><b style=""><span lang="en" style="font-size: 26pt; font-family: &quot;Kunstler Script&quot;;">Assiette  de Poissons Fumés<span style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style=""><span style=""> </span>15.00&#128;</span></span></b><span lang="en" style="font-size: 26pt; font-family: &quot;Kunstler Script&quot;;"><o:p /></span></p>

après le 15 de ce dernier paragraphe c'est normalement un signe euro qui devrait s'afficher d'où peut-être toutes les balises mais ce site de resto a des problèmes avec les caractères


A PROPOS, c'est quoi Msonormal et <o:p/> ?

merci
Marc

[sacha69]

Msonormal est le nom de la class de son paragraphe (<p/>).
Toute balise (<p>, <span>, <input>...) peut avoir un id et une class.
Une class étant utilisée pour appliquer un même style à plusieurs éléments présents sur ton site. C'est la même chose qu'un id sauf qu'un id, dans les normes, ne doit pas être répété; les class sont là pour ça.

Je dirais que la personne qui a écrit ce code a mis un smiley <o:
et qu'il a voulu fermer son <p> comme ça => /p> à moins que ça fasse aussi partie de son smiley mais en tout cas ça n'a rien à voir avec les styles ^^

[vodiem]

salut Erwan31, sacha69 et ml1234,

Msonormal est une class comme l'explique sacha69, on le retrouve dans le html généré par les documents Word comme la balise xml <o:p/>.

inutile s'ils sont repris sans leur déclaration respective.

[ml1234]

il me semblait bien que le créateur du site ne s'était pas amusé à mettre des smileys à chaque ligne du menu -)

veux-tu dire que msonormal et o:p peuvent être supprimés sans rien changer au look de la page ? je veux dire msonormal ne signifie pas une police arial 12 bold,... ?

merci
Marc

[vodiem]

si tu n'as pas de déclaration dans le <style> (interne ou externe) genre:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

p.MsoNormal, li.MsoNormal, div.MsoNormal {....}

ou autre class .MsoNormal

en gros si c'est un html généré pas word, s'il n'y a pas le pavé de 400 lignes:
oui tu peux tout retirer.

[Erwan31]

Bonjour,
le code que tu donnes n'est pas ce qu'il y a de plus propre: un attribut de présentation (align) déconseillé comme la grande majorité des attribut de présentation. Une unité de police en points (pt) pas adapté à l'écran, etc.

L'attribut style permet d'attribuer des style localement, on appelle ça les styles inline (en-ligne), tandis que class (ou id) fait référence un une règle de style présente dans un fichier CSS externe ou dans le head du document.

Pour changer localement un style (redondant) de texte > <span class="classname"></span> ou utiliser les possibilité des descendances.
p.test1 span {...} (pour cibler tous les span compris dans un paragraphe de class test1.

[ml1234]

bonjour erwan,
on ne peut pas faire align="center" dans un paragraph ???
je fais cela partout

j'essayerai les fonts en em quoique je ne sais pas ce qu'est 1em alors que je fais toujours arial 12, times new roman 10,...

c'est quoi alors la bonne syntaxe pour aligner un paragraphe au milieu avec un style (font arial 12) donné et une partie du corps du paragraphe en rouge ?

merci
Marc