Le Langage CSS N'est Autre Que Des Feuilles de Style en Cascade, Il Décrit La Forme Et Non Le Fond de La

Programmation Web1 Chapitre 4
CSS3
CSS ou « Cascading Style Sheets » est un langage utilisé pour décrire la présentation d'un document en
html.
Le CSS améliore la présentation et la mise en page en décrivant les couleurs, la police, les couleurs et
images de fond, le remplissage, les marges, les bordures ...
Le langage CSS n'est autre que des feuilles de style en cascade, il décrit la forme et non le fond de la
page.
Les feuilles de style permettent notamment :
 d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même
définition de style ;
 de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques
lignes ;
 une plus grande lisibilité du HTML, car les styles sont définis à part ;
 des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
 un positionnement plus rigoureux des éléments.
L’APPLICATION DE CSS À UN DOCUMENT HTML :

Pour la mise en forme d’un document HTML, on peut trouver plusieurs possibilités.
1. feuille de style externe
2. Style CSS intégré dans la page
3. Style CSS intégré dans la balise
1. feuille de style externe

Il est recommandé de faire un lien vers une feuille de style externe (un fichier à part) et le placer dans la
balise< head>.
Une feuille de style externe est un fichier texte ayant l'extension « .css ».
Si les règles ne sont pas stockées dans une feuille de style externe, on rencontrera d’énormes difficultés
en cas de modification de ces mêmes règles.
<head>
<link rel="stylesheet" type="text/css" href="ma_feuille_de_style.css" />
</head>
 La balise <link> avertit le navigateur qu'il faudra réaliser un lien.

 L'attribut rel="stylesheet" précise qu'il y trouvera une feuille de style externe.
 L'attribut type="text/css" précise que l'information est du texte et du genre cascading
style sheets (css).
 L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à
lier.
2. Style CSS intégré dans la page
Il s’agit d’inclure le code CSS avec la balise HTML <style> dans l’entête de la page <head>
<html>
<head>
<title>Exemple</title>
<style type="text/css">
body {background-color: #0000ff;}
</style>
</head>
<body>
<p>Cette page a le fond bleu</p>
</body>
</html>
3. Style CSS intégré dans la balise
Il s’agit d’utiliser l’attribut style et l’appliquer sur une balise HTML et ajouter le code CSS entre les " "
<html>
<head>
<title>Exemple</title>
</head>
<body style="background-color: #0000ff;">
<p style="background-color: #0000ff ,>Cette page a le fond
bleu</p>
</body>
</htm</html>
4. Cascading Ordre
D'une manière générale, tous les styles seront "cascade" dans une nouvelle feuille de style "virtuel" par
les règles suivantes, où le numéro un a la plus haute priorité:
1) style de ligne (dans un élément HTML)
2) feuilles de style externes et internes (dans la section de la tête)
3) Navigateur par défaut
Donc, un style en ligne (dans un élément HTML spécifique) a la plus haute priorité, ce qui signifie qu'il
va remplacer un style défini dans la balise <head>, ou dans une feuille de style externe, ou une valeur
navigateur par défaut.
I. LE SYNTAXE CSS
Une règle CSS se compose d'un sélecteur et un bloc de déclaration:
Les sélecteurs sont les éléments HTML à appliquer le style.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.
Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.
Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés par
des accolades.
Exemple:
p{
color: red;
text-align: center;
}
1. Les sélecteurs CSS

Les sélecteurs CSS sont utilisés pour «trouver» (ou sélectionner) les éléments HTML en fonction de leur
nom d'élément, id, classe, attribut, et plus encore.
1.1. Le sélecteur de style
Le sélecteur de style sélectionne des éléments basés sur le nom de l'élément.
Sélectionner tous les éléments <p>les centrer, colorer le texte en bleu
p{
text-align: center;
color: blue;
}
1.2. Le sélecteur d’identifiant

Utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
L'identifiant d'un élément doit être unique dans une page, de sorte que le sélecteur de id sélectionne un
élément unique.
Pour sélectionner un élément avec un id spécifique, écrire un dièse (#), suivi par l'identifiant de l'élément.
<p id="para1"> c’est correct, mais si on le rencontre dans la même page :
<h1 id="para1"> ce n'est plus correct !
#para1 {
text-align: center;
color: red;
}
Cette règle centre le texte et le colore en rouge de n'importe quel élément qui porte un attribut id ayant
comme valeur para1.
1.3. Le sélecteur de classe

Ce sélecteur permet d'appliquer des styles à tous les éléments marqués d'une classe, peu importe le type
d'élément à l'aide l'attribut class
Pour sélectionner des éléments avec une classe spécifique, écrire une période de caractères (.), Suivi du
nom de la classe.
Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" sera rouge et aligné au centre:
<p class="center ">texte </p>
.center {
text-align: center;
color: red;
}
On peut spécifier quelques éléments HTML spécifiques affectés par une classe.
Exemple : seulement <p> éléments avec class = "center" sera aligné au centre:
p.center {
text-align: center;
color: red;
}
Les éléments HTML peuvent également se référer à plus d'une classe.

l'élément <p> sera stylé selon la class = "center" et class = "large":
<p class="center large">texte .</p>
Les balises génériques :
Pour définir un style applicable seulement à une partie de la page et non plus à une balise
<HTML>
précise, vous pouvez placer un attribut style dans une balise <DIV> ou <SPAN>.
Ces balises définissent une zone de texte donnée, donc tout ce qui se trouve entre la balise de début
et la balise de
fin adopte le style défini.
 L'élément HTML <div> (qui signifie division du document) est un conteneur générique qui
permet
d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper
d'autres éléments pour leur appliquer un style (en utilisant les attributs class ou id). C’est une balise
de type block.
Comme <p>,<h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement
un
retour à la ligne.
<div>Salut</div>
<div>Ceci est une division</div>
 L'élément HTML <span> est un conteneur générique en ligne (inline) pour les contenus phrasés.
Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en
forme
(grâce aux attributs class ou id et aux règles CSS). C’est une balise de type inline, c'est une balise qui
se met
à l'intérieur d'un paragraphe
<span>Salut</span>
<span>Ceci est un conteneur générique</span>
Exemple :
Code CSS :
Code HTML:
.nom {
<p>Comme l'a dit <span
class="nom">Neil color:blue;
Armstrong</span>un certain
}
20 juillet 1969...</p>
1.4. Regroupement de sélecteurs

Il est préférable de regrouper les éléments avec les mêmes définitions par des sélecteurs de groupe et
séparer chaque sélecteur par une virgule.
h1, h2, p {
text-align: center;
color: red;}
2. Les Commentaires
Un commentaire CSS est utilisé pour expliquer le code, il est ignoré par les navigateurs.
Il commence par / * et se termine par * /. Les commentaires peuvent également étendre sur plusieurs
lignes:
p{
color: red;
/* ceci est un commentaire sur une ligne */
text-align: center;
}
/* ce ci
est un commentaire
mutiligne */
II. FORMATTAGE DE TEXTE

1. color
La propriété color modifie la couleur du texte en faisant appel à divers systèmes de notation :
hexadécimale, rouge-vert-bleu, teinte-saturation-lumière
p{
color: green; /* C'est vert avec le mot clé "green" */
color: #008000; /* C'est vert avec la notation hexadécimale */
color: rgb(0,128,0); /* C'est vert avec la notation RGB */
color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
}
2. Mise en forme du texte
2.1. font-family
font-family définit une liste de polices dans lesquelles le texte peut apparaître.
La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas
trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune
police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Voici un exemple :
<p class="arial">texte.</p>
.arial {
font-family:"Times New Roman", Times, arial;
}
2.2. font-size
La propriété font-size ajuste la taille du texte, en utilisant une de ces unités :
 px :L'unité px détermine la hauteur en pixels de votre texte.
 em : em spécifie la largeur de la lettre "M" avec la police utilisée. Ainsi, en indiquant une taille de
