Chapitre 4. Les feuilles de styles : CSS

Slides:



Advertisements
Présentations similaires
Chapitre 4. Les feuilles de styles : CSS
Advertisements

Feuilles de style CSS - XHTML est un langage impur
HTML CSS.
HTML CSS.
CSS.
M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
Auteur : Frédéric Thériault 1. Les sélecteurs simples  Tous les éléments HTML du sélecteur sont affectés dans le document. Exemple : h1 { color:purple;
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
HTML Cours 2.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
Introduction à CSS Généralités. Introduction Beaucoup de documents XML sont destinés à être présentés. Les information du fichier seul (avec ou sans DTD)
HTML Cours 3.
GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
L'image: Le codage des images BacPro SEN Lycée Condorcet.
Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 1/5.
Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 2/5.
RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard,
SQL partie 5 1 LMD create – update – primary key secondary key.
Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.
Toulibre : présentation de... xhtml + css par Rémy Sanchez.
Master ESEEC Rédaction de documents (longs) structurés Patrice Séébold Bureau 109, Bât B.
Octobre 2013 Smartweb Refonte des sites Internet AIDE – K-Sup v6.
Cours de HTML. Après les balises passons à la mise en forme  Structurer. Structurer.  Avant de pouvoir styler notre page, il nous faut améliorer sa.
I- ANALYSE DU BESOIN / Plan
Téléchargement de fichiers
Exploitation de logiciels :
I- ANALYSE DU BESOIN / Plan
Les boites texte et dossier
Pas de variable globale
Les notions de classe et d'objet
Visite guidée - session 3 Les postes de charge et les gammes
Micro Informatique au Cellier
JavaScript.
Feuilles de style Cascading Style Sheets
Collecte de données CAPI
Principes de programmation (suite)
HTML.
Les objectifs du cours Savoir utiliser un Tableur
Les bases de données et le modèle relationnel
DESSIN TECHNIQUE Té de dessin Collège technique Sousse Collège technique Sousse.
Création de site web Feuilles de style.
Le CSS Principe de séparation du contenu et de la mise en forme
Module 1 : Réaliser un site internet
Feuilles de style Cascading Style Sheets
Gestion du cours Aissa Boulmerka.
Feuilles de style Cascading Style Sheets
1 Exemple d’un document (article). 2 XML: eXtensible Markup Language Wikipédia XML (Extensible Markup Language, « langage de balisage extensible ») est.
HTTP DNS NTP FTP R231 RJ45 definition HTTP DNS NTP FTP R231 RJ45.
Structure D’une Base De Données Relationnelle
CSS et DREAMWEAVER (Suite et fin)  Les liens
Bases de données sous Access. Initiation aux bases de données  Structure d’une base de données.
Programmation Android GUI (widgets) et ressources
CountrySTAT / FENIX Aperçu globale de l’Editeur DSD dans la nouvelle plateforme CountrySTAT FORMATION DES POINTS FOCAUX SUR LE SYSTEME CountrySTAT/FENIX.
Comment personnaliser Microsoft SharePoint Site web
Programmation Android Les listes
CSS : Cascading Style sheets Sadok Ben Yahia, PhD sadok.
Cours 3: Feuilles de style
Programmation Web : Introduction à XML
2/24/2019 Outils informatiques Séance 2 : les styles 1 1.
1. 2 TABLEUR: Calc mars 19 Myriam Boullanger - Bureautique - Calc Suite Gratuite Libre Office Dans le navigateur (Internet Explorer, Google Chrome, FireFox,…),
Definition de html sommaire. Présentation de html, css et javascript Module 1.
Les feuille de styles.
Qu’est ce qu’une page web? Comment fonctionne un site web?
DONNÉE DE BASE QM Manuel de formation. Agenda 2  Introduction  Objectif de la formation  Données de base QM: Caractéristique de contrôle Catalogue.
Site web, Ce qu’il faut savoir ?
Synchronized Multimedia Integration Language par Yves Bekkers
Transcription de la présentation:

Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet

Plan du chapitre Introduction Historique Structure des feuilles de styles Héritage Localisation externe, interne, intra-ligne Règles de rédaction Sélecteurs regroupés Notions de boites Propriétés de styles Notions de class Notions de pseudo-class Notions de pseudo-élément Règles spéciales Unités de mesures Commentaires Filtres d’images

Introduction Les feuilles de styles offrent un moyen efficace pour contrôler l'apparence et le rendu des documents HTML. Elles permettent de séparer le contenu de la forme.   Tous les navigateurs n'interprètent pas toutes les propriétés CSS2 au même degré. L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en cascade).

