Les feuilles de style

Dimension: px
Commencer à balayer dès la page:

Download "Les feuilles de style"

Transcription

1 1 Les feuilles de style 1. introduction déclaration de style dans le document définitions de style dans les fichiers externes Les attributs de définitions de style introduction Jusqu à présent nous avons mis en forme les documents HTML à l intérieur du document HTML. Cette méthode, si elle semble simple, présente plusieurs défauts :! La mise en forme est obligatoirement la même pour toutes les personnes ayant accès au document! La modification de la mise en forme est longue et délicate : il faut arriver à retrouver toutes les balises de mise en forme! La même présentation ne peut pas être réutilisée facilement : il faut la refaire chaque fois. C est pourquoi il peut être utile de séparer document et mise en forme en utilisant des feuilles de style ou en définissant une déclaration de style à l intérieur du document. A partir de la version d'internet Explorer 3.0 (qui ne gère pas toutes les propriétés des feuilles de styles) et, Netscape à partir de la version 4 supportent les feuilles de styles. 2. déclaration de style dans le document Il est possible de définir un style pour un document à l intérieur des balises <STYLE> </STYLE> dans la zone <HEAD>. # STYLE SIMPLE On peut définir pour chaque balise un style en donnant le nom de la balise suivit de sa définition de style. h1{color: blue; font-style: italic} <h1>les feuilles CSS</h1> <p>moi je n'ai pas de style</p>

2 2 L attribut type permet d informer le navigateur du type de feuille de style utilisé. Pour les feuilles CSS le type est "text/css" il existe des feuilles de style JavaScript définit par : "text/javascript". # PLUS DE STYLES Pour ne pas être obligé d utiliser le même style pour toutes les balises de même nom, on peut utiliser l attribut CLASS à des balises HTML. On définit dans la partie style, des classes de styles que l on applique ensuite aux attributs des classes de même nom..bleue{color: blue; font-style: italic; text-align: center} //classe bleue.rouge{color: red; font-weight: bold}// classe rouge p{color: green} // paragraphe <h1 class=bleue>les feuilles CSS</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p>moi je suis un paragraphe</p> # ENCORE PLUS DE STYLES La définition d une classe peut être relativement longue pour pouvoir régler un grand nombre de paramètres. Pour ne pas tout redéfinir, dans le cas où peu d attributs changent de valeur, on peut utiliser des ID qui permettront de modifier certains attributs tout en gardant tous les autres de la classe. Dans la définition de style le caractère # est l indicateur de définition d un ID en mode CSS.

3 3.bleue{color: blue; font-style: italic; font-size: 40; text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold} p{color: green} <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p>moi je suis un paragraphe</p> On peut aussi faire précéder la définition d un ID d un nom de balise pour restreindre la portée de l ID à cette balise HTML. H1#mod {color: black; font-weight: bold} N autorise l ID mod que pour les balises H1. # LA BALISE SPAN La balise SPAN permet d appliquer un style à une partie de texte non balisée (une partie de paragraphe par exemple). Il suffit de positionner une balise <SPAN></SPAN> au morceau de texte concerné. A l intérieur d une balise SPAN, on peut appliquer du style comme à l intérieur des autres balises. On peut donc appliquer les attributs CLASS ou ID..bleue{color: blue; font-style: italic; font-size: 40; text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}

4 4.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p class=p> Il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <SPAN class=exec>les feuilles de style CSS</SPAN><SPAN class=jav> Les feuilles de style JavaScript</span></p> # GROUPEMENT Afin de simplifier l écriture, il est possible de grouper plusieurs balises HTML, sur une même liste de définition. h1,h2,h3 {color: blue; font-style: italic} # SELECTION CONTEXTUELLE Il est possible de définir dans quel contexte le style va s appliquer. Par exemple, on souhaite que seules les citations (CITE) définies dans les titres de niveau H2 soient de couleur bleue. h1{color: red; font-style: italic; font-size: 40; text-align: center} h2 CITE {color: blue; font-weight: bold} <h1 >Les feuilles CSS</h1> <h1 >Le style en HTML</h1>

