Fiche N°3 Rappels CSS3, Box Model Et Annexe

Module 2 : Systèmes, technologies et Internet
R
Fiche n°3 :CSS3
appels
C’est quoi le CSS ?
 Le CSS (Cascading Style Sheets) est un langage qui permet de styliser une page HTML à l’aide
d’une règle CSS composée d’un sélecteur, d’une propriété et d’une valeur.
 Syntaxe pour une règle CSS
C’est quoi un sélecteur ?

 Un sélecteur indique à quels éléments d'une page HTML on désire appliquer une règle, il permet de cibler les
éléments par leurs noms de balise, des « class », des « id » ou des attributs dans la page HTML.
 Chaque règle CSS commence nécessairement par un sélecteur.
 Il existe plusieurs autres méthodes pour identifier les éléments comme :
 Les pseudo-classes : ils permettent de cibler un élément qui n'est pas dans l'arborescence de la page HTML.
 Les pseudo-éléments : ils permettent de cibler une partie d'un élément présent dans l'arbre de la page.
Comment appliquer du CSS à une page HTML ?
 Inline : directement dans la balise html avec l’attribut style :
<body style="background-color:black;">
<h1 style="color:white; padding:30px;">Titre
</h1>
 Interne (Embedded) : directement dans le fichier html avec la balise <style> :
<head>
<style>
h1 {color:white; font-size: 10px;}
.centre {display: block; margin: 0 auto;}
</style>
</head>
 Externe (Linked) : dans un fichier .css externe lié via la balise <link> :
<head>
<link rel="stylesheet" href="fichier.css" />
</head>
Niveau : 4EME Sciences de l’informatique 1 Prof : H.Sghaier

Utilités des attributs id et class
 Les attributs HTML class et id sont des attributs dits globaux car on peut les ajouter dans la balise ouvrante de
n’importe quel élément HTML.
 Ces deux attributs vont être utilisés dans un but de mise en forme : ils nous servir à appliquer des styles CSS
aux éléments qui vont les contenir.
Comment Utiliser l’attribut « id » en HTML et CSS ?
 L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but
de cet attribut est de pouvoir identifier un élément qu’on souhaite le manipuler avec un script ou
qu'on le met en forme avec CSS.
 Pour cibler un id en particulier en CSS, on utilisera le symbole dièse (#) suivi de la valeur de l’id auquel
on souhaite lier des styles.
Exemple
HTML CSS
<!DOCTYPE html> #titre{
<html lang="en"> color: orange;
<head> border-style: dotted;
<link rel="stylesheet" }
href="style.css"> #para1{
</head> color: blue;
<body> color: black;
<h1 id="titre">Exemple Utilisation des box-shadow: aqua;
id</h1> }
<p id="para1"> Un premier paragraphe #para2{
</p> color: red;
<p id="para2"> Un autre paragraphe font-family: monospace;
avec un <a href="#">lien</a></p> font-size: large;
</body> }
</html> a{
font-size: 25px;
background-color: rgb(233, 227, 227);
}

Comment Utiliser l’attribut « class » en HTML et CSS ?
 L’intérêt de l’attribut universel class est qu’un même attribut va pouvoir être partagé par différents
éléments. Cela facilite grandement la gestion des styles de fichiers HTML et nous permet de gagner
beaucoup de temps.
 Pour cibler l’attribut class en particulier en CSS, on utilisera le symbole point (.)suivi de la valeur du
class
 On peut Spécifier un ou plusieurs noms de class d'un élément.
Exemple < span class = " gauche important " >
 Ce qui permet de combiner plusieurs class CSS pour un élément HTML.
Exemple
HTML CSS
<!DOCTYPE html> .gros{
<html lang="en"> font-size:24px;
<head> }
<link href="style.css" rel="stylesheet"> /*Texte en italique*/
</head> .italique{
<body> font-style:italic;
<h1 class="gros souligne orange">Un titre de }
niveau 1</h1> /*Crée un trait de
<p class="bleu">Un premier paragraphe</p> soulignement
<p>Un autre paragraphe avec un <a sous le texte*/
href="#">lien</a></p> .souligne{
<ul> text-decoration:underline;
<li>Elément de liste 1</li> }.orange{
<li class="souligne">Elément de liste 2</li> color:orange;
</ul> }
<h2 class="gros italique bleu souligne">Un .bleu{ color:blue; }
titre de niveau 2</h2>
</body>
</html>

Box Model en CSS
Les CSS définissent un modèle de boite (box model) standard pour tous les éléments HTML.
Avec:
Largeur totale= width+padding+margin

Hauteur totale=height+padding+margin
 Le contenu est caractérisé par sa hauteur (height)

et sa largeur (width).
 On distingue deux types de marges :
 Les marges intérieures « padding»
 Les marges extérieures « margin »
 Le padding et le margin sont séparés
par une bordure (border).
 Le padding est l’espace entre la bordure
est le contenu html réel de l’élément.
 Le margin est l‘espace entre la bordure
de l’élément et le reste de contenu du
page web.
 Chaque dimension (hauteur, largeur, marges) peut être traitée de manière indépendantes grâces aux mots