police de 1.5em, on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément
parent. Si l'élément parent n'a pas de taille absolue, 1em vaut par défaut 16px.
 rem : facile à utiliser comme unité qu'em car la taille du texte dépend de la taille initiale du texte,
au lieu de dépendre de l'héritage d'un quelconque élement parent.
 pt : pt est l'abréviation de point, une unité typographique très courante dans le monde de
l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est
donc préférable d'éviter cette unité.
.em {
font-size:0.8em
}
2.3. font-weight
définit l'épaisseur des caractères, généralement à l'aide des valeurs normales ou bold.
Valeurs possibles :
lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder
.bold {
font-weight: bold; }
2.4. font-style
La propriété font-style détermine si le texte doit être affiché normalement, en italique ou en oblique
Valeurs possibles :
normal, italic, et oblique
.italic {
font-style: italic;}
2.5. line-height
La propriété line-height définit la hauteur de la ligne en utilisant les mêmes unités que la propriété
font-size.
.line {
line-height:80%;}
On peut appliquer les propriétés font-style, font-weight, font-size, line-height, et font-family à l'aide d'une
seule propriété « parente » : font
Les deux exemples suivants afficheront donc exactement la même chose :

body { body {
font: bold 1em/150% Helvetica, font-weight: bold;
Arial, sans-serif; font-size:1em;
} line-height:150%;
font-family: Helvetica, Arial,
sans-serif;}
2.6. text-transform
La propriété text-transform modifie la casse du texte , elle permet d'afficher du texte en MAJUSCULES,
minuscules ou en Capitales)
valeurs possibles
 capitalize, premiére lettre du texte en majuscule,
 uppercase, texte en majuscule
 lowercase, texte en minuscule,
 none, texte normal.
 inherit hérite de son parent
.transform {
text-transform: uppercase; }
2.7. text-align
La propriété text-align contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou
centré ou justifié
Valeurs possibles :
left, right, center, ou justified
.center {
text-align: center;
}
2.8. text-decoration
La propriété text-decoration permet de faire apparaitre une ligne en dessous, au dessus, ou à travers de
votre texte. La valeur par défaut none supprime tout formatage.
valeurs possibles :
 underline (souligné),
 overline (ligne au dessus),
 line-throught (barré)
 blink (clignotant),
 none (aucun)
.strike {
text-decoration: line-through;}
2.9. text-shadow
La propriété text-shadow fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre
paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée.
On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules.
<p class="simple">COUCOU</p>
.simple {
text-shadow:2px 3px 5px rgba(0,0,0,0.3);
}
3. style de bordure
La propriété border-style spécifie quel type de frontière à afficher.
Les valeurs suivantes sont autorisées:
 dotted - Définit une bordure en pointillés
 dashed - Définit une bordure en pointillés
 solid - Définit une bordure solide
 double - Définit une bordure double
 groove- Définit une bordure rainurée 3D. L'effet dépend de la valeur border-color
 ridge- Définit une bordure striée 3D. L'effet dépend de la valeur border-color
 inset- Définit une bordure en médaillo n 3D. L'effet dépend de la valeur border-color
 outset- Définit une frontière de départ 3D. L'effet dépend de la valeur border-color
 none - Définit pas de frontière
 hidden - Définit une bordure cachée
La propriété border-style peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite,
bordure inférieure, et la frontière gauche).
3.1. Largeur de la bordure

La propriété border-width spécifie la largeur des quatre frontières.
La largeur peut être définie comme une taille spécifique (en px, pt, cm, em, etc) ou en utilisant l'une des
trois valeurs prédéfinies: thin, medium ou thick.
La propriété border-width peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite,
p.one {
border-style: solid;
border-width: 5px;
}
3.2. Couleur de la bordure

