Internet > Création web > Les CSS - 2 : Utilisation

Les feuilles de style - 2 : Utilisation

Page suivante :

 

Les feuilles de style :

Aussi appelées CSS (Cascading Style Sheets) 

L'utilisation des CSS est tellement pratique qu'elle est indispensable.
Cependant, elle est un peu difficile à expliquer..

 

 

Syntaxe - convention d'écriture :

 

Attention On ne peut pas donner le même nom à un lien et un style CSS :

Autrement dit : si un lien porte le même nom qu'un style CSS, il ne fonctionnera pas.
Eviter donc de donner des noms trop "communs" aux styles CSS (exemple : recherche, date, menu)

 

 

Sélecteur, propriété, valeur :

L'affichage d'un style se définit ainsi :

sélecteur {
propriété: valeur;
}

On peut également l'écrire sur une ligne :

sélecteur { propriété: valeur; }

 

Pour écrire un style, il faut respecter une syntaxe :

p nom du style / sélecteur  
{ ponctuation : parenthèse ouvrante touches Alt Gr et 5
font-family propriété du style ici : famille de police
: ponctuation : deux points  
Verdana valeur du style  
; ponctuation : point virgule  
} ponctuation : parenthèse fermante touches Alt Gr et +

 

On peut l'écrire de deux façons :

Sur une ligne :

p { font-family: Verdana; }

Sur plusieurs lignes :

p {
font-family: Verdana;
}

 

Les espaces :

Les espaces ne sont pas obligatoires.
Ils servent à assurer une meilleure lisibilité.
Ils sont supprimés et le css est écrit sur une seule ligne quand on veut optimiser la vitesse de chargement des pages (avec Page Speed : voir ma page)

 

 

Les sélecteurs de balise :

Le sélecteur est la première partie du style. Le nom, mais aussi les éléments auxquels il s'applique

Il existe :

Sélecteur multiple :

Sélecteurs séparés par une virgule.

Exemple :

html, body {height:100%;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}

Le style s'applique aux deux sélecteurs : html et body

 

Il existe des sélecteurs contextuels = une balise va se comporter en fonction des éléments qui l'entourent

Sélecteur d'éléments imbriqués :

Les sélecteurs se suivent, sans virgule. Le style concerne le dernier sélecteur.

Le style s'applique uniquement aux sélecteurs imbriqué dans un autre

Exemple :

.menu ul {padding:0;margin:0;list-style-type:none;}

Le style concerne uniquement la balise ul du style menu

 

C'est vite compliqué pour l'affichage de menus et sous menus :

Exemple :

.menu ul li:hover ul li ul {display:none;}

Un nombre bien important de sélecteurs qui m'est signalé par Page Speed : voir ma page)

Use efficient CSS selectors
Very inefficient rule

 

Voir ici :
Commentcamarche.net - La syntaxe des style (CSS)

 

balise a :

Les propriétés appliquées à la balise parent <a> se transmettent aux enfants.

En conséquence : dans a:hoover, inutile de répéter les propriétés de la balise a

 

L'Héritage par imbrication des Classes ou des Id

 

Ne pas confondre :

.menu li { propriétés } = <li> est enfant de la classe menu

li .menu { propriétés } = menu est enfant de la balise <li>

li,.menu { propriétés } = pas d'héritage, car il y a une virgule

li.menu { propriétés } = pas d'héritage, concerne les <li> de classe menu

 

 

Voir l'article très intéressant :
Alsactreations.com - Comprendre l'héritage et la parenté des styles CSS

 

 

Terminologie :

Une énumération des particularités et des erreurs et confusion à éviter sur cette page :

Pompage.net - Une terminologie de la conception web

Résumé :

Balises vs éléments :

- Le mot balise se réfère au segment de code HTML délimité par des chevrons (< et >)
exemple : <html>
La plupart des balises vont par paires, avec une « balise ouvrante » et une « balise fermante ».

