CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : <style> body { background: orange; } </style> Ou lien vers fichier externe <link rel="stylesheet" href="style.css" />
CSS Les sélecteurs * : sélectionne toutes les balises, utile pour mettre des styles par défaut Nom_de_balise : exemple p { }.NomClasse { } : peut apparâtre plusieurs fois #Id { } : n'a qu'une seule occurence
CSS La hiérarchie Balise1 balise2 : sélectionne les balise2 à l'intérieur de balise1 Balise1 > balise2 : sélectionne les balise2 enfant de balise1 ( le + est le premier enfant)
CSS : Premier exercice Simple... sur le CV Appliquer une couleur de fond au body et au tableau Changer la couleur de police à une cellule identifiée par un id que vous aurez choisi. <p id=... > http://www.w3schools.com/tags/ref_colorpicker.asp
CSS : jouer avec le texte Style : font size: 14px; ou un pourcentage ou en em : font size: 1.3em; // cela permet de faire du relatif par rapport à une taille de base font family: Verdana, Times; Color: #AAAAAA; // hexadecimal (http://www.w3schools.com/tags/ref_colorpicker.asp)
CSS : texte text decoration : font style: oblique underline // souligné. line through // barré. overline // ligne au dessus. blink // clignotant none italic normal font weight: bold; (ou normal) line height : hauteur de ligne
CSS : link a {} : le lien en lui même a:visited {} : une fois visité a:hover : la souris passe au dessus du lien Cette pseudo classe est aussi vraie pour les autres éléments a:focus : (plus ou moins identique hover) a:active : lorsque l'on clique sur le lien (rappel : <a href= mailto:address@mail.com >)
CSS : IMG / figure <img => : définition de la taille en CSS : width / height : 100px ou en %. <figure> <img src="..." alt="mon texte alternatif" title= texte en survol > </figure> <figcaption>legende de ma figure</figcaption>
CSS : Exercice 2 Dans le CV, appliquer différents styles aux différentes parties en jouant sur la taille et couleur / justification du texte / police Première lettre du titre en taille différente :first letter Mettre la photo sous forme de figure Personnaliser le lien vers le mail
CSS : bloc Balise de mise en page Mode bloc : Div Mode inline : Span En appliquant un style sur ces balises, on agit sur le contenu et l'emplacement du contenu...
CSS : bordure Border : définir une bordure pour tout élément none, solid : un trait simple ; dotted : pointillés ; dashed : tirets ; double : bordure double ; Exemple : a { border: 2px dotted #446699; } On peut spécifier côté par côté : border top, border bottom, border left,border right
CSS : bordure Avoir des ombres par bloc : Box shadow : 4 paramètres Exemple : taille horizontal vertical dégradé couleur Arrondi { } box shadow: 10px 5px 10px orange; border radius: 50px; (ou CSS3pie.com :)
CSS : marges Marges intérieures padding : taille en pixel Marges extérieures marging : taille en pixel Pour centrer un élément : margin left: auto; margin right: auto;
CSS : Taille d'un element Comment calculer la taille d'un élément :
CSS : Exercice 3 Centrer le CV Aérer le CV Modifier l'aspect des bordures / fond Relief à la photo
CSS : Mise en page Grâce aux positionnements de div (ou balise dédiée HTML5) on structure la page
CSS : display display: bloc Ajoute un retour chariot avant / après l'objet (ex: balise <p>) display: inline Reste dans le flux courant (ex: balise <a>) display: inline block L'élément est un bloc mais se positionne dans le flux courant comme des cellules de tableau astuce : contenu qui dépasse d'une div : overflow: hidden ou auto
CSS : style float L'objet sort du flux courant et se positionne à gauche ou droite de la page et le flux courant englobe l'objet float: left ou float:right Il faut remettre le flux courant à zéro avec clear: both; Conseil : utiliser inline block + vertical align: top pour les mises en page.
CSS : positionnement http://www fourier.ujf grenoble.fr/~schevanc/position.html les propriétés de positionnement : top, bottom, left, right et des dimensions en pixel ou pourcentage.
CSS : Exercice 4 Reproduire ce schéma centré, 1000px de largeur...