CSS
{ Les bases }
C'est quoi ?
CSS
Cascading Style Sheets
Feuilles de style en cascade en français.
SELECTEURS
et
DECLARATIONS
CSS
sélecteur simple
accolade ouvrante
propriété
valeur
déclaration css
EXEMPLE
accolade
fermante
p {
color: red;
}Les sélecteurs
selecteur {
declaration : CSS;
}Un sélecteur CSS permet de cibler un ou plusieurs éléments HTML afin de leur appliquer un style.
Par exemple, si l'ont souhaite appliquer un style particulier à tous les paragraphes de notre page, nous utiliserons le sélecteur p.
Les déclarations CSS
selecteur {
propriete : valeur;
}Une déclaration CSS est composé d'une propriété et d'une ou plusieurs valeurs.
La propriété va nous permettre d'identifier le changement se style que l'on veut opérer sur notre sélecteur.
Une ou plusieurs valeurs seront assignées à cette propriété selon nos besoins.
Où écrire le CSS ?
Ecrire le CSS dans un élément HTML style
<head>
<style>
p{
color: red;
}
</style>
</head>Problèmes:
1_ Le style ne s'applique qu'à cette page.
2_ Mauvaise maintenance liée à la présence de deux langages sur un même fichier.
3_ Trop peu lisible.
Ecrire directement le style dans la balise HTML
<p style="color:red">Je suis un paragraphe</p>Problèmes:
1_Le style ne s'applique qu'à l'élément.
2_ Mauvaise maintenance liée à la présence de deux langages sur un même fichier.
3_ Trop peu lisible.
La bonne méthode est d'écrire le css dans un fichier séparé.
Cette méthode va nous permettre une meilleure lisibilité et performance.
La grande force de cette méthode réside dans le fait que nous allons pouvoir lié un seul fichier CSS à plusieurs fichier HTML.
Ecrire le style dans un fichier séparé
1_ Créer un fichier CSS, le lier au fichier HTML.
2_ Créer un élément h1 et une liste ordonnée.
3_ Assigner au sélecteur h1 une couleur verte et une taille de 50px.
4_ Assigner au sélecteur ol une couleur rouge et le mettre en gras.
Exo
résultat
<link rel="stylesheet" href="style.css" /><h1>Mon titre</h1>
<ol>
<li>salade</li>
<li>tomates</li>
<li>oignons</li>
</ol>résultat
h1 {
color: green;
font-size: 50px;
}
ol {
color: red;
font-weight: bold;
}Les commentaires
EXEMPLE
/* je suis un commentaire */
/* je sui un
commentaire multi-lignes */Appliquer un style à différents types d’éléments
EXEMPLE
h1, p {
color: green;
font-size: 50px;
}Ajouter une virgule entre les sélecteurs va nous permettre de regrouper différents types d’éléments afin de leur appliquer le même style à tous d’un coup.
Les attributs
ID et CLASS
EXEMPLE
<p id="para1">je suis un paragraphe</p>
<p class="para1">je suis un 2ème paragraphe</p>Les attributs ID et CLASS vont nous permettre de cibler un élément HTML en particulier.
Nous allons ensuite cibler cet élément en CSS en réutilisant cette même valeur.
EXEMPLE
#para1 {
color: blue;
}
.para1 {
font-size: 45px;
}Nous appelons les sélecteurs ID avec le préfix ( # ).
Nous appelons les sélecteurs CLASS avec le préfix ( . ).
ID désigne un élément unique dans la page.
CLASS peut-être utilisé plusieurs fois.
L'attribut CLASS peut contenir plusieurs valeurs pour plusieurs éléments.
CLASS et ID : différences
EXEMPLE
<p id="para1" class="para1">je suis un paragraphe</p>
<p class="para1">je suis un 2ème paragraphe</p>
<p class="para1 jaune">je suis un 3ème paragraphe</p>#para1 {
text-align: center;
}
.para1 {
text-transform: uppercase;
}
.jaune {
background: yellow;
}1_ Créer un paragraphe.
2_ Créer un deuxième paragraphe, lui donner une CLASS, lui assigner une bordure de 4px d'épaisseur, en pointillé et bleu clair et assigner à ce même paragraphe, une opacité de 0.5.
3_ Assigner les valeurs de cette nouvelle CLASS au premier paragraphe.
4_ Le premier paragraphe est centré.
Exo
résultat
h1 {
color: green;
font-size: 50px;
}
ol {
color: red;
font-weight: bold;
}L'héritage
La notion d’héritage signifie que tout élément HTML enfant va hériter, « en cascades », des styles de ses parents.
C’est par ailleurs de là que vient le nom du CSS :
Cascading StyleSheets, ou Feuilles de Style en Cascades.
body {
color: red;
}
Si il y a un conflit, le style prioritaire va être le style le plus proche de l’élément.
p {
color: blue;
}
.para1 {
color: red;
}
Priorité et ordre en CSS
Les éléments de type
block et inline
-
Un élément de type block va toujours commencer sur une nouvelle ligne.
-
Il va prendre toute la largeur disponible dans notre page web.
-
Il peut contenir d’autres éléments de type block ainsi que des éléments de type inline.
Les éléments de type block
liste: h1,h2..., p, ol, ul, div...
-
Les éléments de type inline vont s’insérer dans la ligne actuelle.
-
Ils prennent uniquement la largeur de leur contenu.
Les éléments de type inline
liste: img, a, strong, span...
Les couleurs
-
Un nom de couleur : red ;
-
Une valeur hexadécimale: #AA8811 ;
-
Une valeur RGB ou RGBa: (25,45,123,0.5) ;
3 façons d'écrire les couleurs
body {
color: blue;
}
p {
color: #AA8811;
}
.para1 {
background-color: rgba(25, 50, 137, 0.6);
}
EXEMPLE
Les fonts
La propriété font-family va nous permettre de définir la police de notre texte.
les navigateurs ne supportent pas tous les mêmes polices.
Nous indiquerons toujours une police de substitution car le navigateur pourrait ne pas lire notre police principale.
Le navigateur va lire les font-family dans l’ordre et utiliser la première qu’il supporte.
La propriété font-family
p {
font-family: "Open Sans", sans-serif;
}
Font
souhaitée
Font de
substitution
famille générique de substitution
EXEMPLE
Web safe fonts et familles génériques
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"
rel="stylesheet"
/>
Intégration des Google Fonts
-
font-size pour modifier la taille de nos textes ;
-
font-style pour modifier le style de nos textes ;
-
font-weight pour modifier le poids de nos textes.
Les propriétés de type fonts
p {
font-size: 23px;
font-weight: bold;
font-style: italic;
}
Le background
body {
background: url("magnum.jpg") bottom right no-repeat / 20%
}
image
souhaitée
position sur axes X et Y
image non répétée
taille de
l'image
EXEMPLE