18073 sujets

Questions générales et questions de débutants

L'esprit de CSS

Bonjour,
bine sûr, je débute en CSS !!!

Ma question :
CSS me semble très "généraliste"
J'entend par là que, lorsqu'on définit une propriété propre à une balise, un élément, TOUS les éléments de la page sont affectés.
Par exemple, dans un tableau à 4 colonnes, si je souhaite que la 1° colonne soit ce,ntrée et en gras, cette rpopriété sera affectée à toutes les balises TD

Comment faire pour que la 1° soit centrée, rouge et la seconde à droite, brune.

Je ne cherche pas à résoudre mon micro-problème mais à saisir l'esprit de CSS qui est , certes, de séparer la forme du fond, mais comment "personnaliser" les propriétés

Je ne suis pas certain d'être clair...

Merci
Salut,

Bienvenue au club. Ce que tu dis est pargaitement juste.
Dans leur grande magnificence, les concepteurs des spécifications et aussi les éditeurs de navigateurs ont créé les classes que l'on peut spécifier à une balise pour la modifier, sans modifier la spécification générale et applicable à toutes les balises qui présenteront ces caractéristiques.
Toujour en verve, les mêmes on créé les id qui permettent de spécifier pour un élément unique des caractéristiques particulières.

Pour les utiliser, voir la FAQ du forum et plein de jolis bouquins qui sont dans le bandeau ou Google qui est ton ami.
Bonjour,

Voici quelques pistes pour créer des propriétés CSS personnalisées. De façon générale, comme l'a indiqué papyjo, on utilise des id (#id uniques) et des classes (.class) afin d'appliquer un style à un élément en particulier dans une page.

Ce billet du blog Alsacréations expose les différences en classes et id :
Quelle est la différence entre une classe et un id ?

Prenons l'exemple simpliste suivant :


p .bleu {
   color: blue;
}
p .italique {
   font-style: italic;
}


Il est alors possible d'appliquer, au cas par cas, ces classes sur des paragraphes afin d'en rendre le texte bleu, en italique, ou les deux de la façon suivante :


<p class="bleu">...</p>
<p class="italique">...</p>
<p class="bleu italique">...</p>


Par ailleurs, les ouvrages sont effectivement un très bon moyen d'appréhender les feuilles de style.
Modifié par Romain H. (19 Feb 2006 - 10:28)
Re bonjour,
merci à vous deux pour ces conseils pleins de pertinence

Si je peux résumer :

Les feuilles de style sont généralistes, les classes sont spécifiques, et les "éléments" (les premiers outils que je commencent à savoir manipuler) sont encore + spécifiques

Voila une bonne chose de comprise


Au boulooooot !!!
Pas tout à fait

dans une feuille de style

les éléments sont généralistes

p {
propriété:valeur(s);
}


signifie tous les p du document.

Les classes permettent de particulariser une collection particulière

p.cette_classe {
propriété:valeur(s);
}


concerne la collection des p regroupés par la classe cette_classe. ce qui s'obtient en précisant dans le code html

<p class="cette_classe"> ... </p>


pour chaque p que l'on souhaite voir rejoindre ladite collection.

Les identifiants particularisent au maximum puisqu'ils ne concernent qu'une seule occurence d'un élément.

p#ce_p_et_aucun_autre {
propriété:valeur(s);
}

ne concernera qu'une seule occurence de l'élément p. Celle identifiée comme suit dans le document html :

<p id="ce_p_et_aucun_autre"> ... </p>
Romain H. a écrit :


p .bleu {
   color: blue;
}
p .italique {
   font-style: italic;
}




p.bleu {
   color: blue;
}
p.italique {
   font-style: italic;
}


A corriger comme je l'ai fait, sans espace entre le "p" et le nom de la class.

Par ailleurs, il n'est pas recommandé de choisir ses noms de class en fonction du rendu. Il est préférable de les choisir en fonction de ce que ça représente.

Par exemple <balise class="prenom"> à la place de <balise class="italique">
Bonjour,

