Support de cours feuilles de style (CSS) créer une classe personnalisée, tutoriel & guide de travaux pratiques CSS en pdf.
Définition des règles CSS
IL Y A 4 TYPES DE REGLES
• Les sélecteurs html. Il est possible de redéfinir les balises html en CSS.
• Les classes. Il s’agit de règles librement choisies qu’on peut appliquer à n’importe quelle balise html.
• les pseudo-classes de lien.
• Les ID. À peu près le même principe que les classes, mais ne peuvent s’appliquer qu’une seule fois dans une page.
Toutes les règles ont la même structure :
Sélecteur (balise html, classe, pseudo-classe ou ID)
Propriétés qui identifient ce qui est défini.
Valeurs données à la propriété.
La paire propriété-valeur est appelée « définition »
selecteur { propriété : valeur ;}
h1 {
font-size: 11px;
}
OU PLACER LES REGLES CSS?
Il y a 3 façons d’insérer les CSS :
– dans une balise html dans le corps du document.
– dans l’en-tête du document (balise <head>).
– relié au document html à l’aide d’une balise <link ..> également dans l’en-tête.
Le navigateur lit la page, télécharge la feuille de style et l’utilise pour afficher le reste de la page.
Dans la balise html
<h1 style= »font-size: 15px; color: #555; »>Titre</h1>
Dans l’en-tête
<style type= »text/css »>
h1 {
font-size: 20px;
}
</style>
Dans un fichier externe relié au document :
<link rel= »stylesheet » type= »text/css » href= »style/style.css » />
rel= »stylesheet » dit que c’est un lien externe du type feuille de style type= »text/css ». Le » /> » est utilisé si vous choisissez le XHTML 1.0.
CREATION DE LA FEUILLE EXTERNE
À l’aide d’un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate, TextWrangler sur Mac), créer un fichier enregistré au format texte seul, portant l’extension .css.
Aucune balise html avec les signes < > ne doit figurer dans ce fichier !
Syntaxe des règles CSS
Contrairement au HTML qui n’était pas très standardisé, les CSS ne laissent pas de place aux erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html. Chaque règle doit contenir un sélecteur et une déclaration.
Les propriétés de la déclaration doivent êtres séparées par des points-virgules.
Lorsque la valeur d’une propriété est une unité de mesure et sa valeur, il ne doit pas y avoir
d’espace entre les deux :
ex:
font-size: 12px ;
font-family: Verdana, sans-serif;
Redéfinir une balise html :
body {
background: #fff;
font-family: Verdana, Times, sans-serif;
}
CASSE
Les CSS ne sont pas sensibles à la casse mais par convention, on met tout en minuscules.
Le W3C recommande en outre d’écrire les codes hexadécimaux en minuscules également.
Page 6/30
Cours CSS – v1.0
CREER UNE CLASSE PERSONNALISEE
Une classe personnalisée va être utilisée ponctuellement dans les pages du site. Le nom de la classe doit être précédé d’un point, ne doit pas commencer par un chiffre et ne doit contenir ni espaces, ni accent, ni caractère de ponctuation, ni tiret.
Exemple pour une classe qui met du texte en rouge sur un paragraphe :
CSS :
.txtrouge {
color: red;
}
HTML :
<p class= »txtrouge »> mon paragraphe en rouge</p>
La valeur de la propriété de couleur peut être un mot-clef (red, green, transparent, …), un code Hexadécimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex: color: rgb(255,125,32); ).
NOTE : L’indication hexadécimale d’une couleur peut parfois être raccourcie en regroupant par paire les lettres et chiffres. Ainsi, « #ff00ee » pourra s’écrire « #f0e ». Mais « #ff00de » ne pourra pas être raccourcie.
Les classes personnalisées peuvent s’appliquer à toutes les balises html.
Pour appliquer plusieurs classes à une même balise :
CSS :
.txtrouge {color: red;}
.italique {font-style:italic}
HTML :
<p class= »txtrouge italique »>mon paragraphe en rouge</p>
Les deux classes sont séparées par un espace, l’attribut « class » n’est indiqué qu’une seule fois.
COMMENTAIRES
/* Ceci est un commentaire de feuille de style */
Ils peuvent être multi-lignes
/*
Ceci est un commentaire de feuille de style
un commentaire sur plusieurs lignes
*/
Class et id
DIFFERENCE ENTRE CLASS ET ID
Ce sont tous les deux des sélecteurs qui permettent d’appliquer des règles à un élément.
« id » définit un élément de manière unique, alors que « class » peut être utilisé plusieurs fois dans la page.
Nous allons donc privilégier « id » pour les boîtes à positionner, car deux éléments ne devraient logiquement pas avoir la même position dans l’interface. De plus on peut ainsi donner des paramètres propres à chaque élément (typo, taille, couleur, positionnement, arrière-plan, bordure …) avec un seul id.
Il est possible de cumuler id et class. Alors l’id est plus fort que la classe en cas de conflit. De plus JavaScript peut manipuler les balises avec un id.
Rappelons pour terminer qu’au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom).
Exemple de CSS :
/* Définition des balises HTML */
body {
background-color: silver;
}
p {
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
/* Définition des ID */
#container {
width: 950px;
background-color: #fff;
margin: 0 auto;
}
/* Définition des classes */
.txtImportant {
color: red;
font-style: italic;
}
Cascade, conflits et héritages
Les ID l’emportent sur les « class ». Les « class » l’emportent sur les sélecteurs contextuels, pseudo-class et pseudo éléments. La feuille interne l’emporte sur la feuille externe si elle est placée après dans l’ordre du code. C’est toujours le dernier appelé qui l’emporte.
CONFLITS
p { color : red; }
p { color : green; }
c’est le vert qui l’emporte. Il écrase la valeur « red » précédemment définie.
HERITAGE
C’est le mécanisme par lequel les styles s’appliquent à un élément, mais aussi à ses descendants.
Structure d’une page html : en haut de la hiérarchie : le html qui contient body qui contient d’autres éléments.
HTML est l’ascendant de tout (aussi appelé élément racine). BODY est l’ascendant de tout ce que montre le navigateur.
Souvent les éléments héritent des propriétés de leur parent : la couleur d’arrière-plan du body sera la même pour toutes les couleurs d’arrière-plan de la page, par défaut. Quelques propriétés ne sont pas héritées, en général il s’agit de bon sens (comme border par exemple).
QU’EST-CE QUE LES CSS ?
VERSIONS DE CSS
QU’EST CE QU’UN STYLE ?
PROPRIETES DES CSS
DEFINITION DES REGLES CSS
IL Y A 4 TYPES DE REGLES
OU PLACER LES REGLES CSS?
CREATION DE LA FEUILLE EXTERNE
SYNTAXE DES REGLES CSS
CASSE
CREER UNE CLASSE PERSONNALISEE
COMMENTAIRES
CLASS ET ID
DIFFERENCE ENTRE CLASS ET ID
CASCADE, CONFLITS ET HERITAGES
CONFLITS
HERITAGE
UNITES DE LONGUEUR
UNITES DE LONGUEUR ABSOLUES – (A EVITER)
UNITES DE LONGUEUR RELATIVES – (RECOMMANDEES)
PROPRIETES
PROPRIETES DU TEXTE
PROPRIETES DES LISTES
LES RACCOURCIS
POUR LE TEXTE
POUR LES LARGEURS DE MARGES ET REMPLISSAGE
LES BORDURES
LES COULEURS
LES BOITES : REMPLISSAGE ET MARGES
LES MARGES
LE REMPLISSAGE (PADDING)
LES BOITES
DEFINITION
LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU
Notion de flux
Statique (par défaut)
Relatif (dans le flux) = position : relative
Absolu (hors du flux) = position : absolute
LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT
Comprendre le flottement
Faire des colonnes
Sortir du flottement = clear : left, right ou both
LA NOTION DE DEBORDEMENT : OVERFLOW
ARRIERE-PLAN : IMAGES
REPETITION
REPETITION HORIZONTALE
REPETITION VERTICALE
PAS DE REPETITION
REMPLACEMENT DE LA PUCE DE LISTE
PSEUDO CLASSES DE LIENS
« DECORATION » DU TEXTE
ELEMENTS DE TYPE : BLOCK
ELEMENTS DE TYPE : INLINE
ELEMENTS NON AFFICHES
AFFICHAGE DE TYPE TABLEAU
AUTRES TYPES D’AFFICHAGE
DISPLAY: INLINE-BLOCK
DISPLAY: LIST-ITEM
STYLES DIVERS
CURSEUR
UNE FEUILLE PAR MEDIA
LIENS
……….
Télécharger le cours complet
