T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.

Slides:



Advertisements
Présentations similaires
Lundi 8 Décembre 2008 Aujourd'hui, nous finirons la mis en forme du texte.
Advertisements

Introduction aux Web Services Partie 1. Technologies XML
Conception de Sites Web dynamiques
Conception de Site Webs Interactifs Cours 4
Gérer un site avec Kompozer
Feuilles de style CSS - XHTML est un langage impur
Le CSS : un complément au HTML
Cours XHTML/CSS Lundi 9 Février 2009
XML, et HTML, comme langages de structuration
HTML CSS.
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
Cascading style sheets
XHTML XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous.
Introduction aux Web Services Partie 1. Technologies HTML-XML
Applications Internet – cours 3 La page web
Création de sites Web a.Création dun site Web: 1.Activer le menu « Fichier », 2.Choisir la commande « Nouveau… », 3.Dans le volet doffice qui saffiche.
Bienvenue! Qui suis-je? Webmestre depuis 1994 Café Internet en 1996 Commerce électronique Gestion de contenu web Marketing interactif.
HTML CSS.
CSS.
HTML / CSS Gestion des systèmes d’information Classe terminale
HTML-CSS-XHTML.
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.
Cours n° 1 Le langage HTML Prof. : E. BAKKI
Les feuilles de style CSS
 Créer une page html nommé index  Cette page doit contenir  Partie de l’entête Titre Métas(description et mots clés) Lien vers une feuille de style.
Le langage XHTML 420-S4W-GG Programmation Web Client
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.
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
Création de sites web I. Site statique : Généralités :
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Template joomla Leblanc 2011.
Auteur : Frédéric Thériault 1. Les boîtes 2 Les attributs 3 width height margin margin-top margin-right margin-bottom margin-left border-style border-width.
Auteur : Frédéric Thériault 1. À quoi ça sert !?  Cascading Style Sheet  Modifier la page Web en ajoutant des styles aux balises  Modifier l’apparence.
Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :
Auteur : Frédéric Thériault 1. font-family /generic-family  Permet de définir le type de police pour le texte d’un ou plusieurs éléments  Les plus courants.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Formater du texte>Les titres Définir les titres HTML distingue 6 niveaux de titre : Titre N°1 Titre N°2.
Chap 0 : Introduction HTML et CSS
INTERNET Le langage HTML
Concepts et outils pour une initiation au web
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
Part 3 & 4.  Toutes balises ouvertes se ferme ◦ Aucun accents ni espace ◦ Encore moins des majuscules  Il en va de même pour les noms de fichier.
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
Éléments de présentation
Auteur : Frédéric Thériault 1. L’attribut « color »  Permet de modifier la couleur du contenu d’un élément html { color: blue; } Roger Rabbit: … 2.
Cascading Style Sheets CSS: Feuilles de Style en Cascade Feuille: Fichier-séparé.css Style: Design de votre Site Cascade: la Page d'accueil et les sous.
CSS et DREAMWEAVER.
Conception des pages Web avec
1 LES FEUILLES DE STYLES Cours Web 1A, chap. 2 V. Deslandres (dernière MàJ: 6/11/2006)
24 octobre 2012 Grégory Petit
D é veloppement de sites web statiques Par DRISS AIT EL HADJ Par DRISS AIT EL HADJ Avril 2012.
Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.
Mise en forme avancée et Publication. Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie.
Language html II- Listes. Les Listes Les listes numérotées.
Guillaume MICHAUD – Yvan LECOMTE
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Formation Web Avant-propos Cette formation n’a pas pour but de vous apprendre à créer un site avec Google sites, canalblog… Cette formation n’a.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
INF2005– Programmation web– A. Obaid Les feuilles de style.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.
Paris Web 2008 – Samedi 15 Novembre 2008 Pascale Lambert-Charreteur CSS Débutant css.mammouthland.net Vincent Valentin 20cent.net.
Feuilles de style Cascading Style Sheets
Transcription de la présentation:

T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1

P LAN  Définition  Ecriture du CSS  Sélecteur  Notion de classe  Notion d’un ID  Mode page  Convention  Police de caractère  Apparence des listes  Arrière plan 2 Amani JARRAYA & Mohamed MOHSEN

D ÉFINITION (1/2) 3 CSS est l'abréviation de « Cascading Style Sheets » Les feuilles de style sont des ajouts de code au langage XHTML qui vont prendre en charge la présentation de la page Web  Police, taille de caractères, interlignes, etc. Le concept du CSS repose sur le principe de la séparation du contenu et de la présentation Amani JARRAYA & Mohamed MOHSEN

D ÉFINITION (2/2) 4 Lacune XHTML  Une taille de caractère limités à quelques valeurs (hx)  Un seul modèle de bordure de tableaux  Une image d’arrière obligatoirement répétée en mosaïque Utilité de CSS  CSS apportent de nombreuses possibilités de présentation  Taille de caractères illimitée, de nouvelles présentation de bordure, le contrôle d’interligne, le positionnement précis des images…  Il simplifie le code  Il facilite la maintenance du site Amani JARRAYA & Mohamed MOHSEN

