Déclaration du css avec un sélecteur (nom d'une balise):
Imaginons une page .html avec un titre
Dans mon fichier .css je souhaite que mon h1 soit blanc avec un fond gris
h1{
background-color : gray; //fond gris
color : white; // couleur texte blanc
}
// deux slash représente un commentaire sur une ligne
/* commentaire sur plusieurs lignes */
background-color : gray; //fond gris
color : white; // couleur texte blanc
}
// deux slash représente un commentaire sur une ligne
/* commentaire sur plusieurs lignes */
Déclaration du css avec plusieurs sélecteurs (nom d'une balise):
Imaginons que j'ai un titre h1, un titre h2 et un paragraphe. Je veux que monh1, h2 et mon paragraphe soient de la même couleur de texte et que mon h1 et h2 soient sur un fond noir.
le code html :
<html>
<head>
<title>titre onglet</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus.</p>
</body>
</html>
le code css :
h1, h2, p{
color : white;
}
h1,h2{
background-color: black;
}
On attribut à une div un id ou une class
id en CSS => (#) il est unique à chaque balise
class en CSS => un point (.) il peut être utilisé plusieurs fois dans des balises différente
Exemple :
le code html :
<html>
<head>
<title>titre onglet</title>
<meta charset="UTF-8"/>
</head>
<body>
<div class="centrage"><img src="img1.jpg"/></div>
<div class="centrage"><img src="img2.jpg"/></div>
<div id="boite">
<button class="bt">bouton1</button>
<button class="bt">bouton2</button>
<button id="btd">bouton3</button>
</div>
</body>
</html>
le code css :
img{
width:150px;
height:150px;
}
.centrage{
text-align: center;
}
#boite{
background-color : lightblue;
}
.bt, #btd{
background-color : blue;
color:white;
}
#btd{
background : gray;
}
resultat
cliquez sur l'image pour le voir en grand
Aucun commentaire:
Enregistrer un commentaire