5 5 <h2> Il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <CITE>les feuilles de style CSS</CITE> Les feuilles de style JavaScript</h2> # HERITAGE DE STYLES Lorsqu on imbrique d autres balises à l intérieur de balises définissant un style, elles héritent du style défini dans les balises de niveau supérieur..bleue{color: blue; font-size: 40;text-align: center} <h1 class=bleue>les feuilles CSS <br><em>le style en HTML</EM><br>// applique le style de H1 comment faire des multiples styles</h1> 3. définitions de style dans les fichiers externes Pour éviter de recopier dans un ensemble de document HTML des définitions de style qui sont communes, on utilise des feuilles de styles externes qui sont jointes au document. # LE FICHIER STYLE Le fichier style ne contient que les définitions de styles en langage CSS (ou JavaScript), sans commencer par une balise <style> ou autre. L extension du fichier n a pas de règle précise.

6 6 Pour aider à la compréhension du fichier on peut rajouter des commentaires, encadrés par : /* */. # UTILISATION DES FICHIERS DE STYLES Pour lier un fichier style à un document HTML on utilise la balise <LINK> dans la partie HEAD du document. Syntaxe : <LINK REL=stylesheet TYPE=text/norme HREF="adresse"> L attribut REL=stylesheet permet d indiquer que le fichier que l on veut utiliser est un fichier de styles. Il est possible grâce à cette balise de référencer d autres types de fichier. L attribut TYPE permet de spécifier la norme utilisée (text/css ou text/javascript). L attribut HREF va permettre de spécifier l adresse du fichier de style. Document HTML <LINK REL=stylesheet TYPE=text/css HREF="style1.css"> <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p class=p>il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <SPAN class=exec>les feuilles de style CSS</SPAN><SPAN class=jav> Les feuilles de style JavaScript</span></p> Document CSS.bleue{color: blue; font-style: italic; font-size: 40;text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} Le résultat obtenu est le même que précédemment (balise SPAN). 4. les attributs de définitions de styles Les principaux attributs de définition de style sont :

7 7 Nom font-size font-style font-family font-weight line-height text-align text-indent text-transform Définition Taille de la police de caractères Style (normal ou italic) Police utilisée «graisse» des caractères (normal, bold, bolder, lighter) Hauteur de l interligne (nombre ou pourcentage) Alignement du texte (right, left, justify) Retrait du texte sur la première ligne (pourcentage ou nombre) Transformation du texte en minuscule (lowercase), majuscule (uppercase), premier caractère en majuscule (capitalize) Il existe des attributs permettant de fixer le style d un bloc (paragraphe, balise H1..), son positionnement dans la page. Il faut faire attention : le positionnement se fait d un bloc par rapport à un autre. Nom height width background-color background-image margin-right margin-left margin-top margin-bottom padding-right padding-left padding-top padding-bottom border-style border-top-width border-right-width border-bottom-width border-left-width border-color Hauteur du bloc Largeur du bloc Couleur de fond Image de fond Marge de droite Marge de gauche Marge du haut Marge du bas Espace à droite Espace à gauche Espace en haut Définition Espace en bas Bordure (none : pas de bordure, 3D : en relief, solid :trait plein) Taille segment du haut Segment de droite Segment du bas Segment de gauche Couleur de la bordure

8 8 Feuille de style :.bleue{color: blue; font-style: italic; font-size: 40;text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} h1{background-color: yellow; margin-right: 40; margin-left: 40; margin-top: 40; margin-bottom: 20; padding-bottom: 60; border-color: black; border-style: solid} p{margin-right: 40; margin-left: 40; margin-top: 40}

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS ISN ISN Informatique et Sciences du Numérique LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS 1 INTRODUCTION AUX FEUILLES DE STYLE Le langage HTML est à la fois un langage permettant de décrire la structure

Plus en détail

Bases de données et Internet

Bases de données et Internet Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 2 Feuilles de style en cascade

Plus en détail

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1

de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

Plus en détail

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

INF2005 Programmation web CSS. Jacques Berger

INF2005 Programmation web CSS. Jacques Berger INF2005 Programmation web CSS Jacques Berger Objectifs L'utilité de CSS La syntaxe de CSS L'intégration à HTML Prérequis HTML CSS Cascading Style Sheets Version courante : CSS 3 Le problème initial Pollution

Plus en détail

3/ ATELIER WEB LANGAGE CSS