Je voudrais attirer l'attention des contributeurs sur un point :
Quand un novice est un peu consciencieux, il essaie de trouver des réponses aux questions qu'il se pose dans les FAQ et les autres posts (importance d'avoir un titre de post "parlant") mais, souvent, il ne trouve pas la réponse, ou elle est formulée sous une forme qui empêche sa compréhension (à chacun sa manière de comprendre)

Les contributeurs, le plus souvent, utilisent une manière de jargon (un jargon professionnel) qui gêne, voire empêche la compréhension du novice.

Alors, une prière : pouvez-vous parler (écrire) simple, avec des mots simples.
Par exemple, écrire "qu'une seule occurence " ça met le Huron dans l'embarras.... c'est quoi une occurrence ?
Le Huron qui a initié ce fil, il sort de sa caverne, comme les autres hurons !!!
Et une Id (unique, en plus) c'est quoi... en plus c'est pas dans le Larousse (mais ce huron-là sait que c'est un paramètre qui identifie quelque chose)... la manie anglo-saxonne des acronymes.
Exemple : je met ma CS, ça va bien à mon CC (je met ma Culotte en Soie, ça va bien à mon Corps Cambré)

Les contributeurs ont le devoir de tenter d'être simples (quand c'est possible)
Le Huron a le devoir de faire des efforts pour comprendre, par exemple ouvrir le Larousse pour comprendre qu'une occurrence c'est une apparition, une circonstance et que, dans le contexte, ça signifie ICI, cette fois

Merci à tous, avec cordialité
Salut,

si certes ta demande est légitime, il ne faut pas non plus pousser le bouchon trop loin.

Occurence -> tu regardes le dico, tu semblais pourtant avoir le reflexe pour le reste. On ne va pas parler en SMS-Like version collégien attardé, ce n'est pas un mot tellement évolué non plus...

Les termes techniques style "id", "class" etc, tu n'y échaperas pas, c'est comme ça. Tu utilises un langage technique, il y a des termes techniques, on ne va pas réinventer des mots à chaque fois non plus.

a écrit :

utilisent une manière de jargon (un jargon professionnel)

Oui, mais non, c'est un jargon, pas professionnel, mais technique. Cf ce que je dis au dessus.

Donc, si certe ta demande parait légitime, un effort de simplicité s'impose parfois, il ne faut pas non plus aller trop loin.

Les explications données ont été détaillées.
Si tu ne comprend pas parcequ'il te manque une base quelconque, explique nous où tu en es qu'on reprenne calmement du début.
Encore bonjour,

Ce que j'écris, mes questions niaises, ne sont pas destinées à mon usage personnel.
J'ai suffisamment de bouteille pour résoudre mes problèmes pratiquement seul (je n'attaque jamais une question trop ardue pour être au-dessus de mes moyens)

Simplement, j'imaginais que les réponses pouvaient être utiles à des visiteurs ultérieurs.
J'essayais de faire avancer le schmilblick

Mais je sais aussi me taire.

La preuve
veevee a écrit :
Le Huron qui a initié ce fil, il sort de sa caverne, comme les autres hurons !!!

Le Huron de Voltaire me semblait pourtant bien débrouillard. Et ne sortait pas d'une caverne (où il fait humide, ce qui n'est pas cool). Cf. L'Ingénu.

Littérature inside Smiley smile
Modifié par mpop (19 Feb 2006 - 15:52)
veevee a écrit :
Encore bonjour,

Ce que j'écris, mes questions niaises, ne sont pas destinées à mon usage personnel.
J'ai suffisamment de bouteille pour résoudre mes problèmes pratiquement seul (je n'attaque jamais une question trop ardue pour être au-dessus de mes moyens)

Simplement, j'imaginais que les réponses pouvaient être utiles à des visiteurs ultérieurs.
J'essayais de faire avancer le schmilblick

Mais je sais aussi me taire.

La preuve


Si tu souhaites apporter quelque chose pour les autres, tu peux aussi te tourner vers la rédaction de tutoriels, par exemple très ciblé débutant qui n'y connait rien. Les portes d'alsacréations sont ouvertes.

