LE CSS ISN Terminale S 2014-2015. CSS Types de styles.

Slides:



Advertisements
Présentations similaires
Lundi 15 Décembre 2008 Aujourd'hui, les balises et.
Advertisements

Chapitre 4. Les feuilles de styles : CSS
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
Structure du site cpe.evry.free.fr. 1. Informations générales Le site renvoi au site via un javascript.
Cascading style sheets
Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély – Stage CIES « Initiation au web »
11:06:28 Programmation Web Programmation Web : Feuilles de style CSS Jérôme CUTRONA
12 novembre 2012 Grégory Petit
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.
Cascading Style Sheets (CSS)
Applications Internet – cours 3 La page web
Documentation pour webmestre site sud-aerien.org
Les feuilles de style La mise en page
Excel Introduction.
Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre.
HTML CSS.
CSS.
HTML / CSS Gestion des systèmes d’information Classe terminale
M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006.
CSS : Quelques exemples de mise en page fluide en n colonnes
Cascading Style Sheets (CSS)
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.
31 octobre 2012 Grégory Petit
 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.
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.
Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.
Module HTML / CSS / PHP / MySQL
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 :
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Introduction aux langages Html et CSS
LE HTML ISN Terminale S Un peu d’histoire …
Template joomla Leblanc 2011.
CSS Cascading Style Sheets (Feuilles de style en cascade)
HTML Cours 2.
Plan de la leçon Réf. p. WRD- 149 Les styles Les listes hiérarchiques
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.
3. Personnaliser une page web Visualiser les liens entre feuille de style et html grâce à l’inspecteur d’éléments Savoir si les modifications doivent être.
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)
T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.
GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
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.
24 octobre 2012 Grégory Petit
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.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
Dreamweaver le retour Avec Les Formulaires Les Calques
Dreamweaver (2) ● les calques (layers) ● les comportements
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
On va découvrir la magie de ....
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.
Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.
Création de site web Feuilles de style.
Le CSS Principe de séparation du contenu et de la mise en forme
Feuilles de style Cascading Style Sheets
CSS et DREAMWEAVER (Suite et fin)  Les liens
Transcription de la présentation:

LE CSS ISN Terminale S

CSS

Types de styles

Styles intégrés

Styles internes

Styles externes

La cascade…

Syntaxe CSS

Syntaxe CSS : exemple

Syntaxe CSS pour les couleurs

Grouper des styles

Sélecteurs CSS

Sélecteur ’’ class ’’

CSS pseudo-classes

Sélecteur ’’id’’

Sélecteur contextuel

L’élément div :

L’élément span :

span : exemple

Le modèle de la « boite »

Le modèle de la boite

Configurer les marges

Configurer le padding

Configurer les bordures

L’affichage peut varier

Configurer un côté spécifique

Centrer le contenu d’une page

Visualiser avec les outils développeurs de Firefox…

La typographie en CSS

Police : font-family

Configurer la taille, la graisse, le style

Aligner et indenter du texte

Hauteur et largeur

CSS3 propriété opacity

Images et CSS

CSS background-image

CSS background-repeat

Usages de background-repeat

Configurer les listes avec CSS

list-type-style

TP structurer des pages web (suite)  TP suite  Lors du TP précédent vous aviez structuré les pages web du site « gite d’Amélie et Elodie » à l’aide de balises html.  Travail a mener : créer la feuille de style externe permettant d’obtenir la mise en page proposée en modèle.

Le flux d’éléments

Flux normal

Positionnement relatif

Positionnement absolu

Propriété float

Propriété clear

Maquette de page

CSS modèle de page 2 colonnes (navigation à gauche)

CSS modèle de page 2 colonnes (top logo, left nav)

Configurer les liens dans une liste non ordonnée

Propriété display

Configurer les liens dans une liste non ordonnée