clés : top, right, bottom, left.
Exemple:
.box { margin-left: 1em;
margin-bottom: 1em;
border-right: 1em;
 On peut utiliser la forme courte pour définir les dimensions (margin et padding) en
respectant le sens de rotation horaire
Exemple
.box {margin-top:1em; .box {

margin-right:0;
margin:1em 0 2em 0.5em;

Annexe CSS3
Sélecteurs Propriétés des images
* Sélectionne tous les éléments. Définit des filtres sur un élément (blur() ;
filter
element1 Sélectionne tous les éléments de type element. grayscale() ; invert()).
Cible un élément en fonction de la valeur de son
#id Propriétés des tableaux
attribut id.
Définit la façon de disposer les cellules, lignes
Cible les éléments en fonction de la valeur de leur table-layout
.class et colonnes d’un tableau.
attributs class.
border-collapse Définit si les bordures des cellules sont
Cible tous les éléments de type element en fonction de
element.class fusionnées ou séparées (separate ; collapse).
la valeur de leur attributs class.
a:link Cible tous les liens non visités. Propriétés des boîtes
a:visited Cible tous liens visités. width Définit la largeur d'un élément.
Cible l’élément au moment où l’utilisateur le survole height Définit la hauteur d'un élément.
a:hover
avec le pointeur de la souris.
Spécifie le type de la méthode de
a:active Cible tous les liens activés. position positionnement utilisée pour un élément
1Il est possible de cibler plusieurs element de différents types en les séparant par des (absolute ; fixed ; relative ; static ; sticky).
virgules « , ». Propriété abrégée qui définit la marge intérieur
padding
d’un élément des 4 cotés.
margin Définit les marges d'un élément.
Propriétés de mise en forme du texte box-shadow Ajoute des ombres à la boîte d’un élément.
Spécifie les noms de polices possibles par ordre de Spécifie le comportement d'affichage d'un
font-family display
préférence. élément (inline ; block ; inline-block).
Spécifie la manière dont les caractères d’un texte Spécifie la position verticale, par rapport au
font-weight top
doivent être affichés (bold ; bolder ; lighter). haut, d'un élément positionné.
font-style Spécifie le style d'un texte (italic). Spécifie la position verticale, par rapport au
bottom
font-size Spécifie la taille d'une police. bas, d'un élément positionné.
Super-propriété de font. Combine font-family, font- Spécifie la position horizontale, par rapport à la
font left
weight, font-style, font-size. gauche, d'un élément positionné.
Spécifie l'alignement horizontal d’un texte (left ; Spécifie la position horizontale, par rapport à la
text-align right
center ; right ; justify). droite, d'un élément positionné.
text-shadow Définit une ombre au texte. Spécifie le comportement du contenu lorsque il
Spécifie la façon de transformer les caractères d’un overflow déborde de la boîte d'un élément (visible ;
text- hidden ; clip ; scroll ; auto).
texte en majuscules ou en minuscules (uppercase ;
transform
lowercase ; capitalize). opacity Définit le niveau de transparence.
color Spécifie la couleur du texte.
Propriétés des bordures
border-color Définit la couleur des bordures d'un élément.
Propriétés des listes border-style Définit le style des bordures d'un élément.
Définit le type de marqueur d’éléments de liste Définit le rayon des coins arrondis d’un
list-style-type border-radius
(circle; square ; upper-roman ; lower-alpha). élément.
Spécifie la position des marqueurs d'éléments Définit la largeur des bordures d'un élément
list-style-position border-width
d’une liste à puces (outside ; inside). (medium ; thin ; thick ; valeur en px).
Spécifie une image comme marqueur d'éléments Super-propriété de bordure. Combine border-
list-style-image
de liste. border color, border-style, border-width, border-
Super-propriété de liste. Combine list-style-type, Transformationradius.
list-style
list-style-position, list-style-image. Applique un effet de transformation 2D ou 3D
transform à un élément (rotate(), skew(), scale(),
translate()).
Propriétés de couleur et de fond
background-color Définit la couleur d'arrière-plan d'un élément.
Définit une image d'arrière-plan pour un Transition
background-image
élément.
Spécifie le délai nécessaire avant que la
Définit la façon dont une image d’arrière-plan est transition-delay
background-repeat transition commence.
répétée (repeat ; repeat-x ; repeat-y).
transition-duration Spécifie la durée de la transition.
background-size Spécifie la taille d’une image d'arrière-plan.
Spécifie les propriétés CSS sur lesquelles
transition-property
Super-propriété d’arrière-plan. Combine l'effet de transition sera appliqué.
background-color, background-image, Super-propriété de transition. Combine
background
background-repeat transition transition-property, transition-duration et
background-size. transition-delay.

Fiche N°3 Rappels CSS3, Box Model Et Annexe

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Fiche N°3 Rappels CSS3, Box Model Et Annexe

Transféré par

Droits d'auteur :

Formats disponibles

Module 2 : Systèmes, technologies et Internet

C’est quoi le CSS ?

C’est quoi un sélecteur ?

Comment appliquer du CSS à une page HTML ?

 Inline : directement dans la balise html avec l’attribut style :

 Interne (Embedded) : directement dans le fichier html avec la balise <style> :

Niveau : 4EME Sciences de l’informatique 1 Prof : H.Sghaier

Comment Utiliser l’attribut « id » en HTML et CSS ?

Niveau : 4EME Sciences de l’informatique 2 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 3 Prof : H.Sghaier

Largeur totale= width+padding+margin

 Le contenu est caractérisé par sa hauteur (height)

.box {margin-top:1em; .box {

Niveau : 4EME Sciences de l’informatique 4 Prof : H.Sghaier

Vous aimerez peut-être aussi