Feuille de style CSS
https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
Les feuilles de style en cascade, généralement appelées CSS (Cascading Style Sheets), forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Activité :
- Désactiver les feuilles de style de votre site web préféré, et observer la différence !
- Firefox : menu Affichage|Style de la page|Aucun style
- Opera : menu Afficher|Style|Mode utilisateur.
- Internet Explorer 6 : menu Outils|Options Internet… puis, sur l’onglet Général, cliquer sur Accessibilité… et cocher les trois cases de la section Mise en forme.
- Se rendre sur le site Zen Garden, et tester ses diverses apparences. Noter qu’il s’agit d’un seul et unique document HTML !!!
L’un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d’un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document.
Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l’architecture d’un document.
Ainsi, les avantages des feuilles de style sont multiples :
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés ;
- Les pages HTML d’une site web peuvent partager les mêmes feuilles de styles.
- Un même document peut donner le choix entre plusieurs feuilles de style, (exemple une pour l’impression et une pour la lecture à l’écran)
- Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balises ni d’attributs de présentation.
La documentation complète du langage CSS est disponible sur le site W3Schools.
On peut écrire du code en langage CSS à trois endroits différents :
- dans un fichier
.css(méthode la plus recommandée) ; - dans l’en-tête <head> du fichier HTML ;
- directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).
La feuille de style
On la place de préférence dans un fichier séparé du contenu HTML.
Une page HTML peut utiliser autant de feuille que l’on souhaite. La principale est souvent on appelée style.css .
<head> <link rel="stylesheet" href="style.css" /> </head>
Activité :
Dans un éditeur de texte à coloration syntaxique (Notepad ++ par exemple) :
- Ouvrir le CV au format HTML réalisé lors de l’activité sur le langage HTML (ou bien celui de Yann Bernard, merci à lui).
- Créer une feuille de style (un fichier
.css) destinée à mettre en forme ce CV.- Déclarer cette feuille dans le fichier HTML.
source : http://www.grappa.univ-lille3.fr/~torre/Enseignement/tp/CSS/
Application de styles
à une balise
Chaque balise HTML possède des propriétés de style pouvant prendre différentes valeurs :
/*
style.css
Zone de commentaires ...
*/
balise1
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
}
balise2
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
propriete4: valeur4;
}
Remarque : l’indentation n’est ici pas obligatoire, mais facilite la lecture du code … donc recommandée !
Par exemple, la balise <p>..</p> (paragraphe) possède une propriété color (couleur du texte) qui peut lui être attribuée dans la feuille de style :
p
{
color: red; /* on peut également spécifier la couleur au format hexadécimal : #ff0000 */
}
Ainsi, tous les textes encadrés par une balise <p>..</p> seront rouges.
Activité :
- En utilisant la documentation des propriétés CSS, tester les propriétés : background, box-shadow, width, font, … et d’autres …
- Appliquer des modifications de propriété à d’autres balises de la page : <h2>..</h2>, <h3>..</h3>, <ul>..</ul>, <li>..</li> , …
à plusieurs balises
Supposons que nous souhaitions colorer de la même manière tous les titres (<h2>..</h2> et <h3>..</h3>) de la page, on écrirait :
h2
{
color: blue;
}
h3
{
color: blue;
}
Le langage CSS prévoit un raccourci :
h2, h3
{
color: blue;
}
Ce qui n’empêche pas de spécifier un style spécifiquement pour un seul des titres :
h3 {
text-decoration: underline;
}
Lorsqu’on applique un style à une balise, tout ce qui est encadré par ce type de balise prendra ce style. On peut vouloir faire des exceptions.
Il existe deux possibilités pour distinguer des balises ; leur attribuer :
- une classe : attribut class= »nom_de_la_classe »
- un identifiant : attribut id= »nom_d_identifiant » (en principe unique)
à une classe
Pour attribuer à une balise une classe, on lui ajoute l’attribut class :
<div class="adresse"> Lycée Blaise Pascal <br> 36 av Carnot <br> 63037 CLERMONT FERRAND </div>
Remarque : plusieurs balises peuvent appartenir à la même classe.
Et on applique un style à une classe dans le code CSS :
.adresse
{
border-width:10px;
border-style:ridge;
}
Ainsi, seules les balises appartenant à la classe « adresse » auront ce style.
à un identifiant
Le principe est le même que pour les classes, hormis le fait qu’un identifiant doit être unique sur une page web.
<p id="age"> <em>25 ans</em> </p>
Le sélecteur CSS d’identifiant utilise la syntaxe suivante :
#age
{
box-shadow: 10px 10px 5px #888888;
}
Les sélecteurs avancés
* : sélecteur universel
*
{
}
Sélectionne toutes les balises sans exception. On l’appelle le sélecteur universel.
A B : une balise contenue dans une autre
h3 em
{
}
Sélectionne toutes les balises <em> situées à l’intérieur d’une balise <h3> .
A + B : une balise qui en suit une autre
h3 + p
{
}
Sélectionne la première balise <p> située après un titre <h3> .
A[attribut] : une balise qui possède un attribut
a[title]
{
}
Sélectionne tous les liens <a> qui possèdent un attribut title.
A[attribut= »Valeur »] : une balise, un attribut et une valeur exacte
a[title="Cliquez ici"]
{
}
Idem, mais l’attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
A[attribut*= »Valeur »] : une balise, un attribut et une valeur
a[title*="ici"]
{
}
Idem, l’attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
Activité :
- Finaliser la feuille de style pour l’ensemble du CV.
- Échanger cette feuille de style crée avec celle de votre voisin.
Concours de feuilles de style:
- Réaliser une feuille de style pour la page html de la caméra du lycée (sans modifier le code de la page html)
- Consignes pour le concours
Dépôt de fichier réponse
