Post on 05-Jul-2015
description
CSS 101 : Mise en forme
Le CSS ?
CSS ?
Les feuilles de style en cascade, généralement appelées CSS, forment un langage informatique qui décrit la présentation des documents HTMLSource : wikipedia.org
CSS ?
Tous les éléments de la page sont de couleur rouge.
Tous les titres de la page sont de couleur bleue.
Certains titres de la page sont de couleur bleue.
Mise en place
CSS dans une page HTML (1)
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red;">Lorem ipsum.</h1> </body> </html>
CSS dans une page HTML (2)
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>Lorem ipsum.</h1> </body> </html>
Fonctionnement
selecteur{ propriété: valeur; propriété: valeur; } !selecteur{ propriété: valeur; }
Première feuille de style
Première feuille de style
h1{ color: blue; font-size: 20px; } !p{ color: red; }
SelecteurPropriétés
Valeurs
Selecteurs
Une balise
h1{ color: blue; font-size: 20px; } !p{ color: red; }
Une class
.titre{ color: blue; font-size: 20px; } !.toto{ color: red; }
Une id
#titre{ color: blue; font-size: 20px; } !#toto{ color: red; }
Selection multiple
#titre, #super, #youpi{ color: blue; font-size: 20px; }
Selection via inclusion
#titre ul li a{ color: blue; font-size: 20px; }
Pseudo classe
#titre ul li:hover a{ color: red; }
Propriétés
Taille du texte
h1{ font-size: 20px; } !p{ font-size: 1.1em; }
Couleurs
h1{ color: red; } !p{ color: #f03838; }
Format du texte
h1{ text-decoration: underline; font-style: italic; } !a{ text-decoration: none; font-weight: bold; } !p{ color: #f03838; }
Police (1)
body{ font-family: "Open Sans", arial, sans-serif; }
Police (2)
<head> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> </head>
Police (3)
http://www.fontsquirrel.com/tools/webfont-generator
Alignement
h1{ text-align: center; } !h2{ text-align: right; }
Liste
ul{ list-style: none; } !ol{ list-style: square; }
Bordures
header{ border-bottom: 1px solid #303030; }
header{ border: 3px dashed red; }
Merci pour votre attention.
BibliographieBien construire sa hiérarchie de titres - Laurie-Anne http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/
HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/
CréditsHTML5 - Erick Dimas http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg
Hypertext Editing System (HES) console - Greg Lloyd http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg