Le CSS est un langage dédié à la mise en forme de document web. Il permet de **séparer le contenu et la mise en forme**. C'est un langage *déclaratif* dont les régles de syntaxe s'apprennent très vite, cependant, il nécessite une pratique assidue pour être parfaitement maîtrisé.
### Un langage interprété
Tout comme le HTML auquel il est fortement lié, le CSS est un **langage interprété**, c'est le **navigateur qui assure le rendu** et selon le système et/ou le navigateur, le résultat peu varier. Si le navigateur de *comprend pas* une régle ou une propriété CSS, il l'ignorera.
<divclass="info">
Le site [Can I Use](https://caniuse.com/) propose une liste exhaustive des technologies prises en charge en CSS/javascript pour s'assurer de la disponiblité de la technologie selon le navigateur et la version utilisée.
Cependant, les intégrateurs web s'autorisent un seuil de tolérance pour le cas (rare) des navigateurs anciens. Il applique la règle de la **dégradation disgracieuse** consistant à valider uniquement l'affichage acceptable des informations en fixant des limite de version.
</div>
### Compatibilité CSS2 /CSS3
Le **CSS2** et le **CSS3** sont parfaitement compatibles, en effet, le CSS3 se contente d'introduire uniquement de nouvelles propriétés dédiées à la mise en forme et quelques sélecteurs.
<!--  -->
## Syntax CSS
le langage CSS est uniquement composé de **régle CSS** qui vont indiquer au navigateur quelle mise en forme doit être appliquée à quel élément.
Ces régles se composent :
- D'un **sélecteur** qui va dire à quel(s) élément(s) appliquer la mise en forme
- Une ou plusieurs **déclarations** qui vont préciser comment mettre en forme
Une régle dira :
```plain
Pour les éléments ARTICLE (sélecteur):
Mettre le texte en blanc (déclaration)
Mettre le texte en justifié (déclaration)
Mettre la taille de la police à 18 pixel (déclaration)
Mettre le fond en noir (déclaration)
```
### Syntaxe des règles
Voici un exemple de règle CSS correspondant à celle rédigé littéralement
```css
article{
color:#FFFFFF;
text-align:justify;
font-size:18px;
background:#000000;
}
```
### Le sélecteur
<divclass="cols">
<divclass="col">
le sélécteur va permettre de *sélectionner* un ou plusieurs éléments sur lesquels vont s'appliquer la régle.
</div>
<divclass="col">
</div>
</div>
### Le bloc de déclaration
<divclass="cols">
<divclass="col">
Une régle peut contenir plusieurs déclarations, elles sont regrouper dans le **bloc de déclaration** qu'on peut facilement identifié car il est entouré d'accolade :
</div>
<divclass="col">
</div>
</div>
### Déclaration
<divclass="cols">
<divclass="col">
Une déclaration décrit une mise en forme à appliquer. Les déclarations sont séparées par des point-virgules. Par convention, on place une déclaration par ligne et l'on met un point-virgule à la dernière même si elle est facultative.
</div>
<divclass="col">
</div>
</div>
### Propriétés : Valeur
<divclass="cols">
<divclass="col">
Une déclaration se compose d'une **propriété** et d'une **valeur** séparées par **deux point**. Chaque déclaration se termine par **un point-virgule**. Une déclaration est toujours sous la forme `propriété: valeurs`
</div>
<divclass="col">
</div>
</div>
## Intégration CSS
Le code CSS est complémentaire au HTML. Pour qu'il soit pris en compte dans une page web, il faut **intégrer le CSS** au document HTML.
Il existe 3 méthodes :
- Le CSS en ligne avec l'attribut `style=""`
- Le CSS de document avec la balise `<style></style>`
- Le CSS attaché avec `<link href="" />`
### Style en ligne
Les styles en lignes permettent d'écrire les régles CSS **directement dans l'élément HTML** en utilisant l'attribut `style` :
```html
<pstyle="color: green">
Texte du paragraphe en vert.
</p>
```
<divclass="error">
Très mauvaise pratique !
</div>
### Style de document
La balise `style` permet de déclarer du style directement dans un document.
```html
<!DOCTYPE html>
<htmllang="fr">
<head>
<metacharset="UTF-8"/>
<title>Exemple de style en ligne</title>
<!-- Style de docuement -->
<style type="text/css">
p{
color:white;
background:black;
}
</style>
</head>
<body>
<h1>Les style CSS</h1>
<p>Mon premier paragraphe</p>
<p>Un autre paragraphe</p>
</body>
</html>
```
Cette utilisation est peu usité car les styles ne s'appliquent qu'au document courant.
### Feuille de style
Pratique la plus courante et la **plus recommandée**.
On commence par rédiger le CSS dans un fichier `*.css` séparé :
```css
/** Fichier feuille-de-style.css **/
p{
color:white;
background:black;
}
```
Puis on **attache** la feuille de style au document HTML en utilisant la balise `link` :
Cette usage permet de réutiliser la même feuille de style dans plusieurs documents sans surcoût réseaux. Il facilite également la maintenance visuel d'un site en centralisant les régles de mise en forme dans un unique fichier.
## Les sélecteurs CSS
Dans une **régle CSS**, le sélecteur permet au navigateur de déterminer à quels éléments HTML les déclarations s'appliquent.
Les **sélecteurs CSS** sont très variés, le principe reste simple, mais leur mise en oeuvre peut vite devenir compliquée si l'on manque de soin et de rigueur.
Voici quelques sélecteurs courants :
### Le sélecteur global
Un sélecteur d'une *grande subtilité*, car il sélectionne tous les éléments :
```css
*{
color:#ff6600;
}
```
Cela équivaut à faire sélectionner toutes les balises une par une.
#### Le piège
Malgrès son caractère séduisant pour un débutant, ce sélecteur peut vite vous faire tourner en bourique :
```css
*{
/** texte souligné **/
text-decoration:underline;
}
header{
/* Le texte de la balise HEADER
n'est pas souligné. */
text-decoration:none;
}
```
```html
<header>
<h1>Souligné :(</h1>
<p>Souligné aussi</p>
</header>
```
Dans cet exemple, on pourrait s'imaginer que le fait de supprimer le texte souligné du `header` s'appliquerait également aux éléments qui le compose (`h1` et `p`). mais l'utilisation du sélecteur globale équivaut à écrire cette règle :
```css
header,p,h1/* et toutes les autres balises */{
text-decoration:underline;
}
```
### Le sélecteur d'élément
Permet de sélectionner un élément via le **nom de balise** :
```css
/* Les paragraphes */
p{
font-size:16px;
color:#444444;
text-align:justify;
}
/* Les gros titres */
h1{
font-size:48px;
font-weight:normal;
color:#7700bb;
}
```
### Le sélecteur d'identifiant
Permet de sélectionner un élément via sont **Identifiant unique**.
On commence par utiliser l'attribut HTML `id=""` pour identifier un élément dans la page :
```html
<headerid="bandeau-du-site">
<h1>Mon site</h1>
<p>Un site bien classe (CSS)</p>
</header>
```
Puis on utilise le sélecteur d'identifiant (Oui, on peut l'appeler le sélecteur *hashtag* si ça vous fait plaisir), Il reprends l'identifiant précédé par un `#` :
```css
#bandeau-du-site{
background-image:url('http://goo.gl/GzaoyV');
color:#000000;
}
```
### Le sélecteur de classe
Ce sélecteur permet de définir des **classes CSS** puis de les appliquer à n'importe quel éléments du HTML.
On commence par **déclarer une classe CSS** :
```css
/* texte barré, rouge */
.erreur{
text-decoration:line-through;
color:#990000;
}
```
Puis dans le HTML, on utilise l'attribut `class=""` pour appliquer cette classe à l'élément :
```html
<article>
<h2>Titre</h2>
<pclass="erreur">Ce texte est érroné</p>
</article>
```
#### Plusieurs classes, un élément
Ce système permet également d'**appliquer plusieurs classe CSS à un même élément** HTML.
```css
.texte-barre{
text-decoration:line-through;
}
.texte-rouge{
color:#990000;
}
```
Puis en renseigne l'attribut `class=""` avec les classes CSS séparés par un espace :
```html
<article>
<h2>Titre</h2>
<pclass="texte-barre texte-rouge">Ce texte est en rouge et barré</p>
</article>
```
#### Plusieurs classes, un élément (oui c'est le même titre)
Autre cas plus subtile, on peut écrire un sélécteur qui va s'appliquer si un élément dispose de 2 classes. Commençons par créer 2 classes qui combinées vont poser problème :
```css
.texte-rouge{
color:red;
}
.fond-rouge{
background:red;
}
```
```html
<article>
<pclass="texte-rouge">texte en rouge</p>
<pclass="fond-rouge">fond en rouge</p>
<pclass="texte-rouge fond-rouge">texte en rouge</p>
</article>
```
Dans cet exemple, le dernier paragraphe a un problème car le texte et le fond sont rouge. On va donc ajouter une régle CSS pour ajouter un cas particulier pour les éléments qui ont les 2 classes :
```css
.texte-rouge.fond-rouge{
color:#330000;
}
```
Notez qu'il n'y a pas d'espace entre `.texte-rouge` et `.fond-rouge`.
### Regroupement de sélecteur
Si plusieurs éléments doivent avoir une même régle, on peut les cumuler dans une même déclaration en les séparant par une virgule (le petit espace est là juste pour des raisons de lisibilité):
```css
h1,h2,h3,h4,h5,h6,strong{
color:#ff6600;/* Orange */
}
```
Dans cet exemple, le regroupement utilise des sélecteurs d'éléments, mais rien n'empèche d'utiliser les autres sélecteurs vu précédement :
Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS
Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS
**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.
**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.
**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard
**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard
La production de contenu Web se professionnalise
La production de contenu Web se professionnalise
</div>
<divclass="col">
</div>
</div>
### 2000/2008 : Web 2.0
### 2000/2008 : Web 2.0
...
@@ -71,13 +95,23 @@ Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** d
...
@@ -71,13 +95,23 @@ Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** d
La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).
La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).
<divclass="info">
L'expression **Web 2.0** est un terme purement maketing, les technologies derrière cette pratique avaient déjà presque 10 ans.
</div>
### Maintenant
### Maintenant
**XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
<divclass="cols">
<divclass="col">
Le **XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
</div>
<divclass="col">
</div>
</div>
## Le World Wide Web
## Le World Wide Web
...
@@ -90,8 +124,20 @@ La transmission et l'accès aux contenus du web est déterminé par 3 choses :
...
@@ -90,8 +124,20 @@ La transmission et l'accès aux contenus du web est déterminé par 3 choses :
### Le navigateur
### Le navigateur
Le navigateur est un logiciel **client** qui va permettre de consulter des documents web. Nous reviendrons sur ce point, mais il faut retenir que le navigateur **interprète** le code source d'une page web avant de l'afficher, il peut donc arriver que le rendu d'un contenu varie entre 2 navigateurs.