Historique Conçu initialement pour HTML, la première version dite CSS niveau 1 (CSS-1) est publiée en 1996, Les feuilles de styles sont apparues en 1997 avec le browser Internet Explorer 3.0, 1998, le W3C publie une nouvelle version CSS-2. Elle introduit la notion de type de média, Elles se sont généralisées avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. IE 5 gère la quasi totalité des spécifications CSS-2, Le site du W3C propose une validation en ligne permettant de vérifier la conformité d’un style à la norme CSS-2.

Structure des feuilles de styles Une feuille de styles est composée d'un ensemble de descriptions de styles. Sélecteur { propriété: valeur; propriété: valeur … } Exemple : H2 { COLOR: navy; FONT: 18px; FONT-FAMILY: sans-serif Aucune limite dans le nombre de couple propriétés / valeurs

Héritage Pour chaque propriété la valeur « inherit » permet de préciser si la valeur doit être héritée. Exemple : H3 { COLOR: navy; FONT: inhérit; FONT-FAMILY: sans-serif }

Localisation des styles La déclaration de règles de styles peut être soit : externe au document HTML dans une feuille de style, interne au document HTML dans la section HEAD, intra-ligne, associé à l’attribut style d’une balise

Feuille de styles externe Séparation de la présentation de la page HTML, Réduit la taille de la page HTML, Style identique pour l’ensemble d’un site, Évolution rapide du « design » d’un site. Feuille de style spécifique au média (taille de l’écran, imprimante,...)

Feuille de styles externe Une feuille de styles externe est un fichier texte portant habituellement l'extension .css, Le lien entre le document HTML et le fichier CSS s’effectue dans la section <HEAD> d’un document HTML, Exemple : <HEAD> <TITLE>Histoire des feuilles de styles</TITLE> <link REL="StyleSheet" TYPE="text/css" HREF="../styles.css"> </HEAD> 1. La balise <LINK> avertit le navigateur qu'il doit établir un lien 2. rel=stylesheet précise qu'il s'agit d'une feuille externe 3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade 4. href=" ... " définit l'emplacement de la feuille de style

Feuille de styles interne Une feuille de styles interne est insérée en en-tête du fichier HTML à l'aide de l'élément <STYLE>, Ces styles seront définies uniquement pour le document courant. Exemple : <HEAD> <TITLE>Nom du document</TITLE> <style> <!-- A { COLOR: red } .toto {COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif} --> </style> </HEAD> Application d'un style sur un élément <P CLASS="toto">texte du paragraphe…

Styles intra-ligne La description d'un style intra-ligne est insérée directement dans la balise d'ouverture d'un élément HTML, Le style est appliqué à l'aide de l'attribut HTML style inséré dans la balise d'ouverture de l'élément, Exemple : <P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">

Règles de rédaction Les règles sont à la base de toute feuille de styles. Elles ont une syntaxe précise et sont construites de la manière suivante : Sélecteur {propriété: valeur; propriété: valeur …} Une règle est composée du sélecteur suivi du bloc de déclaration définissant le style. Le sélecteur identifie le style, il lui donne son nom. L’ensemble des balises HTML sont des sélecteurs potentiels

Règles de rédaction Les accolades ( { } ) fixent les limites d'un bloc de déclarations. Un bloc de déclaration comprend l'ensemble de toutes les déclarations composant un style. Une déclaration est composée du nom d'une propriété, suivi du caractère deux-points ( : ) puis des valeurs associées à la propriété. Chaque déclaration doit être terminée par un ;