3/ ATELIER WEB LANGAGE CSS 3/ ATELIER WEB LANGAGE CSS *Cascading Style Sheets : feuilles de style en cascade. Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Développement. Web. Gaël Mahé. UFR math-info. automne 2005

Développement. Web. Gaël Mahé. UFR math-info. automne 2005 Développement Client Web Gaël Mahé UFR math-info automne 2005 Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation

Plus en détail

Langages de l Internet

Langages de l Internet Langages de l Internet http://sebastien.mavromatis.free.fr/ Les feuilles de style CSS : Cascading Style Sheet Recommandation du W3C CSS1 (1996), CSS2 (1998), CSS2.1 (2005), CSS3 Support par les navigateurs

Plus en détail

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents Université de Nice-Sophia Antipolis Jeudi 15 mars 2007 Polytech CiP1 Durée: 1h30 Création et Manipulation de documents (Hélène Renard / Sylvain Schmitz) Travaux Dirigés Séance n o 6 1 Objectifs du TD Utiliser

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

Les Feuilles de Styles

Les Feuilles de Styles Chapitre 6 Les Feuilles de Styles http://chaker707.googlepages.com/ BEN MAHMOUD Chaker Chaker707@yahoo.fr Principe des feuilles de style Même idée que les styles des traitements de texte distinction entre

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

Plus en détail

Introduction aux feuilles de style CSS

Introduction aux feuilles de style CSS Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr Jean-Philippe Pernin - DIP -

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

texte affiché

