Materiel-informatique.be>Définitions classées par ordre alphabétique: A - B - C - D - E - F - G - H - I - J - K - L - M - N - O - P - Q - R - S - T - U - V - W - X - Y - Z

Feuille de style (CSS)

Une feuille de style (CSS ou Cascading Style Sheet) est un fichier permettant de mettre en forme des pages Internet automatiquement. Il permet de réduire le poids d'une page (temps de chargement) en automatisant les propriétés des paragraphes, tableaux, propriétés de la page (image de fond, marges), ... Il permet également de positionner des objets sur la page sans utiliser des tableaux. Une feuille de style n'est chargée qu'une seule fois par un navigateur, même s'il voyage entre les pages (utilisant forcément la même feuille de style). C'est la méthode la plus complète pour créer un site compatible mobile en utilisant les Media Queries intégrées dans la version CSS3, utilisée sur ce site.

Une feuille de style peut être un fichier externe. Dans ce cas, le code HTML à insérer dans l'header de votre page (entre <head> et </head>) est  <link rel="stylesheet" type="text/css" href="style.css">, où style.css est le nom du fichier (éventuellement reprenant son emplacement). Ceci permet de reprendre les mêmes propriétés pour chaque page de votre site automatiquement.

Vous pouvez également utiliser directement le codage dans votre page. Dans ce cas, insérez dans le header:

<style type="text/css"> 

.... vos propriétés

 </style>

Tous les navigateurs WEB actuels (Internet Explorer, FireFox, ...) sont compatibles avec ces propriétés, même si celui de Microsoft les gère un peu à sa manière.

Certaines propriétés standards sont définies directement comme body (corps de texte), liens, balises H1, .... Chacune reprend les propriétés suivant:

Nom
           {
           liste des proprités terminée chaque fois par ;
            }

D'autres propriétés de textes personnalisées peuvent également être créées. Dans ce cas, elle doivent être précédées par un point (exemple: .texteperso). 

Dans le cas de propriétés personnelles, deux utilisations sont possibles. Soit pour l'entièreté d'un paragraphe, soit pour un ensemble de mots. Prenons par exemple la propriété personnalisée suivante qui attribue à la propriété .texte la police Arial, suivi de hevetica si elle n'est pas disponible chez l'ordinateur client, avec une hauteur de 12,5 points et la couleur rouge.

.texte
{
font-family: Arial, Helvetica;
Color: #FF0000;
Font-size: 12.5pt;
}

Le codage HTML <p class="texte">Le résultat.</p> donnera l'ensemble du paragraphe en rouge, <p>Uniquement une partie du texte en <span class="texte">rouge<span></p> donnera uniquement le mot rouge en couleur.

Exemple d'utilisation:

Remarque, les couleurs peuvent être codées en décimal (3 chiffres entre 0 à 255) avec l'attribut RGB ou en hexadécimal (3 chiffres entre 00 et FF) avec l'attribut #.

Couleur des liens: 

a:link { color: rgb(51,153,255); }

Couleur des liens visités:

a:visited { color: rgb(51,102,204); }

Couleur des liens actifs:

a:active { color: rgb(255,153,0); }

Propriétés du textes, balises h1, ...

boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

h1{font-family: Times New Roman, Times; color: #ff0000; }

Lien externe: Introduction à l'utilisation des feuilles de styles - CSS alsacréations (un cours complet sur les utilisations générales et spécifiques)

Définition annexe: Responsible design (rendre son site accessible aux smatphone)

Dernière mise à jour, le 26/01/2021

Tous droits réservés: reproduction interdite sans l'accord écrit de matériel-informatique.be


© les marques citées sont propriétés des constructeurs et éditeurs