Sélecteurs regroupés Possibilité de regrouper plusieurs sélecteurs pour une même description de style. Exemple : H1, H2, H3, H4 {color: blue} est identique à : H1 {color: blue} H2 {color: blue} H3 {color: blue} H4 {color: blue}

Notions de boîtes Le concept de boîte (box) dans CSS-2 permet de définir les surfaces sur lesquelles sont appliquées plusieurs propriétés. Le contenu de presque tous éléments d'un document est inséré dans une boîte. Il est possible qu'une boîte soit placée à l'intérieur d'une autre et ainsi de suite. Une boîte qui en contient une autre devient la boîte englobante de la deuxième. Chaque boîte est composée de plusieurs rectangles portant des noms et ayant un rôle à jouer.  

Notions de boîtes Ces rectangles sont formés par : les marges (margin) les bordures (borders) la boîte de remplissage (padding) la boîte de contenu (content) Une Balise DIV est un cadre avec un espace et une marge (une boite), Un Balise SPAN permet de définir un style spécifique pour un texte

Notions de boîtes

Notions de boîtes Les balises DIV / LAYER permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres: La position par rapport au haut du navigateur, La position par rapport à la bordure gauche du navigateur, La largeur, La hauteur, Le Z-Index, c'est-à-dire le niveau de superposition de la balise

Notions de boîtes La première (LAYER) est une balise spécifique à Netscape Navigator, Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator La syntaxe de la balise LAYER est la suivante: <LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut"> éléments HTML </LAYER>

Notions de boîtes Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante Exemple : <LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER>   <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif">

Notions de boîtes Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-2, au moyen des balises DIV et SPAN. Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons: Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left). Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent. La syntaxe des balises DIV/SPAN est la suivante:  <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> éléments HTML </DIV>

Notions de boîtes LAYER Attribut Valeur Libellé Name Chaine Identifiant de la balise Top Entier Position absolue / partie supérieur de l’écran Left Position absolue / partie gauche de l’écran Width Largeur Height Hauteur zIndex Position Visibility Show Hidden Valeur de superposition

Notions de boîtes DIV SPAN Attribut Style Valeur Libellé ID Chaine Identifiant de la balise Name Nom de la balise Position static absolute relative Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l'élément précédent Top auto valeur numérique entière valeur en pourcentage (%) distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage DIV SPAN

Notions de boîtes DIV SPAN Attribut Style Valeur Libellé Left auto valeur numérique entière valeur en pourcentage (%) distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pourcentage Width largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage Largeur DIV SPAN

Notions de boîtes DIV SPAN Attribut Style Valeur Libellé Height auto valeur numérique entière valeur en pourcentage (%) hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage zIndex auto valeur numérique entière superposition automatique valeur indiquant la profondeur Visibility inherit hidden visible visibilité par défaut caché visible Valeur de superposition DIV SPAN

Propriétés de styles Padding Margin Color Border Font Display Filtre d’image

Notions de class Les class permettent d'affecter des styles différents à des balises (modification dynamique de l'aspect d'une page HTML). Il est possible d’ajouter une classe à un sélecteur.   La définition des classes: .nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...} Pour utiliser une classe : <BALISE class="nom_de_la_classe"> ... </BALISE> Javascript va permettre grâce à sa gestion d'événement de changer dynamique la classe associée à une balise. (cf cours spécifique).

Notions de class  Une même balise peut avoir plusieurs descriptions de styles. Exemple : Q.fra {color: blue} Q.ang {color: red}   L'application des styles ainsi définis s’effectuera via l'attribut class: <Q CLASS="fra">contenu de l'élément… <Q CLASS="ang">contenu de l'élément…

Notions de class Les ID permettent d'identifier les balises et d'associer un style à une balise. Javascript va référencer la règle de style voulue grace à l'ID On l'utilisera de la manière suivante : <BALISE ID="nom_ID" > ... </BALISE> Différences entre l’utilisation de l’ID et de la CLASS ? ID unique CLASS multiple et modifiable