- Un petit groupe d'éléments sont appelés "vides". Ce sont des entités individuelles qui n'entourent pas de contenu
exemple :
<img src="image.jpg" alt="" /> (élément image)
ou :
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> (méta-balise)
En XHTML et en XML : Ces balises sont terminées par un espace et une barre oblique avant le ">"

- un élément est *tout* ce qui apparaît entre une paire de balises ouvrante et fermante.
Ce qui veut dire qu'un ou plusieurs éléments peuvent être dans un autre élément. On appelle ce phénomène « imbrication », et l'élément imbriqué est appelé un « enfant » de l'élément « parent ».

Div vs Calques

- Un div est l'abréviation de division, et c'est un élément créé par le W3C pour servir d' « élément bloc » générique quand il n'est pas souhaitable d'utiliser un des éléments blocs plus anciens, comme <h1> ou <p>.

Les balises <p> ou <h...> indiquent la nature du contenu (paragraphe ou titre)
Mais leur affichage (dimension, marges, etc.) est souvent prédéterminé et différent selon le navigateur.
Ce qui justifie l'utilisation du <div>

En complément du <div>, il existe le <span>
Le <div> est un élément de type *bloc* (comme <p> ou <h...> = dans une page, les éléments bloc se suivent)
Le <span> est un élément de type *en-ligne* (inline) = imbriqué dans un élément bloc. exemple mot en rouge dans un paragraphe.

Classe vs ID

- Une classe est un groupe de style auquel on a donné un nom.
On peut l'utiliser autant de fois que l'on veut dans une page.

- Un ID doit être utilisé une seule fois dans une page.
"à cause d'un truc appelé le « DOM », ou « document object model ». Il est utilisé principalement par des scripts pour contrôler dynamiquement les éléments d'une page, et ces scripts sont très pointilleux, en particulier sur « l'identité » des éléments."
On utilise les ID pour concevoir l'architecture générale de la page : en-tête, menu, corps de page, bas, etc.

Attributs vs Propriétés

- Un attribut est placé directement dans une balise HTML ouvrante. Il affecte le contenu de l'élément que cette balise délimite.
Exemple :
<table bgcolor="#c0c0c0" width="300">
Remarquer : le signe "=" et les guillemets entourant la valeur

- Les propriétés CSS sont (généralement) utilisées dans une feuille de style.
Exemple :
{width : 300px ;}
Remarquer : les deux points, et le point-virgule pour terminer.

Le nom est parfois différent :
- L'attribut bgcolor est remplacé en CSS par la propriété background-color.
Exemple :
bgcolor="#c0c0c0" devient {background-color: #c0c0c0;} dans une feuille de style.

L'attribut Style

Ne pas confondre l'attribut 'classique" évoqué ci-dessus, avec l'attribut style

L'attribut style est fait pour appliquer un style à l'intérieur d'une balise.
Exemple :
style="width: 300px; background-color: #c0c0c0;"

 

Voir aussi sur la page Pompage.net - Une terminologie de la conception web

Feuilles de styles externes, intégrées, et en-ligne

XHTML1.0 vs HTML4.01

« Positionné »

« Conteneur »

« Hack CSS »

« Contournement »

 

 

Ordre et priorité :

CSS = Cascading Style Sheets = Feuilles de style en cascade

Les notions d'imbrication et d'héritage sont primordiales en matière de feuilles de style.
Il est donc essentiel de respect un ordre et une priorité pour la prise en compte et l'affichage des styles.

 

Style externe ou interne :

La première priorité se manifeste dans l'emplacement du style :

Par ordre d'importance croissante :

1 - affichage par défaut du navigateur (pas de style défini)
2 - feuille de style externe
3 - style contenu dans la partie head de la page web
4 - style contenu dans la partie body de la page web

On voit donc qu'un style intégré directement dans une page web est prioritaire sur un style défini dans une feuille de style externe.

 

Style selon le media :

On peut définir une feuille de style en fonction du media :

Respectivement : pour tous les médias (all), pour l'affichage (screen), pour l'impression (print).

<style type="text/css" media="all">
<style type="text/css" media="screen">
<style type="text/css" media="print">

 

Plusieurs feuilles de styles externes :

On peut utiliser plusieurs feuilles de style :
exemple : pour la présentation : styles.css ; pour les menus : menu.css

C'est plutôt déconseillé maintenant que le temps de chargement de la page est plus important.

 

Ordre à respecter à l'intérieur d'une feuille de style externe :

Dans une feuille de style, il faut respecter un certain ordre pour que les styles s'affichent correctement.

Les styles : !important l'emportent sur tous les autres.

La règle :
Les règles CSS située "après" dans une feuille de style l'emportent sur celles situées "avant"

 

Le tri par priorité calculée des sélecteurs****

"Les styles restant en concurrence ont un degré de priorité variable, dépendant du sélecteur CSS utilisé et de sa syntaxe. Ce degré de priorité est calculé sous forme d'un nombre à 4 chiffres ABCD"
Openweb.eu.org - Cascade CSS et priorité des sélecteurs

Spécificité des sélecteurs sur fr.selfhtml.org

 

On peut combiner plusieurs sélecteurs pour affiner la définition des styles :

Exemple :

div#myid li p.info { color:#f00; }

 

456bereastreet.com - CSS 2.1 selectors, Part 1

 

 

Liens :

Il n'y a pas de règle. Chacun a sa méthode (même l'ordre alphabétique)