Mais sur le fond, le ton technique présent ici ne changera pas, c'est nécessaire de s'y mettre de toute façon.
Bonjour à tous,
je tombe par hasard sur cette page et ça m'inspire le commentaire :
quand j'ai commencé à essayer la programmation, pour les boucles, on parlait d'incrémentation ?????. dans la boucle.
C'était pas évident jusqu'a ce qu'on m'explique que comme dans la mécanique, l'incrémentation correspondait au pas d'un filetage.

C'est le gros problème pour toutes les vulgarisations, c'est plus le vocabulaire utilisé qui pose problème, surtout passé 65 ans.

Mais en contrepartie, on a le temps et les insomnies pour nous
Salut veevee, écoute, toi et moi l'on est exactement pareils, à une semaine près. Je m'explique.

Pour comprendre la structure du CSS et me la représenter j'ai procéder de la manière suivante:

Survoler des sites comme celui-ci (Alsacréation) et comme www.pompage.net/ afin d'être bien convaincu que le CSS était l'outil de conception dont j'avais besoin.

Ensuite (et c'est la que cela demande de la concentration) j'ai essayé de décortiquer les expemples de mise en page, de comprendre quels éléments sont solicités et à quel moment.

En parallèle j'ai tenté de construire mon site en utilisant comme colonne vertébrale l'un de ces
gabarits. J'ai cherché à lui donné l'apparence et le type de navigation que j'avais en tête et, quand je buttais sur un problème, je "postais" sur ce forum.

En plus d'une aide directement liée à mon problème on me conseilla de parcourir la FAQ et de fils en aiguille je cerne de mieux en mieux tous les termes et toutes les subtilités du language.

J'ai depuis quelques jours mis la main sur "CSS en Action" et pus feuilleter "CSS 2 Partique du design web" qui analysent des problèmatiques bien spécifiques liées à la mise en page, aux menus, à l'héritage des propriétés etc etc...

Ce procéssus autodidactique est ce qui a éveillé ma passion pour la conception intéligente de pages web et j'en apprends tout les jours.

Essaye de résoudre chacune de te question en modifiant quelques valeurs et quelques lignes dans ton CSS et observe les changements dans plusieurs navigateurs. Imagine-toi ta page comme une serie de poupées russes infinie, dessines ton projet sur papier et définis tes blocs principaux, ta mise en page. Dis toi que pour chaque blocs il est possible d'être à chaque fois plus spécifique. A titre d'expemples simple voici une partie de mon code
#gauche {
	
	padding-top: 10px ;
	line-height: 25px ;
	float: left;
	margin-left: 0px;
	width: 130px;
	top: 104px;
	height: 450px;
	
}


#gauche a {


margin-left: 0px;
font-size: 1.2em ;
margin: 0 2px;
color: #E6D799;
text-decoration: none;
}
#gauche a:hover {


color: #FFFFFF;
text-decoration: none;
}


Ce n'est sûrement pas une référence en la matière mais l'on peut déja constater que l'élément #gauche revient plusieurs fois:
une fois pour l'enveloppe générale (taille, emplacement, couleur de fond etc...)

Une deuxième fois mais agrémentée de la lettre "a" qui signifique que tu précise les liens dans ton bloc #gauche (couleur, alignement etc...)

et une troisième fois pour spécifier grâce à "hover" l'état (couleur, style etc...) du lien quand on passe dessus.

Tu pourrais bien sûr développer le bloc #gauche encore plus précisément, en spécifiant par exemple l'état d'un paragraphe avec
 #gauche p

c'est pratiquement infinit

C'est un maigre exemple sûrment pas des plus éfficace mais dis toi que je n'ai commencé vraiment à avoir le nez dedans il y a 2 semaines.
(et je n'ai pas vraiment de temps à lui concacrer, j'ai un dipôme d'architecture d'interieur à faire...)

voilà, bonne chance'

ps: merci de me reprendre si j'ai été incorect ou imprécis sur certains points .
Modifié par kutone (25 Feb 2006 - 13:58)
Sujet clos
Aller à