Notions de class document.all.nom_ID.style.propriété_de_style En javascript pour changer la class associée à une balise on utilisera la propriété className. <P ID='nom_ID' onMouseOver = "className ='style'">Bonjour </P> Pour affecter un style à une balise en Javascript : document.all.nom_ID.style.propriété_de_style Ou nom_ID est l’identifiant d’une balise <DIV> par exemple.

Notions de pseudo-class Les pseudo-classes sont en fait des classes spéciales permettant d'obtenir des effets particuliers. Certains des effets sont dynamiques et surviennent pendant ou après une action de l'utilisateur. Pseudo-classe :first-child :first-child La pseudo-classe :first-child affecte le premier élément-enfant d'un autre élément. Exemple de règle  DIV > P:first-child {color: blue}

Notions de pseudo-class Analyse de la syntaxe utilisée. Le premier sélecteur indique l'élément parent, le signe > précède le deuxième sélecteur pour lequel la pseudo-classe :first-child est spécifiée. On comprendra ainsi que tout premier élément-enfant "paragraphe" d'un élément <DIV> sera affiché en bleu dans le document.

Notions de pseudo-class Pseudo-classes pour les liens :Link, :visited Ces deux pseudo-classes permettent de définir un style pour les hyperliens non-visités (link) et un autre pour les hyperliens visités (visited). Exemple de règle : A:link {color: blue} A:visited {color: green} Ainsi, les hyperliens non-visités seront affichés en bleu et les hyperliens visités seront affichés en vert.

Notions de pseudo-class Pseudo-classes dynamiques Ces pseudo-classes permettent de définir des effets de style survenant lors d'actions de l'utilisateur. :hover Survient lorsque l'utilisateur pointe l'élément : Exemple de règle A:hover {background-color: yellow} la couleur d'arrière-plan d'un hyperlien passera au jaune dès que l'utilisateur le pointera.

Notions de pseudo-class :active Survient lorsque l'utilisateur active (clique sur) l'élément : Exemple de règle : A:active {color: red} la couleur du texte d'un hyperlien passera au rouge dès que l'utilisateur l'activera.