Alsacreations.com - De l'ordre, que diable !

1 - Le positionnement
2 - Les marges et bordures
3 - Les dimensions
4 - Les propriétés de texte
5 - L'arrière-plan

Romy.tetue.net - Comment j'écris mon CSS ?

1 - D'abord les propriétés de positionnement : clear, float, z-index, position, top, right, bottom et left ;
2 - puis celles modifiant le type de bloc : display et overflow ;
3 - puis celles concernant le modèle de boîte : width, height, margin, padding ;
4 - suivies de l'habillage de la boîte : background et border ;
5 - pour terminer par la typo : text-align, font, line-height, color

 

Liens :

openweb.eu.org - Cascade CSS et priorité des sélecteurs

Yoyodesign.org - 6 L'assignation des valeurs des propriétés, la cascade et l'héritage

 

 

Problèmes d'affichage :

Alsacreations.com - Méthodologie pour résoudre les problèmes d'affichage en CSS

 

 

Les styles dans une page web :

Pour appliquer un style à un texte il faut distinguer :
- le style en lui-même,
- le texte auquel le style est appliqué.

Il faut donc :
- 1 - définir les caractéristiques du style (police, taille, etc.)
- 2 - appliquer le style au texte.

 

Il y a 3 façons d'appliquer un style à un texte :
- définir le style et l'appliquer au texte dans la partie body de la page,
- définir le style dans la partie head de la page et l'appliquer au texte dans la partie body,
- définir le style dans une feuille de style externe, associer la feuille de style à la page dans la partie head de la page, appliquer le style au texte dans la partie body.

 

 

Emplacement du code :

Suivant la solution choisie, la syntaxe sera différente :

 

1 - Dans la partie body :

Définir le style dans la partie body de la page :

Cette solution est utilisable une seule fois dans la page.
Elle n'apporte aucun des avantages des feuilles de style.
Elle peut être utilisée exceptionnellement.

Syntaxe :

Ici, on modifie la balise <p> par <p style="..."> ; on intègre les attributs du style entre les guillemets.
Le style est appliqué directement au texte.

<div style="font-size:24px;font-weight:bold;">titre</div>

 

 

2 - Dans la partie head :

Définir le style dans la partie head de la page :

Celle solution est utilisable seulement dans la page.
On peut définir plusieurs styles. Mais ils devront être définis dans la partie head de toutes les pages auxquelles ils s'appliqueront.

 

Insertion d'un style dans la partie HEAD :

