Question sur les sélecteurs en html
rikrak -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention - 31 janv. 2024 à 17:47
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention - 31 janv. 2024 à 17:47
A voir également:
- Question sur les sélecteurs en html
- Editeur html - Télécharger - HTML
- Forum ing
- Forum HTML
- Html - Télécharger - HTML
- Forum ing
1 réponse
Salut
les sélecteurs Css sont assez simple a comprendre !
pour faire simple si tu veux donner la même valeur a plusieurs élément tu utilise les class
si tu ne veux le donner qu a un élément tu utilise les id qui sont toujours unique dans le html
voila un petit exemple vite fais j ai donne une class selecteur a plusieurs élément html a qui j ai mis la couleur de texte rose dans le Css !
et j ai mis a 3 id unique 1,2 et 3 dans le html aux quel j ai mis des couleurs différente dans le Css
je simplifie bien entendu car tout peux donner une même valeur a plusieurs id en le déclarant dans le css mais c est les bases !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Exemple : bloc central avec marges compensant les flottants
</title>
<style type="text/css">
html {
font-size: 100%;
} body {
padding: 1em;
font-size: .85em;
font-family: Verdana, 'Bitstream Vera Sans', 'Lucida Grande', sans-serif;
} h1 {
margin-top: 0;
text-align: center;
} ol, ul, li {
padding: 0;
margin: 1em;
} div#colonne1 {
float: left;
width: 160px;
padding: 1px 0;
} div#colonne2 {
float: right;
width: 300px;
padding: 1px 0;
}
div#centre {
padding: 1px 20px;
margin-left: 170px;
margin-right: 310px;
}
div.c1 {
color: #9a7;
margin-top: 50px;
}
/* les ligne de selecteur ajoute */
#unique1 {
color: #f30;
}
#unique2 {
color: #00c;
}
#unique3 {
color: #cf0;
}
.selecteur {
color: #f0f;
}
</style>
</head>
<body>
<h1 class="selecteur">
Exemple : bloc central avec marges compensant les flottants
</h1>
<div id="colonne1">
<h2 id="unique1">
Navigation
</h2>
<ul>
<li>
<a href="../../../index.html">Acceuil</a>
</li>
<li>
<a href="tuto.html"></a><a href="exemple-1.html" class="selecteur">Exemple : bloc central sans marges</a>
</li>
<li class="selecteur">
<strong>Exemple : bloc central avec marges compensant les flottants</strong>
</li>
<li>
<a href="exemple-3.html">Exemple : bloc central sans marges, mais avec un contexte de formatage</a>
</li>
</ul>
</div><!-- fin de div#colonne1 -->
<div id="colonne2" class="selecteur">
<h2 id="unique3">
Code CSS
</h2>
<pre>div#colonne1 {
float: left;
width: 160px;
background: lightblue;
}
div#colonne2 {
float: right;
width: 300px;
background: burlywood;
}
div#centre {
margin-left: 170px;
margin-right: 310px;
background: khaki;
}</pre>
</div><!-- fin de div#colonne2 -->
<div id="centre">
<h2>
Explications
</h2>
<ol>
<li>Les deux colonnes aux extrmits sont dotes de <strong>largeurs fixes</strong>, et sont <strong class=
"selecteur">flottantes</strong> gauche et droite. Par consquent, elles "flottent" <strong>par dessus</strong>
les autres blocs (et n'en repoussent que le texte ou les images et lments en-ligne), en l'occurence par dessus
notre colonne centrale.
</li>
<li>Ce conteneur central <strong>n'a pas de largeur fixe, et il n'est pas flottant</strong>. Il prend donc 100%
de la largeur disponible, soit <strong class="selecteur">toute la largeur</strong>, car les flottants ne sont
pas pris en compte.
</li>
<li>Enfin, pour viter que les limites (bordures, fond) du bloc conteneur central ne s'affichent par dessous les
flottants, on rajoute ce conteneur <strong>des marges gauche et droite</strong> correspondant la largeur de
chaque flottant (plus, accessoirement, un espace blanc).
</li>
</ol>
<p class="selecteur">
Et le tour est jou !
</p>
<div class="c1">
<h2 id="unique2">
Du texte de remplissage
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim
sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius
a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat. Duis semper.<span class="selecteur"> Duis arcu massa, scelerisque vitae, consequat in, pretium a,
enim.</span> Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.
Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris
ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
</p>
<p class="selecteur">
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla
sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros
vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus,
convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum
posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
</p>
</div>
</div><!-- fin de div#centre -->
</body>
</html>va voir des tuto commence par la
A+