Notions de pseudo-class Exemple A:link{ color : #000099; text-decoration : none; font-weight : normal } A:visited{ color : #000099; text-decoration : underline; font-weight : bold; } A:hover{ color : #ff0066; text-decoration : underline; font-weight : normal;}

Notions de pseudo-class :focus Survient lorsque l'élément obtient le focus via le clavier ou le pointeur de la souris. Exemple de règle : A:focus {font-size: larger} la taille du texte sera augmentée d'un cran lorsque l'élément obtiendra le focus.

Notions de pseudo-éléments Il existe quatre pseudo-éléments. Ils permettent d'agir sur du contenu impossible à identifier avec le langage HTML. :first-line Sélectionne la première ligne d'un élément. Exemple de règle : P:first-line {color: blue} La première ligne de chaque paragraphe sera affichée en bleu.

Notions de pseudo-éléments :first-letter Sélectionne la première lettre d'un élément, Exemple de règle : P:first-line {font-size: 24pt} la première lettre de chaque paragraphe sera affichée avec la taille 24 points. :after :before Ces pseudo-éléments permettent l'insertion de texte ou d'images devant ou après le texte de l'élément.

Règles spéciales Les AT-rules ou @rules sont destinées à fournir des informations à l’application.. @import Utilisée au début d'une feuille de styles permet l’importation d’une autre feuille de styles. Sa valeur doit être une URL Exemple de règle : @import url(http://www.reseau.com/styles.css) Plusieurs règles @import une à la suite de l'autre.

Règles spéciales @media Permet d'indiquer le média cible Plusieurs règles @media peuvent cohabiter. Chacune d'entre-elles devant être associées à des règles spécifiques. Exemple de règle : @media print {BODY {background-color: white} Dans cet exemple, la règle de style qui suit est destinée aux imprimantes.

Règles spéciales Liste des médias disponibles all Tous les médias. aural Synthétiseurs vocaux. braille Appareils lisant le braille. embossed Imprimantes pour le braille. handheld Petits écrans, écrans monochromes, etc. print Imprimantes et dispositifs d'aperçu avant impression. projection Projecteurs, acétates électroniques. screen Écrans d'ordinateurs. tty Écrans de type télétype (terminaux). tv Télévision

Règles spéciales @page Définir les paramètres d'une boîte de page (page box), Une boîte de page est une zone contenant deux aires appelées aire de la page (page area) et aire des marges (margin area),  Cette règle permet d'insérer des instructions concernant les dimensions, orientation, marges, etc. . La boîte de page agit en tant que boîte englobante

Règles spéciales La règle @page peut utiliser les propriétés suivantes : size, margin, marks Exemple : @page { size: 8.5in 11in; margin: 2cm } Les propriétés des pages de gauche et de droite se présentent comme suit : @page :left { size: 8.5in 11in; margin: 2cm } @page :right { size: 8.5in 14in; margin: 2cm } Il est aussi possible de spécifier les propriétés de la première page du document : @page :first { size: landscape; margin: 2cm }

Les unités de mesures Unités de longueurs (lenght) Les longueurs, tailles, épaisseurs des propriétés définies dans les styles sont à associer à des unités de mesures. Exemples. :  10pt 1.2em 0.7em 12px

Les unités de mesures Deux groupes d'unités de longueurs sont utilisées avec CSS2 : Unités de longueurs relatives Elles permettent un ajustement automatique des dimensions en fonction du support employé. em (relative à la taille définissant l'élément parent. 1.2em = 120% de la taille de caractère définie dans l'élément parent) ex (relative à la valeur de la hauteur définie dans l’élément parent (x-height) .) px (valeur relative à la résolution du support visuel, par exemple l'écran)

Les unités de mesures Unités de longueurs absolues Intéressantes uniquement lorsque le support de sortie du document est connu à l'avance.  in (pouces) cm (centimètres) mm (millimètres) pt (points; 1pt = 1/72in) pc (picas; 1pc = 12pt) Pourcentage Les pourcentages sont composés d'un nombre suivi du symbole %.

Les unités de mesures Les couleurs Une valeur de couleur est définie par un nom (nom de la couleur lorsqu'elle existe) ou un code de couleur RGB. Noms de couleurs :   aqua, black, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.  Codes de couleurs : #rrggbb ex. : #6666FF

Les commentaires P { font-size : 10px ; } /* commentaire ici */

Les filtres d’images Spécifiques à Internet Explorer Disponibles à partir de la version xRay(enabled=1) gray(enabled=1) invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH Exemple <STYLE> .filtre {filter:xRay(enabled=1) gray(enabled=1) invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH} </STYLE>

Les filtres d’images Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) BlendTrans(Duration=?) Blur(Add=?, Direction=?, Strength=?) Chroma(Color=?) DropShadow(Color=?, OffX=?, OffY=?, Positive=?) FlipH FlipV Glow(Color=?, Strength=?) Gris Invert (invert) Lumière Mask(Color=?) RevealTrans(Duration=?, Transition=?) Shadow(Color=?, Direction=?) Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Xray

Les filtres d’images Exemple : fliph(enabled=1) flipv(enabled=1) gray(enabled=1) invert(enabled=1) xray(enabled=1) alpha(opacity=50,enabled=1) blur(direction=45,strength=15, add=0, enabled=1) chroma(color=#FF0000 ,enabled=1) dropshadow(offx=5, offy=9, color=#008fff,enabled=1) glow(strength=5, color=#ffff00,enabled=1) mask(color=#FF0000 ,enabled=1) shadow(color=#FF0088,direction=315,enabled=1) wave(freq=2, strength=6, phase=0, lightstrength=0, add=0, enabled=1) wave(freq=4, strength=8, phase=0, lightstrength=25, add=1, enabled=1) chroma(color=#ff0000,enabled=1) shadow(color=#ff0000,enabled=1) chroma(color=ffff00,enabled=1)