<style type="text/css">
<!--
.Style1 {font-family: "Times New Roman", Times, serif}
-->
</style>

 

Syntaxe :

Ici, dans la partie head de la page :
- on crée une balise <style type="text/css"> suivie du ou des styles, terminée par la balise fermante </style>
dans la partie body de la page :
- on applique le style sélectionné au texte.

Dans la partie head :

<style type="text/css">
.titre {
font-size:24px;
font-weight:bold;
}
</style>

Dans la partie body :

<div class="titre">titre</div>

 

 

3 - Dans une feuille de style externe :

Définir le style dans une feuille de style externe :

C'est la meilleure solution pour utiliser les feuilles de style dans un site web.
On créera une feuille de style externe commune pour toutes les pages, qui rassemblera tous les styles utilisés sur le site.

 

Préparation :

1 - On crée une feuille de style qui va contenir les définitions de tous les styles utilisés dans le site.

styles.css

2 - On ajoute, dans la partie HEAD de chaque page du site, la mention suivante :

<link rel="stylesheet" type="text/css" href="styles.css" />

2bis - on peut également utiliser le code suivant :

<style type="text/css" media="screen">@import url(styles.css);</style>

 

On peut créer autant de fichiers de feuilles de style que l'on veut :

Fichiers CSS

Il est conseillé :
- de créer des feuilles de style séparées : exemple : styles.css et menu.css
- de mettre les feuilles de style dans un dossier : css

 

Syntaxe :

Ici, dans la feuille de style externe :
- on crée le style correspondant. , on décrit le style utilisé
dans la partie head de la page :
- on fait référence à la feuille de style.
dans la partie body de la page :
- on applique le style sélectionné au texte

 

Dans la feuille de style externe "styles.css" :

.titre {
font-size:24px;
font-weight: bold;
}

 

Dans la page HTML :

Dans la partie head de la page :

<link rel="stylesheet" type="text/css" href="styles.css" />

Dans la partie body de la page :

<div class="titre">titre</div>

 

 

Utilisation des polices de caractère dans une page web :

Important :
Pour afficher une police de caractère dans une page web (comme dans un traitement de texte), il faut que cette police soit présente dans le dossier Polices de l'ordinateur :
- menu Démarrer, Panneau de configuration, Polices.

Donc : si on conçoit une page web avec une police "exotique", cette police ne s'affichera pas sur un ordinateur ne la possédant pas.
Une police de remplacement s'affichera à la place. Ce qui modifiera la présentation du texte, telle qu'elle a été conçue au départ.

Pour cette raison, il faut limiter son choix aux polices les plus courantes.
(ne pas oublier qu'une police de caractère doit s'afficher non seulement sous Windows, mais aussi sur des ordinateurs Macintosh ou équipés de Linux).

Les polices les plus courantes :
   
Arial, Helvetica, sans-serif { font-family: Arial, Helvetica, sans-serif;}
Times New Roman, Times, serif { font-family: "Times New Roman", Times, serif; }
Courier New, Courier, mono { font-family: "Courier New", Courier, mono;}
Georgia, Times New Roman, Times, serif { font-family: Georgia, "Times New Roman", Times, serif;}
Verdana, Arial, Helvetica, sans-serif {font-family: Verdana, Arial, Helvetica, sans-serif;}
Geneva, Arial, Helvetica, sans-serif  

Voir :
edu.ca.edu - CSS - Les polices : quelle famille choisir ? [1]

 

- Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, mono
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif

La police affichée en gras sera la police à utiliser.
Si elle n'est pas présente, elle sera remplacée par la police suivante.

Les autres polices :

 

 

Les avantages des feuilles de style :

Les feuilles de style permettent d'uniformiser la présentation d'un site :
Pour chaque partie du texte (paragraphe, titre principal, sous-titres, etc) on choisit une police de caractère (et ses attributs).

 

Par exemple, pour ce site, j'ai défini les styles suivants :

p (paragraphe) : police Helvetica, taille : 1em