E CRITURE DU CSS (1/2) 5 Deux possibilité : Interne : le code de la feuille de style sera placé dans l’entête du document XHTML Amani JARRAYA & Mohamed MOHSEN

E CRITURE DU CSS (2/2) 6 Deux possibilité : Externe : Regrouper les déclarations de style dans un fichier (.css) externe au fichier XHTML et mis dans le même répertoire que ce dernier. Ma_Presentation.css  La balise avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.  L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.  L'attribut type="text/css" précise le type de feuille de style.  L'attribut href=" URL " donne l’emplacement de la feuille de style.

S ÉLECTEUR 7 Sélecteur { Propriété 1: valeur; Propriété 2 : valeur; Propriété N : valeur; }  Il existe deux type de sélecteur : classe et Id. Amani JARRAYA & Mohamed MOHSEN

N OTION DE CLASSE 8 Définition de la classe. nom_de_classe { Propriété 1: valeur; } EX:.eni { font-family: Verdana; } Appel de la classe EX: … Amani JARRAYA & Mohamed MOHSEN

N OTION D ’ UN ID 9 Définition d’un id # nom_de_id { Propriété 1: valeur; } EX: #eni { font-family: Verdana; } Appel de la classe EX: … Amani JARRAYA & Mohamed MOHSEN

M ODE PAGE 10 Définition table { Propriété 1: valeur; }  Propriété1 s’exécutent pour tous les tableaux qui existent sur cette page  Il est possible d’affecter le même effet à des différents sélecteurs. EX: div, table, spam, h1 { Propriété 1: valeur; } Amani JARRAYA & Mohamed MOHSEN

C ONVENTION 11  Commentaires /* Ceci est un commentaire */  Le code CSS et XHTML doit être écrit en minuscule Amani JARRAYA & Mohamed MOHSEN

P OLICE DE CARACTÈRE (1/5) 12 Nom de la police Font-family: nom de la police; Exemples: Font-family: Arial; Font-family: ‘courier New’; Italique Font-style: italic ou oblique; Petite majuscule Font-variant: small-caps; Amani JARRAYA & Mohamed MOHSEN

P OLICE DE CARACTÈRE (2/5) 13 Gras Font-weight: bold; Taille: Font-size: valeur en pt ou px; Raccourci: P {font: italic bold small-caps 24 pt Arial, sans- serif;} Amani JARRAYA & Mohamed MOHSEN

P OLICE DE CARACTÈRE (3/5) 14 Couleur du texte Color: red; Color: #ff0000; Décoration Text-decoration: underline; Transformation Text-transform: capitalize; Text-transform: uppercase; Text-transform: lowercase; Text-transform: none; Amani JARRAYA & Mohamed MOHSEN

P OLICE DE CARACTÈRE (4/5) 15 Espace entre les lignes Line-height: 2; ou Line-height: 200%; (double interligne) Line-height: 18px; Alignement horizontal Text-align: left; Text-align: right; Text-align: center; Text-align: justify; Amani JARRAYA & Mohamed MOHSEN

P OLICE DE CARACTÈRE (5/5) 16 Alignement vertical Vertical-align: sub; Vertical-align: sup; Vertical-align: top; Vertical-align: middle; Longueur et hauteur (en px ou en pourcentage) Width: 235px; Hight: 50%; Amani JARRAYA & Mohamed MOHSEN

A PPARENCE DES LISTES 17 Apparence des puces et des numérotations List-style-type: disc; (cercle plein) List-style-type: circle; (cercle) List-style-type: square; (carré) List-style-type: decimal; (1, 2, 3, etc.) List-style-type: upper-roman; (I, II, III,…) List-style-type: lower-roman; (i, ii, iii, etc.) List-style-type: upper-alpha; (A, B, C,...) List-style-type: lower_alpha; (a, b, c, etc.) Puces graphiques List-style-image: url(votre_puce.gif);  Les formats peuvent etre de type gif, jpeg, ou png Amani JARRAYA & Mohamed MOHSEN

E XERCICE 1 18 Amani JARRAYA & Mohamed MOHSEN

A RRIÈRE PLAN (1/2 ) 19 Couleur d’arrière-plan Body {background-color: #99ccff;} H2 {background-color: #99ccff;} Insertion et répétition d’une image Background-image: url(image.jpeg); Background-repeat: repeat; Background-repeat: repeat-x; Background-repeat: repeat-y; Background-repeat: no-repeat; Exemple: Body {background-image: url(img.png); background- repeat: repeat;} Amani JARRAYA & Mohamed MOHSEN

A RRIÈRE PLAN (2/2 ) 20 Positionnement de l’image  Background-position: 50px 100px; (axe horizontal par rapport au bord gauche, axe vertical par rapport au bord supérieur)  Background-position: 20% 50%; (axe horizontal par rapport au bord gauche, axe vertical par rapport au bord supérieur)  Background-position: center left; (position horizontale, position verticale) Défilement de l’image  Background-attachment: scroll; (défilement de l’image)  Background-attachment: fixed; Amani JARRAYA & Mohamed MOHSEN

21 Des questions ? Amani JARRAYA & Mohamed MOHSEN