<div id=nom_id class=ma_classe>texte affiché</div> Rappel - Les sélecteurs de base La syntaxe de CSS est simple, elle est composée de 3 éléments: un sélecteur des propriétés des valeurs sélecteur { Il existe 3 sélecteurs de base: le sélecteur de balise

Plus en détail

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

LE RECAP ಠ_ಠ. C est trop facile! LE RECAP ಠ_ಠ C est trop facile! POUR COMMENCER... Quand on commence un fichier HTML (HyperText Markup Language), on écrit en premier le DOCTYPE!! sans oublier les balises

Plus en détail

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

Plus en détail

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML CSS CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

Technologies de l Internet. Partie 3 : CSS Iulian Ober

Technologies de l Internet. Partie 3 : CSS Iulian Ober Technologies de l Internet Partie 3 : CSS Iulian Ober iulian.ober@irit.fr Introduction au langage CSS permet de changer la mise en forme d'une page (X)HTML sans modifier son contenu gain de temps, de simplicité

Plus en détail

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15 Web Bruno BEAUFILS 2017/2018 Web 1 / 15 1. World Wide Web HTML CSS Web World Wide Web 2 / 15 1. World Wide Web HTML CSS Web World Wide Web 3 / 15 Exercice Ecrivez un document vous décrivant à la forme

Plus en détail

Une page web utilisant uniquement du XHTML

Une page web utilisant uniquement du XHTML 1 Une page web utilisant uniquement du XHTML 2 La même page avec le CSS en plus Source: http://www.csszengarden.com/ 3 Séparer le fond de la forme a plusieurs avantages : Personnalisation du design du

Plus en détail

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs

Plus en détail

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

Plus en détail

Langage HTML (suite).

Langage HTML (suite). Langage HTML (suite). Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 36 Plan de la partie 1 (2 séances) Internet et le Web (cours 1) Un outil pour

Plus en détail

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40 HTML/CSS Louis-Claude CANON louis-claude.canon@loria.fr 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre 2009 1 / 40 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

Plus en détail

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain Feuilles de style en cascade Utilisation des CSS Cascading Style Sheets Yan Bodain (Yan.Bodain@polymtl.ca) Chercheur-développeur Maison des technologies de l'information et des communications pour la formation

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

Plus en détail

Recouvrement des bordures

Recouvrement des bordures 4 Propriétés de mise en forme Tableau 4 43 Propriété table-layout (suite) auto : largeur automatique (valeur par défaut) ou fixed : largeur fixe. Propriété héritée. Pour retrouver la valeur initiale, utiliser

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Sommaire : I - Introduction css3. II - Sélecteurs. Positions, dimensions et styles. Styliser notre feuille css3. V - Memento.

Sommaire : I - Introduction css3. II - Sélecteurs. Positions, dimensions et styles. Styliser notre feuille css3. V - Memento. Sommaire : I - Introduction css3 II - Sélecteurs III - IV - Positions, dimensions et styles Styliser notre feuille css3 V - Memento IV - Liens et sources I - Introduction CSS3 : Qu'est-ce qu'on peut faire

Plus en détail

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS Couleurs, polices et autres attributs Les feuilles de styles CSS Jusqu à HTML 3.2 : on utilise les attributs des balises. Exemples : ... ...

Plus en détail

CSS = Cascading Style Sheets

CSS = Cascading Style Sheets CSS = Cascading Style Sheets = ecrit dans un fichier.css exemple style1.css un meme fichier peut etre partage par plusieurs pages ( uniformite) ajouter dans head page HTML qui utilisera le css :

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur :

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur : Consignes : le sujet est séparé en deux : la partie HTML et la partie CSS. Pensez bien à rendre les deux. Les réponses aux questions se fait sur le sujet qui est ensuite ramassé. Tous documents autorisés.

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

PROPRIETES DES STYLES

PROPRIETES DES STYLES PROPRIETES DES STYLES POLICES DE CARACTERES font-family Polices de caractères. On peut mettre une liste de police dans l ordre de préférence. Les noms des polices doivent dans ce cas être séparées par

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Les outils de création de sites web (suite)

Les outils de création de sites web (suite) Tuto 3ème séance - p1 Les outils de création de sites web (suite) 8. Les feuilles de style Alors que le langage HTML a pour objet de coder le contenu (texte, images, etc.) d'une page web pour la rendre

Plus en détail

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés.

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés. Mise en forme CSS3 Copyright 2017 - Cédric Lefrancq - Tous droits réservés. 1 TABLE DES MATIERES Les bases de la feuille de style... 3 Les commentaires en CSS... 3 Intégrer la page CSS dans la page HTML...

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

Plus en détail

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille

Plus en détail

Présentation Nous pouvons spécifier le style de l élément en trois endroits :

Présentation Nous pouvons spécifier le style de l élément en trois endroits : Javascript et CSS Présentation Nous pouvons spécifier le style de l élément en trois endroits : En attribut de l élément : c est le style dit inline. Dans une

Plus en détail

Programmation Web TD8- CSS

Programmation Web TD8- CSS ²Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD8- CSS Objectifs - Développer des pages Web HTML5 validées - Mettre en place des fichiers CSS pour une meilleure présentation

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5 IUT de Villetaneuse, Université Paris 13, Sorbonne Paris Cité DUT R&T 1 re année M1106 Initiation au développement Web 20162017 TP 3 : Formulaires Étienne André Version du sujet : 7 octobre 2016 Ce TP

Plus en détail

Les Feuilles de Style CSS

Les Feuilles de Style CSS Cours HTML Les Feuilles de Style CSS JPP - Juillet 2005 1 Table des matières 1. Introduction... 3 Qu est-ce qu une feuille de style?...3 2. Définition d un style... 4 2.1. Défi nition...4 2.2. A l intérieur

Plus en détail

Le CSS : un complément au HTML

Le CSS : un complément au HTML Le CSS : un complément au HTML CSS est l'abréviation de «Cascading Style Sheets». CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs,

Plus en détail

Cours 11 Feuilles de styles CSS

Cours 11 Feuilles de styles CSS École de bibliothéconomie et des sciences de l information SCI6052 Information documentaire numérique Cours 11 Faculté des arts et des sciences 22 novembre 2016 Christine Dufour, 2016 1/ 30 SCI6052 2/

Plus en détail

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 -

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 - Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE - 1 - LES BALISES DE SECTIONNAGE - 2 - LES BALISES DE DISPOSITIONS - 2 - LES BALISES - 3 - LES DIFFÉRENTS TYPES DE BALISES - 3 - LES TABLES - 5 - LES

Plus en détail

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Formation web 1 : HTML/CSS

Formation web 1 : HTML/CSS Formation web 1 : HTML/CSS Guillaume LEROY 1 1 DaTA Secrétaire Général 27 septembre 2016 Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre 2016 1 / 23 Sommaire 1 Internet 2 HTML/CSS 3 HTML : Les Balises

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

CSS 3. Mai Jérôme GUY

CSS 3. Mai Jérôme GUY CSS 3 Mai 2013 Jérôme GUY CSS Contenu Introduction... 3 Où écrire le CSS?... 3 Inclure un fichier CSS... 3 Les commentaires... 4 Class et Id... 4 Les balises SPAN et DIV... 4 Les sélecteurs avancés...

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

Plus en détail

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Cours Web n o 3 CSS Notions avancées

Cours Web n o 3 CSS Notions avancées Modèle de boîtes de CSS Cours Web n o 3 CSS Notions avancées Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com) Semaine du 3 octobre 2005 S.-D. Gouraud, P. Senellart (IFIPS)

