Le CSS Principe de séparation du contenu et de la mise en forme

Slides:



Advertisements
Présentations similaires
Utilisation de l’outil Firebug
Advertisements

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.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
HTML Cours 2.
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.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
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.
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 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.
Informatique en L2-L3 Thèmes du niveau « Expert » G.
1, 2, 3, CSS ! PARIS WEB Présentation Pascale Lambert-Charreteur Enseignante dans l'académie de Rouen, Formatrice TICE et webmestre, Mammouthland,
Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 1/5.
Comprendre les sites web MODULE 1 | CHRISTIAN BLÉSER (2015)
Cours de HTML suite. Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan.
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.
Cours de HTML suite 3. Sommaire...  Les formulaires. Les formulaires.  Structure basique du formulaire, balise. Structure basique du formulaire, balise.
Master ESEEC Rédaction de documents (longs) structurés Patrice Séébold Bureau 109, Bât B.
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.
Premiers pas avec PowerPoint
Exposé - étude de cas - Le HTML.
Recherche Summon - HINARI (Module 3)
Voyage dans le logiciel de présentation de la suite libre.
Javascript et DOM Introduction Nicolas Chourot Informatique
Planche de présentation du projet
Eléments de présentation
INDESIGN Initiation Votre Formateur : Frantz.
I- ANALYSE DU BESOIN / Plan
Chapitre 2 Cascading Style Sheets CSS
Organisation bureautique
Feuilles de style Cascading Style Sheets
Les feuilles de style Qt
Titres 1 : rouge - fond jaune – gras
TIC (Techniques de l’Information et de la Communication)
Création de site web Feuilles de style.
HTML & css.
Nouvelles balises de structure
CRÉATION D’UN DIAPORAMA
Présentation sur ordinateur
Module 1 : Réaliser un site internet
Feuilles de style Cascading Style Sheets
  EXCEL FORMATION d'introduction.
Réaliser une présentation PowerPoint
Feuilles de style Cascading Style Sheets
Création Et Modification De La Structure De La Base De Données
Informations vous concernant :
3- Nouvelles pages d’accueil
Package R Markdown: Un outil pour générer des pages html avec R Studio
Guide Utilisateur. Guide Utilisateur.
CSS et DREAMWEAVER (Suite et fin)  Les liens
Le code à l’école Qu’est-ce que le codage informatique ?
Présentation sur ordinateur
G.ELGHOUMARI Université ParisII Panthéon-Assas
Comment utiliser l’application ?
03- Evaluation Access 2003 Cette évaluation comporte des QCM (1 seule réponse) et des Zones à déterminer dans des copies d’écran.
Programmation Web : Introduction à XML
Système de gestion de contenu de sites web
REDACTION DE DOCUMENTS SYNDICAUX
2/24/2019 Outils informatiques Séance 2 : les styles 1 1.
Donnez votre avis ! Depuis votre smartphone, sur :
5- Publication et rubriques
Conseils techniques pour votre PPT
Sur la base d’exemples, ce diaporama recense l’ensemble des
Exploitation de vos données
STS Web Services libres Gérer les services libres
Les feuille de styles.
Qu’est ce qu’une page web? Comment fonctionne un site web?
Site web, Ce qu’il faut savoir ?
Transcription de la présentation:

Le CSS Principe de séparation du contenu et de la mise en forme Lycée Marcel Rudloff 2016-2017 ISN Baptiste Cerdan & Geoffrey Kugelmann

Qu’est-ce que le CSS ? Et à quoi sert-il ? Pas de CSS sans HTML CSS = « Cascading Style Sheets » ou « Feuilles de Style en Cascade » Mise en forme d’une page HTML Création en 1996 Version la plus utilisée : CSS3 (même si il existe le CSS 4 depuis 2010)

Mise en place du CSS 3 manières de le placer : - fichier .css - dans l’entête du HTML <head> - dans les balises du HTML directement Syntaxe de base : <balise> { "propriété": "valeur"; } A placer dans le <head> de la page HTML afin de relier le CSS avec le HTML <link rel="stylesheet" href="style.css" />

Principe de base Code sans CSS Résultat sans CSS Résultat avec CSS Fichier .css

Cibler une balise On cible la balise <p> en lui donnant un nom [fichier .css] Résultat

Sélecteurs avancés Selecteur Effet * Sélectionner toutes les balises p h1 Permet de sélectionner toutes les balises <h1> contenues dans une balise <p> h1 +p Sélectionne la première balise <p> située après une balise <h1> P{title} Sélectionne les balises <p> qui ont title en attribut

Différents types de propriétés Remplacer color par une propriété Changer la taille : font-size Changer la police : font-family Changer la forme : font-style Souligner, barrer : text-decoration Alignement : text-align Couleur : color Bordure autour du texte : border Différents types de polices Exemple de code avec une propriété

Apparences dynamiques [Fichier CSS] Survol de la souris : hover Au clic de la souris : active Lorsque que le lien a déjà été consulté : visited

Ce qu’il faut retenir Pas de CSS sans HTML Travaille la forme d’une page WEB Cibler les balises HTML De nombreuses possibilités