h4 (titre 4) : police Helvetica, taille : 1.3em, gras, couleur bleue

h5 (titre 5) : police Helvetica, taille : 1.2em, gras, couleur bleue
h6 (titre 6) : police Helvetica, taille : 1.1em; gras, italique, couleur bleue

 

La modification d'un style entraînera automatiquement la modification du texte sur toutes les pages concernées.
On pourra ainsi "essayer" plusieurs présentations sans avoir à modifier les pages.

Les feuilles de style viennent en complément des modèles (voir), pour faciliter la modification et l'évolution d'un site.
Elles permettent de réduire sensiblement la taille d'une page web en limitant l'utilisation de balises HTML consacrées à la définition des polices de caractère.

 

Caractéristiques d'un style :

Un style est déterminé essentiellement par :
- la police de caractère (Arial, Times, Verdana, etc),
- sa taille (à définir de préférence en points plutôt qu'en pourcentage),
- son épaisseur (normal, gras, etc.)
- son style (normal, italique, etc.)
- sa couleur,
- l'alignement du texte (gauche, droite, centré, justifié),
- la couleur d'arrière-plan,
- les bordures (épaisseur en pixels, style solide, pointillé, double, etc.),
- etc.

 

 

.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
color: #000099;
}

body {
/* font-size: 9pt;
color: #000099; */
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff; /* couleur de fond */
margin: 0; /* suppression de toutes les marges */
padding: 0;
}

img {
border: 0px none;
}

p {
font-family: Arial, Helvetica, sans-serif;
color: #000099;
font-size: 75%;
}

 

Remarque J'énumère ici les paramètres les plus courants. Il en existe d'autres, mais il faudra se méfier de leur utilisation, du fait de la mauvaise gestion des feuilles de style sur les anciens navigateurs.
Il sera donc souhaitable de vérifier le bon affichage des textes avec plusieurs navigateurs (Internet Explorer, Firefox, Opéra, etc.)

Infos sur les feuilles de style :
http://www.allhtml.com/css/css45.php

 

Voir aussi sur ce site :
Utilisation des feuilles de style avec Dreamweaver.

 

 

Liens :

 

Une feuille de styles de base pour bien démarrer vos projets
http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html

Cascade - Application des feuilles de style aux documents sur fr.selfhtml.org

 

Sur le Site du Zero (Openclassroom)

Openclassroom.com - Mémento des propriétés CSS

Openclassroom.com - Créer un menu horizontal déroulant en CSS

 

 

Pour s'initier aux CSS :

Coin.des.experts.pagesperso-orange.fr - Comment s'initier aux feuilles de style

FAQ du site AlsaCreations :
http://forum.alsacreations.com/faq/

Feuilles de style CSS sur fr.selfhtml.org

yoyodesign.org - Les feuilles de style en cascade

Tuteurs.ens.fr - Les feuilles de style

 

Css.mammouthland.net - Feuille de style CSS de base

 

Vérifier la validité de son site :

Voir ma page : Tester l'affichage de son site

Un ensemble de tests et de contrôles qui permettent de vérifier l'accessibilité de son site.
http://www.acces-pour-tous.net/

 

Tester l'affichage de son site :
http://browsershots.org/

Installer Internet Explorer en version "Stand alone" pour tester l'affichage :
http://tredosoft.com/Multiple_IE

 

 

Logiciels :

Des logiciels pour éditer facilement les feuilles de style :

 

Pour Windows :

TopStyle :

Windows 2000, Windows 95, Windows 98, Windows Me, Windows NT, Windows XP

Il existe deux versions : TopStyle Lite (gratuit) et TopStyle Pro

Site officiel (anglais) :
http://www.topstyle4.com/

Télécharger TopStyle :
http://www.commentcamarche.net/download/telecharger-34056736-topstyle

 

 

CSSEdit :

Pour Mac

Site officiel :
http://macrabbit.com/cssedit/

Télécharger CSSEdit :
http://www.logicielmac.com/logiciel/cssedit-241.html