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 :

Dimension: px

Commencer à balayer dès la page:

Download "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 :"

Jean-Charles Gamache
il y a 7 ans
Total affichages :

1 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" />

2 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

3 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)

4 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=... >

5 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 (

6 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

7 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 >)

8 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>

9 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

10 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...

11 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

12 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 :)

13 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;

14 CSS : Taille d'un element Comment calculer la taille d'un élément :

15 CSS : Exercice 3 Centrer le CV Aérer le CV Modifier l'aspect des bordures / fond Relief à la photo

16 CSS : Mise en page Grâce aux positionnements de div (ou balise dédiée HTML5) on structure la page

17 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

18 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.

19 CSS : positionnement fourier.ujf grenoble.fr/~schevanc/position.html les propriétés de positionnement : top, bottom, left, right et des dimensions en pixel ou pourcentage.

20 CSS : Exercice 4 Reproduire ce schéma centré, 1000px de largeur...

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles