cours-css.pdf
Constituants des pages web. – La structure et le contenu (statique) : en HTML ou en XHTML. – La présentation : avec les feuilles de style CSS.
Initiation HTML et CSS - Stéphanie Walter - cours de 2016-2017
PDF etc.) Fonction d'un lien. Page 81. Initiation HTML CSS - Stéphanie Walter - 2016
Feuilles de style CSS
document HTML et feuille CSS peuvent être définis dans des fichiers séparés. ? construction du document (HTML) sans se p.enonce a[href$=”.pdf”] 1...l.
Thierry Lecroq
Cascading Style Sheet. Mise en forme. Séparation de la forme et du fond. HTML décrit le fond. CSS décrit la forme. Centralisation de l'aspect visuel.
Apprendre à coder en HTML - CSS
Pour cela il va tout d'abord falloir nous armer d'un fichier (au format zip
Cours PHP Accéléré
12 juil. 2022 Ce cours au format pdf. Tuto PHP en accéléré en pdf ... Nous pouvons bien sûr en proposer un plus simple avec le CSS adéquat.
HTML / CSS
COMMENT APPRENDRE ? • il faut en faire. • quelques sites : • il y a tout sans tuto : http://www
Les bases de HTML5
Vous pensez peut-être que vous n'êtes pas fait pour apprendre un langage informatique mais ne vous inquiétez pas : HTML et CSS sont des langages simples
Réalisez votre site web avec HTML 5 et CSS 3
Vous pensez peut-être que vous n'êtes pas fait pour apprendre un langage informatique mais ne vous inquiétez pas : HTML et CSS sont des langages simples
CSS avancées - Vers HTML 5 et CSS3
Les ressources de base pour débuter et apprendre à utiliser les CSS sont légion téléchargeable librement en version PDF ou PNG à l'adresse :.
Thierry Lecroq
Universite de Rouen
FRANCE
Thierry Lecroq (Univ. Rouen)CSS1 / 50
Plan1Generalites sur les CSS
2Les selecteurs
3Les proprietes
4le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen)CSS2 / 50
Cascading Style Sheet
Mise en forme
Separation de la forme et du fond
HTML decrit le fond
CSS decrit la forme
Centralisation de l'aspect visuel
Validation automatique :http://jigsaw.w3.org/css-validatorOn insere du CSS entre : Ou on lie un chier CSS avec : Commentaires : entre/*et*/Thierry Lecroq (Univ. Rouen)CSS3 / 50Format d'une classe CSS
Le CSS est forme d'un ensemble de classes. Une classe s'ecrit de cette facon : selecteur { propriete1 : valeur1 ; propriete2 : valeur2 ;Thierry Lecroq (Univ. Rouen)CSS4 / 50
Format d'une classe CSS
selecteurpeut ^etre :un nom de balise : les proprietes s'appliquent a toutes ces balises un nom generique (commencant par un point) : les attributss'appliquent aux balises utilisantclass="selecteur"(sans le point)un melange des deux, separes par des virgules : les attributs
s'appliquent suivant les deux points precedents Les proprietes designent les elements modies (couleur, bordure, fond, marges...) Les valeurs designent par quelles valeurs sont remplacees les proprietes designees.Thierry Lecroq (Univ. Rouen)CSS5 / 50
Exemple de CSS
style.css body { font-family : Arial ; } p { background-color : #F0C0C0 ; border : thin solid black ; } .titre { color : yellow ; }Thierry Lecroq (Univ. Rouen)CSS6 / 50
Exemple de CSS
index.xhtmlTitre en jaune
Un paragraphe avec bordure et couleur de fond
Thierry Lecroq (Univ. Rouen)CSS7 / 50
Les unites de longueur
px: pixel em: m-length ex: x-height in: pouce (inch) soit25;4mm cm: centimetre mm: millimetre pt: point soit1=72de pouce pc: pica soit 12 points donc1=6de pouceThierry Lecroq (Univ. Rouen)CSS8 / 50Les couleurs
mot-cle : black,blue,brown,cyan,gray, green,pink,purple, red, ... code hexadecimal : #999999, composantes RGB fonctionrgb():rgb(r,v,b)avec0r;v;b255Thierry Lecroq (Univ. Rouen)CSS9 / 50 Plan1Generalites sur les CSS
2Les selecteurs
3Les proprietes
4le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen)CSS10 / 50
Les selecteurs
Un seul element
p { color : yellow ; background-color : blue ; }Plusieurs elements
h1, div, p { color : yellow ; background-color : blue ; } div { margin : 20px ; }Le selecteur universel * { background-color : blue ; } p { background-color : gray ; }Thierry Lecroq (Univ. Rouen)CSS11 / 50
Les classes
.rouge { color : red ; } .rouge { color : red ; } div.rouge { color : yellow ; }.rouge { color : red ; } div.rouge { background-color : blue ; }Thierry Lecroq (Univ. Rouen)CSS12 / 50
Plusieurs classes au m^eme element
*.jaune { color : yellow ; } div.jaune { color : green ; } .classe1 { color : red ; } .classe2 { font-style : italic ; } .classe3 { background-color : blue ; }Thierry Lecroq (Univ. Rouen)CSS13 / 50
Plusieurs classes au m^eme element
Exemple
Titre en jaune
Texte en rouge
Texte en rouge et en italique
Texte en rouge sur fond bleu
Texte en vert et en italique sur fond bleu
Thierry Lecroq (Univ. Rouen)CSS14 / 50
Selecteur d'identiant id
div { color : black ; } #bleu { color : white ; background-color : blue ; }Texte en noir
Texte en blanc sur fond bleu
Thierry Lecroq (Univ. Rouen)CSS15 / 50
Les selecteurs d'attributs
acronym [title] { color : red ; background-color : gray ; } * [title] { background-color : yellow ; } h2 [title] [id] { background-color : yellow ; }Thierry Lecroq (Univ. Rouen)CSS16 / 50
Les selecteurs de valeur d'attribut
element [attribut1 = "valeur1"] [attribut2 = "valeur2"] ... { definition du style ; } element [attribut ~= "valeur"] { definition du style ; }Thierry Lecroq (Univ. Rouen)CSS17 / 50
Les selecteurs contextuels parent-descendant
element-parent element-descendant { definition du style ; } ul li ol li { background-color : red ; color : blue ; } element-parent > element-enfant { definition du style ; }On peut combiner
Thierry Lecroq (Univ. Rouen)CSS18 / 50
Les selecteurs d'elements adjacents
element1 + element2 { definition du style ; }Thierry Lecroq (Univ. Rouen)CSS19 / 50
Les pseudo-classes applicables aux liens
a:link a:visitedThierry Lecroq (Univ. Rouen)CSS20 / 50
Les pseudo-classes dynamiques
:focus :hover :activeThierry Lecroq (Univ. Rouen)CSS21 / 50
Pseudo-classes diverses
:first-child :lang (code) (ex : xml:lang = "code")Thierry Lecroq (Univ. Rouen)CSS22 / 50
Les pseudo-elements
:first-letter :first-line :before { content : "avant" ; definition du style ; } :after { content : "apres" ; definition du style ; }Thierry Lecroq (Univ. Rouen)CSS23 / 50
La decalaration!importantGestion des con
its * {color : black !important ; background-color : yellow ; } div {color : blue ; background-color : white ; }Thierry Lecroq (Univ. Rouen)CSS24 / 50
Plan1Generalites sur les CSS
2Les selecteurs
3Les proprietes
4le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen)CSS25 / 50
Les proprietes (1)
color : valeur ;: couleur d'avant-planbackground-color : valeur ;: couleur de fondbackground-image : url(URL) ;: image de fondThierry Lecroq (Univ. Rouen)CSS26 / 50
Les proprietes (2)
border-style : style{1,4} ;: stylepeut prendre les valeurs suivantes : I none: pas de bordureIhidden: idem sauf cellule de tableau
Idotted: pointilles courts
Idashed: tirets longs
Isolid: pleine continue
Idouble: 2 tarits paralleles continus
Igroove: bordure en creux
Iridge: bordure en relief
Iinset: bordure en creux dont chaque c^ote n'a qu'une seule couleurIoutset: bordure en relief dont chaque c^ote n'a qu'une seule couleurThierry Lecroq (Univ. Rouen)CSS27 / 50
Les proprietes (3)
On peut specier 1, 2 ou 4 valeurs
1 : 4 c^otes
2 : la premiere s'applique aux c^otes haut et bas, la deuxieme
s'applique aux c^otes droit et gauche3 : la premiere s'applique aux c^otes haut, la deuxieme s'applique aux
c^otes droit et gauche, la troisieme s'applique aux c^otes bas4 : haut, droit, bas, gaucheThierry Lecroq (Univ. Rouen)CSS28 / 50
Les proprietes (4)
border-width : width{1,4} ;: widthpeut prendre les valeurs suivantes : I thin: nImedium: moyen
Ithick: epais
Ivaleur numerique
On peut specier 1, 2 ou 4 valeurs
I1 : 4 c^otes
I2 : la premiere s'applique aux c^otes haut et bas, la deuxieme s'applique aux c^otes droit et gauche I3 : la premiere s'applique aux c^otes haut, la deuxieme s'applique aux c^otes droit et gauche, la troisieme s'applique aux c^otes bas I4 : haut, droit, bas, gaucheborder-color : couleur{1,4} ;:Thierry Lecroq (Univ. Rouen)CSS29 / 50Les proprietes (5)
border : width style couleur ;: h1 { border : 5px double blue ; } est equivalent a h1 { border-width : 5px ; border-style : double ; border-color : blue ; }Thierry Lecroq (Univ. Rouen)CSS30 / 50
Les proprietes (6)
margin : valeur {1,4} ;: marge (top, right, bottom, left)padding : valeur {1,4} ;: margeThierry Lecroq (Univ. Rouen)CSS31 / 50
Les proprietes (7)
outline-style : valeur {1,4} ;: style de contouroutline-width : valeur {1,4} ;: largeur de contouroutline-color : valeur {1,4} ;: couleur de contouroutline : width color style ;: contourThierry Lecroq (Univ. Rouen)CSS32 / 50
Les proprietes (8)
font-family : "valeur" ;: policefont-size : taille-absolue | taille-relative | taille | pourcent ;: taille xx-large taille-relative:smaller,largerfont-weight : normal | bold | bolder | lighter | x00 ;: graisseavecxentier tel que1x9font-style : normal | italic | oblique ;: stylefont-variant : normal | small-caps ;: petites capitalesThierry Lecroq (Univ. Rouen)CSS33 / 50
Les proprietes (9)
text-transform : none | uppercase | lowercase | capitalize ;: cassetext-decoration : none | underline | overline | line-through | blink ;:mise en evidenceline-height : normal | valeur | pourcent ;: interlignefont : style variant weight [size/line-height family] ;
Thierry Lecroq (Univ. Rouen)CSS34 / 50
Les proprietes (10)
text-align : left | center | right | justify ;: alignement horizontalletter-spacing : normal | valeur ;: espacement entre lescaracteresword-spacing : normal | valeur ;: espacement entre les motsThierry Lecroq (Univ. Rouen)CSS35 / 50
Plan