La propriété border-color est utilisée pour définir la couleur des quatre frontières.
La couleur peut être définie par:
 nom - spécifier un nom de couleur, comme "rouge"

 Hex - spécifier une valeur hexadécimale, comme "# FF0000"
 RGB - spécifier une valeur RGB, comme "rgb (255,0,0)"
 transparent
La propriété border-color peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite,
Si border-color non défini, il hérite de la couleur de l'élément.
p.one { border-style: solid; border-color: red;}
4. Les arrières plan et images d'arrière plan en CSS

4.1. Les couleurs d'arrière plan
La couleur d'arrière plan peut être exprimée en texte (Anglais) ou en hexadécimale comme la couleur du
texte,
Exemple:
.fond-bleu{
background-color: #ebf6f9;
}
4.2. Les images d'arrière plan
 background-image: url(….image.png); /* url de l'image */
 background-repeat: no-repeat; /* Ne pas répéter l'image sur X et Y*/
Par défaut, une image se répéte sur x et y, donc on doit compléter, le "background-repeat" pour agir sur la
répétition.
Valeurs possibles :
 repeat: l'arrière plan ou fond se répète, valeur par défaut.
 repeat-x : l'arrière plan ou fond se répète horizontalement.
 repeat-y : l'arrière plan ou fond se répète verticalement.
 no-repeat : l'arrière plan ou fond ne se répète pas.
 inherit : l'arrière plan ou fond hérite des propriétés de son parent
 background-attachment permet de fixer l'image d'arrière plan (image de fond) lorsque l'on
utilise les barres de défilement.
Valeurs possibles :
 fixed, l'arrière plan ou fond reste en place quand on scrolle.

 scroll, l'arrière plan ou fond se déplace quand on scroll qui est la valeur par défaut.
 inherit, l'arrière plan ou fond hérite des propriétés de son parent (CSS 2).
 local, l'arrière plan ou fond ne se déplace pas quand l'élément qui la contient scroll, mais avec le
défilant de son contenu (CSS 3).
 Valeur, Valeur, accepte plusieurs valeurs citées ci-dessus séparées pour une virgule pour les images
de fond multiples (CSS 3)
 background-position
 Alignement horizontal
correspond à l'alignement horizontal de l'image
Valaurs possibles :
left, center, right ou une valeur exprimée en px, pt, in, cm, mm, pc, em, ex %
 Alignement vertical
center correspond à l'alignement vertical de l'image
Valaurs possibles :
top, center, bottom ou une valeur qui peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Le Langage CSS N'est Autre Que Des Feuilles de Style en Cascade, Il Décrit La Forme Et Non Le Fond de La

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

Le Langage CSS N'est Autre Que Des Feuilles de Style en Cascade, Il Décrit La Forme Et Non Le Fond de La

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web1 Chapitre 4

L’APPLICATION DE CSS À UN DOCUMENT HTML :

1. feuille de style externe

 La balise <link> avertit le navigateur qu'il faudra réaliser un lien.

3. Style CSS intégré dans la balise

Les sélecteurs sont les éléments HTML à appliquer le style.

1. Les sélecteurs CSS

1.2. Le sélecteur d’identifiant

1.3. Le sélecteur de classe

<p class="center ">texte </p>

Les éléments HTML peuvent également se référer à plus d'une classe.

1.4. Regroupement de sélecteurs

II. FORMATTAGE DE TEXTE

Les deux exemples suivants afficheront donc exactement la même chose :

 inherit hérite de son parent

3.1. Largeur de la bordure

3.2. Couleur de la bordure

 nom - spécifier un nom de couleur, comme "rouge"

4. Les arrières plan et images d'arrière plan en CSS

 fixed, l'arrière plan ou fond reste en place quand on scrolle.

Vous aimerez peut-être aussi