Plus en détail

Classe de première SI CSS

Classe de première SI CSS CSS Table des matières 1. La petite histoire du CSS...2 2. Déclaration du CSS...2 2.1. Fichier.css...2 2.2. En-tête du fichier HTML...3 2.3. Directement dans les balises...3 3. Appliquer un style...3

Plus en détail

BDW1 - Programmation web - CSS

BDW1 - Programmation web - CSS BDW1 - Programmation web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2016-2017 http://liris.cnrs.fr/fabien.duchateau/ens/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3 HTML5 et CSS3. Table des matières : CE qu'est l'html5 page 2 Déclaration De Page page 3 Ossature D'une Page page 3 Les Balises...page 4-6 Les Nouvelles Balises...page 4-6 CSS3 page 7-9 Page 1/9 HTML5 Le

Plus en détail

On peut également définir certains éléments pour tout le fichier html, comme les liens par

On peut également définir certains éléments pour tout le fichier html, comme les liens par WEB : CSS (CSS 3) : Le CSS permet de créer des feuilles de style dans des fichiers ''.css'' qui sont utilisés par des fichiers html. La syntaxe du CSS est très simple, elle est constituée de règles associées

Plus en détail

XML. DTD Le schéma XSD

XML. DTD Le schéma XSD XML Structure d un dun document xml DTD Le schéma XSD Structure dun d un document XML Un document XML contient les éléments suivants: Le prologue Un arbre contenant

Plus en détail

UNIX ET PROGRAMMATION WEB Cours 5

UNIX ET PROGRAMMATION WEB Cours 5 Plan UNIX ET PROGRAMMATION WEB Cours 5 kn@lri.fr http://www.lri.fr/~kn 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes

Plus en détail

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information Les bases du CSS o Syntaxe générale : balise1 balise2 balise3 o Taille du texte : font-size En pixels : c'est

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

Plus en détail

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel HTML-CSS Claude Petitpierre, André Maurer, complété par Brice Canvel Automne 2010 ii Table des matières 1 Pages du Web 1 1.1 Introduction......................................... 1 1.2 Le langage HTML......................................

Plus en détail

Attribut : style. Attribut style Balise toutes

Attribut : style. Attribut style Balise toutes CSS 2.1 Attribut : style Attribut style Balise toutes !

Plus en détail

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

Plus en détail

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

Documents HTML Mise en forme CSS

Documents HTML Mise en forme CSS Département Éducation et Technologie Documents HTML Mise en forme CSS Feuilles de style en cascade Guy Vastersavendts 5.62 Novembre 1999 Centre pour la Formation à l'informatique dans le Secondaire Document

Plus en détail

Outil pour le Web. Polytech Marseille Département Génie Industriel et Informatique 4 - CSS. E. Tranvouez

Outil pour le Web. Polytech Marseille Département Génie Industriel et Informatique 4 - CSS. E. Tranvouez Outil pour le Web 4 - CSS E. Tranvouez Polytech Marseille Département Génie Industriel et Informatique Sommaire Problématique Contexte, Objectifs, Principe général Début en CSS Définition de style CSS

Plus en détail

Annexe : Balises HTML et CSS

Annexe : Balises HTML et CSS Annexe : s HTML et CSS Cette partie contient une liste non exhaustive des balises HTML et CSS les plus utilisées. Nous avons déjà certaines dans le cours, néanmoins il y en a d'autres que nous n'avons

Plus en détail

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE I.U.T. de Nice Côte d Azur 2004-2005 Département Informatique Réseaux 1 TP 6 Les feuilles de style CSS2 CORRIGE Objectif : introduire les principes des feuilles de style CSS2 Note : vous placerez vos fichiers

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail