#4 css 101

30

Click here to load reader

description

#4 css 101

Transcript of #4 css 101

Page 1: #4 css 101

CSS 101 : Mise en forme

Page 2: #4 css 101

Le CSS ?

Page 3: #4 css 101

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

Page 4: #4 css 101

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.

Page 5: #4 css 101

Mise en place

Page 6: #4 css 101

CSS dans une page HTML (1)

<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red;">Lorem ipsum.</h1> </body> </html>

Page 7: #4 css 101

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>

Page 8: #4 css 101

Fonctionnement

Page 9: #4 css 101

selecteur{ propriété: valeur; propriété: valeur; } !selecteur{ propriété: valeur; }

Première feuille de style

Page 10: #4 css 101

Première feuille de style

h1{ color: blue; font-size: 20px; } !p{ color: red; }

SelecteurPropriétés

Valeurs

Page 11: #4 css 101

Selecteurs

Page 12: #4 css 101

Une balise

h1{ color: blue; font-size: 20px; } !p{ color: red; }

Page 13: #4 css 101

Une class

.titre{ color: blue; font-size: 20px; } !.toto{ color: red; }

Page 14: #4 css 101

Une id

#titre{ color: blue; font-size: 20px; } !#toto{ color: red; }

Page 15: #4 css 101

Selection multiple

#titre, #super, #youpi{ color: blue; font-size: 20px; }

Page 16: #4 css 101

Selection via inclusion

#titre ul li a{ color: blue; font-size: 20px; }

Page 17: #4 css 101

Pseudo classe

#titre ul li:hover a{ color: red; }

Page 18: #4 css 101

Propriétés

Page 19: #4 css 101

Taille du texte

h1{ font-size: 20px; } !p{ font-size: 1.1em; }

Page 20: #4 css 101

Couleurs

h1{ color: red; } !p{ color: #f03838; }

Page 21: #4 css 101

Format du texte

h1{ text-decoration: underline; font-style: italic; } !a{ text-decoration: none; font-weight: bold; } !p{ color: #f03838; }

Page 22: #4 css 101

Police (1)

body{ font-family: "Open Sans", arial, sans-serif; }

Page 23: #4 css 101

Police (2)

<head> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> </head>

Page 24: #4 css 101

Police (3)

http://www.fontsquirrel.com/tools/webfont-generator

Page 25: #4 css 101

Alignement

h1{ text-align: center; } !h2{ text-align: right; }

Page 26: #4 css 101

Liste

ul{ list-style: none; } !ol{ list-style: square; }

Page 27: #4 css 101

Bordures

header{ border-bottom: 1px solid #303030; }

header{ border: 3px dashed red; }

Page 28: #4 css 101

Merci pour votre attention.

Page 29: #4 css 101

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/

Page 30: #4 css 101

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