Css

4 113 vues

Publié le

0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 113
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 707
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Css

  1. 1. Télécharger ce document en format pdf sur www.krymo.com © 2013 www.krymo.com Tous Droits réservés.
  2. 2. Télécharger ce document en format pdf sur www.krymo.comCSS TutorielDans notre tutoriel CSS, vous apprendrez comment utiliser les CSS pour contrôler le style et la présentation de plusieurs pagesWeb en même temps.Des exemples de chaque chapitreCe tutoriel CSS contient des centaines dexemples CSS.Avec notre éditeur en ligne, vous pouvez éditer le CSS, et cliquez sur un bouton pour afficher le résultat.Exemple CSSbody{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{ © 2013 www.krymo.com Tous Droits réservés.
  3. 3. Télécharger ce document en format pdf sur www.krymo.comfont-family:"Times New Roman";font-size:20px;}CSS PrésentationCe que vous devriez déjà savoirAvant de poursuivre, vous devriez avoir une compréhension de base de ce qui suit: •HTML / XHTMLSi vous voulez étudier ces sujets dabord, trouver des tutoriels sur notre page daccueil .Quest-ce que CSS? •CSS est synonyme de C ascading S tyle S heets •Les styles définissent la façon dafficher les éléments HTML •Styles ont été ajoutés à HTML 4.0 pour résoudre un problème •Les feuilles de style externes permet déconomiser beaucoup de travail •Les feuilles de style externes sont stockées dans des fichiers CSS © 2013 www.krymo.com Tous Droits réservés.
  4. 4. Télécharger ce document en format pdf sur www.krymo.comStyles Correction dun gros problèmeHTML na jamais été destiné à contenir des balises de mise en forme dun document.HTML visait à définir le contenu dun document, comme:<h1> Voici un titre </ h1><p> Ceci est un paragraphe. </ p>Lorsque les balises comme <font> et attributs de couleur ont été ajoutées à la spécification HTML 3.2, il a commencé un cauchemar pour les développeursweb. Développement de sites web de grande taille, où les polices et les informations de couleur ont été ajoutés à chaque page, est devenu un processus long etcoûteux.Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.En HTML 4.0, la mise en forme pourrait être retiré du document HTML, et stockées dans un fichier CSS séparé.Tous les navigateurs prennent en charge CSS aujourdhui.CSS permet déconomiser beaucoup de travail!COMMENT CSS définit des éléments HTML doivent être affichés.Les styles sont normalement enregistrées dans des fichiers CSS externes.. Feuilles de style externes vous permettent de modifier lapparence et la dispositionde toutes les pages dun site Web, tout en éditant un seul fichier! © 2013 www.krymo.com Tous Droits réservés.
  5. 5. Télécharger ce document en format pdf sur www.krymo.comCSS SyntaxeSyntaxe CSSUne règle CSS comporte deux parties principales: un sélecteur, et un ou plusieurs déclarations:Le sélecteur est normalement lélément HTML auquel vous voulez appliquer un style.Chaque déclaration se compose dune propriété et une valeur.La propriété est lattribut de style que vous souhaitez modifier. Chaque propriété a une valeur.Exemple CSSUne déclaration CSS se termine toujours par un point-virgule, et les groupes de déclaration sont entourés par des accolades: © 2013 www.krymo.com Tous Droits réservés.
  6. 6. Télécharger ce document en format pdf sur www.krymo.comp {color:red;text-align:center;}Pour rendre le CSS plus lisibles, vous pouvez mettre une déclaration sur chaque ligne, comme ceci:Exemplep{color:red;text-align:center;}Commentaires CSSLes commentaires permettent dexpliquer votre code, et peut vous aider lorsque vous modifiez le code source à une date ultérieure. Les commentaires sontignorés par les navigateurs.Un commentaire CSS commence par "/ *" et se termine par "* /", comme ceci:/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;} © 2013 www.krymo.com Tous Droits réservés.
  7. 7. Télécharger ce document en format pdf sur www.krymo.comCSS Id et classLes sélecteurs id et classEn plus de définir un style pour un élément HTML, CSS vous permet de spécifier vos propres sélecteurs appelé "id" et "class".Le sélecteur dIDLe sélecteur dID est utilisé pour spécifier un style pour un seul élément unique.Le sélecteur dID utilise lattribut id de lélément HTML, et est défini par un "#".La règle de style ci-dessous sera appliqué à lélément avec id = "para1":Exemple#para1{text-align:center;color:red;} Ne pas commencer un nom didentification dun certain nombre! Il ne fonctionne pas dans Mozilla / Firefox. © 2013 www.krymo.com Tous Droits réservés.
  8. 8. Télécharger ce document en format pdf sur www.krymo.comLe sélecteur de classeLe sélecteur de classe est utilisé pour spécifier un style pour un groupe déléments. Contrairement au sélecteur dID, le sélecteur de classe est le plus souventutilisé sur plusieurs éléments.Cela vous permet de définir un style particulier pour de nombreux éléments HTML avec la même classe.Le sélecteur de classe utilise lattribut HTML class, et elle est définie par un "."Dans lexemple ci-dessous, tous les éléments HTML avec class = "center" sera aligné au centre:Exemple.center {text-align:center;}Vous pouvez également spécifier que seuls des éléments HTML spécifiques devraient être touchés par une classe.Dans lexemple ci-dessous, tous les éléments p avec class = "center" sera aligné au centre:Exemplep.center {text-align:center;} © 2013 www.krymo.com Tous Droits réservés.
  9. 9. Télécharger ce document en format pdf sur www.krymo.comCSS Comment faire pour ...Quand un navigateur lit une feuille de style, il va formater le document selon elle.Trois façons dinsérer des CSSIl ya trois manières dinsérer une feuille de style: •Feuille de style externe •Feuille de style interne •Style en ligneFeuille de style externeUne feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer lapparence dunsite Web entier en modifiant un seul fichier. Chaque page doit être liée à la feuille de style en utilisant la balise link. La balise <link> va à lintérieur de lasection de tête: © 2013 www.krymo.com Tous Droits réservés.
  10. 10. Télécharger ce document en format pdf sur www.krymo.com<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>Une feuille de style externe peut être écrit dans nimporte quel éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Votre feuille de style doit êtresauvegardé avec lextension. Css. Un exemple de fichier de feuille de style est indiqué ci-dessous:hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");} Ne pas ajouter un espace entre la valeur de la propriété et de lunité (comme margin-left: 20 px). La manière correcte est: margin-left: 20pxFeuille de style interneUne feuille de style interne doit être utilisé quand un seul document a un style unique. Vous définissez les styles internes dans la section head dune pageHTML, en utilisant la balise <style>, comme ceci:<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>Styles en ligneUn style en ligne perd beaucoup des avantages des feuilles de style en mélange avec le contenu de présentation.Utilisez cette méthode avec modération! © 2013 www.krymo.com Tous Droits réservés.
  11. 11. Télécharger ce document en format pdf sur www.krymo.comPour utiliser les styles en ligne que vous utilisez lattribut style dans la balise concernée. Lattribut style peut contenir nimporte quelle propriété CSS. Lexemplemontre comment changer la couleur et la marge gauche dun paragraphe:<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Feuilles de style en plusieursSi certaines propriétés ont été fixés pour le même sélecteur dans différentes feuilles de style, les valeurs utilisées seront celles de la feuille de style plusspécifique.Par exemple, une feuille de style externe possède ces propriétés pour le sélecteur h3:h3{color:red;text-align:left;font-size:8pt;}Et une feuille de style interne possède ces propriétés pour le sélecteur h3:h3{text-align:right;font-size:20pt;}Si la page de la feuille de style interne est également liée à la feuille de style externe pour les propriétés H3 sera:color:red;text-align:right;font-size:20pt;La couleur est héritée de la feuille de style externe et le texte-alignement et la taille de police est remplacée par la feuille de style interne. © 2013 www.krymo.com Tous Droits réservés.
  12. 12. Télécharger ce document en format pdf sur www.krymo.comStyles multiples Will Cascade dans unLes styles peuvent être définis: •dans un élément HTML •à lintérieur de la section head dune page HTML •dans un fichier CSS externeAstuce: Même multiples feuilles de style externes peuvent être référencés dans un seul document HTML.Ordre de cascadeQuel est le style sera utilisé quand il ya plus dun style spécifié pour un élément HTML?De manière générale, nous pouvons dire que tous les styles seront «en cascade» dans une nouvelle feuille de style "virtuel" par les règles suivantes, où numéroquatre a la priorité la plus élevée: 1.Navigateur par défaut 2.Feuille de style externe 3.Feuille de style interne (dans la section head) 4.Style en ligne (à lintérieur dun élément HTML)Ainsi, un style en ligne (à lintérieur dun élément HTML) a la priorité la plus élevée, ce qui signifie quil va remplacer un style défini dans la balise <head>, oudans une feuille de style externe, ou dans un navigateur (valeur par défaut). Remarque: Si le lien vers la feuille de style externe est placé après la feuille de style interne dans <head> HTML, la feuille de style externe remplace lafeuille de style interne! © 2013 www.krymo.com Tous Droits réservés.
  13. 13. Télécharger ce document en format pdf sur www.krymo.comCSS ContextePropriétés de fond CSS sont utilisées pour définir les effets darrière-plan dun élément.Propriétés CSS utilisées pour des effets de fond: • background-color • background-image • background-repeat • background-attachment © 2013 www.krymo.com Tous Droits réservés.
  14. 14. Télécharger ce document en format pdf sur www.krymo.com • background-positionCouleur de fondLa propriété background-color définit la couleur darrière-plan dun élément.La couleur darrière-plan dune page est définie dans le corps de sélecteur:Exemplebody {background-color:#b0c4de;}Avec CSS, une couleur est le plus souvent défini par: •une valeur HEX - comme "# ff0000" •une valeur RVB - comme "rgb (255,0,0)" •un nom de couleur - comme "rouge"Regardez des valeurs de couleur CSS pour obtenir une liste complète des valeurs de couleurs possibles.Dans lexemple ci-dessous, le h1, p, et les éléments div avoir différentes couleurs de fond:Exempleh1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;} © 2013 www.krymo.com Tous Droits réservés.
  15. 15. Télécharger ce document en format pdf sur www.krymo.comImage de fondLa propriété background-image spécifie une image à utiliser comme arrière-plan dun élément.Par défaut, limage est répétée de manière à couvrir tout lélément.Limage de fond dune page peut être définie comme ceci:Exemplebody {background-image:url(paper.gif);}Voici un exemple dune mauvaise combinaison de texte et dimage de fond. Le texte est presque illisible:Exemplebody {background-image:url(bgdesert.jpg);}Image de fond - Répéter horizontalement ou verticalementPar défaut, la propriété background-image se répète une image à la fois horizontalement et verticalement.Certaines images doivent être répétées uniquement à lhorizontale ou à la verticale, ou ils vont paraître étrange, comme ceci: © 2013 www.krymo.com Tous Droits réservés.
  16. 16. Télécharger ce document en format pdf sur www.krymo.comExemplebody{background-image:url(gradient2.png);}Si limage est répétée seulement horizontalement (repeat-x), le fond sera plus belle:Exemplebody{background-image:url(gradient2.png);background-repeat:repeat-x;}Image de fond - Définir la position et no-repeat Lorsque vous utilisez une image de fond, utiliser une image qui ne perturbe pas le texte.Affichage de limage une seule fois est spécifié par la propriété background-repeat:Exemplebody{background-image:url(img_tree.png); © 2013 www.krymo.com Tous Droits réservés.
  17. 17. Télécharger ce document en format pdf sur www.krymo.combackground-repeat:no-repeat;}Dans lexemple ci-dessus, limage de fond est montré à la même place que le texte. Nous voulons changer la position de limage, de sorte quil ne perturbe pasle trop de texte.La position de limage est spécifiée par la propriété background-position:Exemplebody{background-image:url(img_tree.png);background-repeat:no-repeat;background-position:right top;}Contexte - Sténographie propriétéComme vous pouvez le voir dans les exemples ci-dessus, il existe de nombreuses propriétés à prendre en considération lorsquil sagit de milieux.Pour raccourcir le code, il est également possible de spécifier toutes les propriétés en une seule propriété. Cest ce quon appelle un raccourci.La propriété raccourcie pour le fond est tout simplement "fond":Exemplebody {background:#ffffff url(img_tree.png) no-repeat right top;} © 2013 www.krymo.com Tous Droits réservés.
  18. 18. Télécharger ce document en format pdf sur www.krymo.comLorsque vous utilisez la propriété raccourcie de lordre de la valeur des propriétés est la suivante: •background-color •background-image •background-repeat •-fond de fixation •background-positionCe nest pas grave si lune des valeurs de propriété est manquante, aussi longtemps que ceux qui sont présents sont dans cet ordre.Cet exemple utilise les CSS plus avancé. Jetez un coup doeil: Exemple avancéToutes les propriétés darrière-plan CSSPropriété Description fond Définit toutes les propriétés darrière-plan dans une déclaration background-attachment Définit si une image de fond est fixe ou défile avec le reste de la page background-color Définit la couleur darrière-plan dun élément background-image Définit limage darrière-plan dun élément © 2013 www.krymo.com Tous Droits réservés.
  19. 19. Télécharger ce document en format pdf sur www.krymo.combackground-position Règle la position de départ dune image de fondbackground-repeat Définit comment une image de fond sera répétéCSS formatage du texte LE FORMATAGE DU TEXTE Ce texte est stylé avec certaines des propriétés de formatage de texte. Le titre utilise le text-align,text-transform, et les propriétés des couleurs. Le paragraphe est indenté, alignés, et lespace entre lescaractères est spécifié. Le soulignement est supprimé de la "Essayez vous-même" lien. © 2013 www.krymo.com Tous Droits réservés.
  20. 20. Télécharger ce document en format pdf sur www.krymo.comCouleur du texteLa propriété de couleur est utilisé pour définir la couleur du texte.Avec CSS, une couleur est le plus souvent défini par: •une valeur HEX - comme "# ff0000" •une valeur RVB - comme "rgb (255,0,0)" •un nom de couleur - comme "rouge"Regardez des valeurs de couleur CSS pour obtenir une liste complète des valeurs de couleurs possibles.La couleur dune page par défaut est défini dans le sélecteur de corps.Exemplebody {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);} Pour le W3C CSS compatible: Si vous définissez la propriété de couleur, vous devez également définir la propriété background-color.Alignement du texteLa propriété text-align est utilisée pour définir lalignement horizontal dun texte.Le texte peut être centré ou aligné à gauche ou à droite ou justifié.Quand text-align est réglé à «justifier», chaque ligne est étirée de sorte que chaque ligne a une largeur égale, et les marges gauche et droite sont droites(comme dans les magazines et journaux). © 2013 www.krymo.com Tous Droits réservés.
  21. 21. Télécharger ce document en format pdf sur www.krymo.comExempleh1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}Décoration du texteLa propriété text-decoration est utilisée pour définir ou supprimer des décorations de texte.La propriété text-decoration est surtout utilisé pour enlever souligne des liens à des fins de conception:Exemplea {text-decoration:none;}Il peut également être utilisé pour décorer texte:Exempleh1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;} Il est recommandé de ne pas souligner le texte qui nest pas un lien, car cela confond souvent les utilisateurs. © 2013 www.krymo.com Tous Droits réservés.
  22. 22. Télécharger ce document en format pdf sur www.krymo.comTransformation du texteLa propriété text-transform est utilisé pour spécifier des lettres majuscules et minuscules dans un texte.Il peut être utilisé pour transformer tout en majuscules ou en minuscules, ou majuscule la première lettre de chaque mot.Exemplep.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}Indentation du texteLa propriété text-indentation est utilisée pour spécifier lindentation de la première ligne dun texte.Exemplep {text-indent:50px;} © 2013 www.krymo.com Tous Droits réservés.
  23. 23. Télécharger ce document en format pdf sur www.krymo.comToutes les propriétés du texte CSSPropriété Descriptioncolor Définit la couleur du textedirection Spécifie le texte de direction / écriture directionletter-spacing Augmente ou diminue lespace entre les caractères dans un texteline-height Définit la hauteur de la lignetext-align Spécifie lalignement horizontal du textetext-decoration Spécifie la décoration ajoutée au textetext-indent Spécifie lindentation de la première ligne de texte dans un bloc-text-shadow Spécifie leffet dombre ajoutée au textetext-transform Contrôle la casse du texteunicode-bidi © 2013 www.krymo.com Tous Droits réservés.
  24. 24. Télécharger ce document en format pdf sur www.krymo.com vertical-align Définit lalignement vertical dun élément white-space Indique comment un espace blanc à lintérieur dun élément est traité word-spacing Augmente ou diminue lespace entre les mots dans un texteCSS policeCSS propriétés de police définient la famille de polices, laudace, la taille et le style dun texte.Différence entre Serif et Sans-serif Polices Sur les écrans dordinateur, sans-serif sont considérés comme plus faciles à lire que les polices serif. © 2013 www.krymo.com Tous Droits réservés.
  25. 25. Télécharger ce document en format pdf sur www.krymo.comDes familles de polices CSSEn CSS, il existe deux types de noms de familles de polices: •famille générique - un groupe de familles de polices avec un look similaire (comme "Serif" ou "Monospace") •famille de police - une famille de polices spécifiques (comme "Times New Roman" ou "Arial")Famille générique Famille de polices Description Times New Roman Serif Polices Serif sont petites lignes aux extrémités sur certains caractères Géorgie Arial "Sans" signifie sans - ces polices nont pas les lignes aux extrémités des Sans-serif Verdana caractères Courier New Monospace Tous les caractères à espacement fixe ont la même largeur Lucida ConsoleFamille de policesLa famille de polices de texte est défini avec la propriété font-family.La propriété font-family devrait tenir plusieurs noms de polices comme un «repli» du système. Si le navigateur ne prend pas en charge la première police, iltente de la police suivante.Commencez par la police que vous voulez, et se terminent par une famille générique, pour laisser le navigateur choisir une police similaire dans la famillegénérique, sil ny a pas dautres polices sont disponibles.Remarque : Si le nom dune famille de polices est plus dun mot, il doit être placé entre guillemets, comme font-family: "Times New Roman".Plus dune famille de polices est spécifié dans une liste séparée par des virgules: © 2013 www.krymo.com Tous Droits réservés.
  26. 26. Télécharger ce document en format pdf sur www.krymo.comExemplep{font-family:"Times New Roman", Times, serif;}Pour les combinaisons de polices plus couramment utilisées, consultez notre page Web combinaisons de polices sécurité .Style de policeLa propriété font-style est surtout utilisé pour spécifier le texte en italique.Cette propriété dispose de trois valeurs: •normale - Le texte est affiché normalement •italique - Le texte est en italique •oblique - Le texte est «penchant» (oblique est très similaire en italique, mais moins pris en charge)Exemplep.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}Taille de la policeLa propriété font-size définit la taille du texte.Etre capable de gérer la taille du texte est important dans la conception web. Cependant, vous ne devriez pas utiliser les réglages de taille de la police à fairedes paragraphes ressembler rubriques ou rubriques air de paragraphes. © 2013 www.krymo.com Tous Droits réservés.
  27. 27. Télécharger ce document en format pdf sur www.krymo.comToujours utiliser les balises HTML appropriées, comme <h1> - <h6> pour les titres et <p> paragraphes.La valeur font-size peut être une taille absolue ou relative.Taille absolue: •Définit le texte à une taille spécifiée •Ne permet pas à un utilisateur de changer la taille du texte dans tous les navigateurs (mauvais pour des raisons daccessibilité) •Taille absolue est utile quand la taille physique de la sortie est connueTaille relative: •Définit la taille relative aux éléments environnants •Permet à un utilisateur de changer la taille du texte dans les navigateurs Si vous ne spécifiez pas une taille de police, la taille par défaut pour le texte normal, comme les paragraphes, est 16px (16px = 1em).Définir la taille de la police avec des pixelsRéglage de la taille du texte avec des pixels vous donne le plein contrôle sur la taille du texte:Exempleh1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}Lexemple ci-dessus permet à Internet Explorer 9, Firefox, Chrome, Opera et Safari pour redimensionner le texte.Remarque: Lexemple ci-dessus ne fonctionne pas dans IE, version antérieure 9.Le texte peut être redimensionné dans tous les navigateurs utilisant loutil de zoom (toutefois, cela redimensionne la page entière, et pas seulement le texte). © 2013 www.krymo.com Tous Droits réservés.
  28. 28. Télécharger ce document en format pdf sur www.krymo.comDéfinir la taille de la police Avec EmPour éviter le problème redimensionnement avec les anciennes versions dInternet Explorer, de nombreux développeurs em utiliser à la place des pixels.La taille de lunité em est recommandé par le W3C.1em est égale à la taille de la police en cours. La taille du texte par défaut dans les navigateurs est 16px. Ainsi, la taille par défaut est de 1em 16px.La taille peut être calculée à partir des pixels à lui en utilisant cette formule: Pixel / 16 = emExempleh1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */Dans lexemple ci-dessus, la taille du texte lui est le même que lexemple précédent en pixels. Cependant, la taille lui, il est possible dajuster la taille du textedans tous les navigateurs.Malheureusement, il ya encore un problème avec les anciennes versions dIE. Le texte devient plus grande quelle ne devrait lrendue plus grande lorsque, etplus petite que ce quelle devrait quand rendue plus petite.Utilisez une combinaison de pourcentage et EmLa solution qui fonctionne dans tous les navigateurs, est de fixer une taille de police par défaut en pour cent pour lélément body:Exemplebody {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;} © 2013 www.krymo.com Tous Droits réservés.
  29. 29. Télécharger ce document en format pdf sur www.krymo.comNotre code fonctionne maintenant beaucoup! Il montre la taille du texte même dans tous les navigateurs, et permet à tous les navigateurs pour zoomer ouredimensionner le texte!Toutes les propriétés de police CSSPropriété Description font Définit toutes les propriétés de la police dans une déclaration font-family Spécifie la famille de polices pour le texte font-size Spécifie la taille de la police du texte font-style Spécifie le style de police du texte font-variant Indique si oui ou non un texte devrait être affiché dans une police en petites capitales font-weight Spécifie le poids dune police © 2013 www.krymo.com Tous Droits réservés.
  30. 30. Télécharger ce document en format pdf sur www.krymo.comCSS LiensLiens peuvent être décorés de différentes manières.Liens StylingLes liens peuvent être stylé avec nimporte quelle propriété CSS (par exemple la couleur, font-family, fond, etc.)Spécial pour les liens est quils peuvent être présentées différemment en fonction de létat dans lequel ils sont poLes quatre États liens sont les suivants: •a: link - une vie normale, lien non visité •a: visited - un lien que lutilisateur a visité •a: hover - un lien lorsque lutilisateur souris au-dessus •a: active - un lien du moment où il est cliquéExemplea:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */Lors de la définition du style pour les états lien plusieurs, il ya quelques règles dordre: •a: hover doit venir après a: link et a: visited •a: active doit venir après a: hover © 2013 www.krymo.com Tous Droits réservés.
  31. 31. Télécharger ce document en format pdf sur www.krymo.comStyles de liens communsDans lexemple ci-dessus le lien change de couleur en fonction de quel état il est poPermet de passer par quelques-uns des autres moyens communs aux liens de style:Décoration du texteLa propriété text-decoration est surtout utilisé pour enlever souligne des liens:Exemplea:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}Couleur de fondLa propriété background-color définit la couleur de fond pour les liens:Exemplea:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;} © 2013 www.krymo.com Tous Droits réservés.
  32. 32. Télécharger ce document en format pdf sur www.krymo.comCSS listesLes propriétés de la liste CSS vous permettent de: •Définir différentes marques délément de liste pour les listes ordonnées •Définir différentes marques délément de liste pour les listes non ordonnées •Définir une image en tant que marqueur élément de la listeListeEn HTML, il existe deux types de listes: •les listes à puces - les éléments de la liste sont marquées avec des balles •listes ordonnées - les éléments de la liste sont identifiées par des numéros ou des lettresAvec CSS, les listes peuvent être décorés plus loin, et les images peuvent être utilisées comme marqueur élément de la liste.Différents marqueurs éléments de listeLe type de marqueur élément de la liste est spécifiée avec la propriété list-style-type:Exempleul.a {list-style-type: circle;}ul.b {list-style-type: square;} © 2013 www.krymo.com Tous Droits réservés.
  33. 33. Télécharger ce document en format pdf sur www.krymo.comol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}Certaines des valeurs sont pour les listes non ordonnées, et certains pour les listes ordonnées.Une image comme marqueur ditem ListPour spécifier une image en tant que marqueur élément de la liste, utilisez la propriété list-style-image:Exempleul{list-style-image: url(sqpurple.gif);}Lexemple ci-dessus ne saffiche pas égale dans tous les navigateurs. IE et Opera affichera limage marqueur un peu plus élevé que Firefox, Chrome et Safari.Si vous voulez que limage du marque-être placé aussi dans tous les navigateurs, une solution crossbrowser est expliqué ci-dessous.Solution CrossbrowserLexemple suivant affiche limage-repère également dans tous les navigateurs:Exempleul{list-style-type: none;padding: 0px; © 2013 www.krymo.com Tous Droits réservés.
  34. 34. Télécharger ce document en format pdf sur www.krymo.commargin: 0px;}ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px 5px;padding-left: 14px;}Exemple expliqué: •Pour ul: •Réglez le list-style-type none pour supprimer le marqueur élément de la liste •Réglez les padding et marge à 0px (pour compatibilité inter-navigateur) •Pour tous li ul: •Définissez lURL de limage et lafficher quune seule fois (no-repeat) •Positionnez limage où vous le souhaitez (à gauche 0px 5px en bas) •Placez le texte dans la liste avec padding-leftListe - propriété raccourcieIl est également possible de spécifier toutes les propriétés de la liste dans un seul, bien seul. Cest ce quon appelle un raccourci.La propriété raccourcie utilisé pour les listes, est la propriété list-style:Exempleul{list-style: square url("sqpurple.gif");} © 2013 www.krymo.com Tous Droits réservés.
  35. 35. Télécharger ce document en format pdf sur www.krymo.comLorsque vous utilisez la propriété raccourcie, lordre des valeurs sont les suivantes: •list-style-type •list-style-position (pour une description, voir le tableau ci-dessous propriétés CSS) •list-style-imageCe nest pas grave si lune des valeurs ci-dessus sont manquantes, aussi longtemps que les autres sont dans lordre spécifié.CSS tableauxLe regard dun tableau HTML peut être grandement améliorée avec CSS: Entreprise Contacter Pays Alfreds Futterkiste Anders Maria Allemagne Christina Berglunds snabbköp Suède Berglund Centro comercial Francisco Chang Mexique Moctezuma Ernst Handel Roland Mendel Autriche Island Trading Helen Bennett Royaume- © 2013 www.krymo.com Tous Droits réservés.
  36. 36. Télécharger ce document en format pdf sur www.krymo.com Uni Königlich Essen Philippe Cramer Allemagne Rire Celliers Bacchus Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italie Royaume- Nord / Sud Simon Crowther Uni Paris Spécialités Marie Bertrand France The Big Cheese Liz Nixon USA Vaffeljernet Palle Ibsen DanemarkBordures de tableauPour spécifier les bordures de tableau en CSS, utilisez la propriété border.Lexemple ci-dessous spécifie une bordure noire pour la table, th et td éléments:Exempletable, th, td{border: 1px solid black;}Notez que la table dans lexemple ci-dessus a des frontières doubles. Cest parce que la table et les éléments th / td avoir des frontières distinctes.Pour afficher une bordure simple pour la table, utilisez la propriété border-collapse. © 2013 www.krymo.com Tous Droits réservés.
  37. 37. Télécharger ce document en format pdf sur www.krymo.comRéduire les frontièresLa propriété border-collapse définit si les bordures de tableau sont regroupées en une seule bordure ou séparés:Exempletable{border-collapse:collapse;}table,th, td{border: 1px solid black;}Largeur et Hauteur de tableLa largeur et la hauteur dune table est définie par la largeur et height.Lexemple ci-dessous indique la largeur de la table à 100%, et la hauteur des éléments ième à 50px:Exempletable{width:100%;}th{height:50px;} © 2013 www.krymo.com Tous Droits réservés.
  38. 38. Télécharger ce document en format pdf sur www.krymo.comAlignement du texte tableauLe texte dans un tableau est aligné avec les propriétés text-align et vertical-align.La propriété text-align définit lalignement horizontal, comme à gauche, à droite ou au centre:Exempletd{text-align:right;}La propriété vertical-align définit lalignement vertical, comme en haut, en bas ou au milieu:Exempletd{height:50px;vertical-align:bottom;} © 2013 www.krymo.com Tous Droits réservés.
  39. 39. Télécharger ce document en format pdf sur www.krymo.comRembourrage tableauPour contrôler lespace entre la bordure et le contenu dune table, utilisez la propriété padding sur td et th éléments:Exempletd{padding:15px;}Table de couleursLexemple ci-dessous spécifie la couleur des bordures et la couleur du texte et le fond des éléments e:Exempletable, td, th{border:1px solid green;}th{background-color:green; © 2013 www.krymo.com Tous Droits réservés.
  40. 40. Télécharger ce document en format pdf sur www.krymo.comcolor:white;}CSS Box ModelLe modèle de boîte CSSTous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le «modèle de boîte» est utilisée quand on parle de conception et de mise enpage.Le modèle de boîte CSS est essentiellement une boîte qui senroule autour des éléments HTML, et il se compose de: marges, les bordures, le remplissage et lecontenu proprement dit.Le modèle de la boîte nous permet de placer une bordure autour des éléments et des éléments despace par rapport aux autres éléments.Limage ci-dessous illustre le modèle de boîte: © 2013 www.krymo.com Tous Droits réservés.
  41. 41. Télécharger ce document en format pdf sur www.krymo.comExplication des différentes parties: •Marge - Efface une zone autour de la frontière. La marge na pas de couleur de fond, il est complètement transparent •Frontière - Une bordure qui entoure le rembourrage et le contenu. La frontière est affectée par la couleur de fond de la boîte •Rembourrage - Efface une zone autour du contenu. Le rembourrage est affectée par la couleur de fond de la boîte •Contenu - Le contenu de la boîte, où le texte et les images apparaissentAfin de définir la largeur et la hauteur dun élément correctement dans tous les navigateurs, vous avez besoin de savoir comment fonctionne le modèle deboîte.La largeur et la hauteur dun élément Important: Lorsque vous définissez les propriétés width et height dun élément avec CSS, il vous suffit de définir la largeur et la hauteur de la zone decontenu . Pour calculer la taille réelle dun élément, vous devez également ajouter les espacements, bordures et les marges. © 2013 www.krymo.com Tous Droits réservés.
  42. 42. Télécharger ce document en format pdf sur www.krymo.comLa largeur totale de lélément dans lexemple ci-dessous 300px:width:250px;padding:10px;border:5px solid gray;margin:10px;Faisons le calcul:250px (largeur)+ 20px (padding gauche + droite)+ 10px (gauche + droite frontière)+ 20px (marge de gauche + droite)= 300pxSupposons que vous aviez seulement 250px de lespace. Faisons un élément avec une largeur totale de 250px:Exemplewidth:220px;padding:10px;border:5px solid gray;margin:0px;La largeur totale dun élément doit être calculée comme suit:Largeur de lélément total = largeur + padding gauche + droite + rembourrage bordure gauche + droite + bordure + marge de gauche marge de droiteLa hauteur totale dun élément doit être calculée comme suit:Hauteur de lélément Hauteur totale = padding + haut + padding-bottom + + bordure supérieure border-bottom + marge du haut en bas + marge © 2013 www.krymo.com Tous Droits réservés.
  43. 43. Télécharger ce document en format pdf sur www.krymo.comProblème de compatibilité des navigateursIE8 et versions antérieures dInternet Explorer, inclus padding et la bordure de la propriété width.Pour résoudre ce problème, ajoutez une balise <! DOCTYPE html> dans la page HTML.CSS BorderPropriétés des bordures CssLes propriétés de bordure CSS vous permettent de spécifier le style et la couleur de la bordure dun élément.Style de bordureLa propriété border-style spécifie le type de bordure à afficher. Aucun des propriétés de bordure naura aucun effet à moins que le border-style propriété est définie!border-style: les valeursnone: Définit aucune frontièrepointillé: Définit une bordure en pointillésen pointillés: Définit une bordure en pointilléssolide: Définit une bordure solidedoubler: Définit deux frontières. La largeur des deux bordures sont les mêmes que la valeur border-widthrainure: Définit une bordure 3D rainuré. Leffet dépend de la valeur border-colorcrête: Définit une bordure 3D striée. Leffet dépend de la valeur border-colorencadré: Définit une bordure 3D encadré. Leffet dépend de la valeur border-color © 2013 www.krymo.com Tous Droits réservés.
  44. 44. Télécharger ce document en format pdf sur www.krymo.comdépart: Définit une bordure 3D départ. Leffet dépend de la valeur border-colorLargeur de la bordureLa propriété border-width est utilisée pour définir la largeur de la bordure.La largeur est définie en pixels, ou en utilisant lune des trois valeurs prédéfinies: fines, moyennes ou épaisses.Remarque: Le "border-width" propriété ne fonctionne pas si elle est utilisée seule. Utilisez la fonction "border-style" propriété pour définir les frontièrespremier.Exemplep.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}Couleur de la bordureLa propriété border-color est utilisée pour définir la couleur de la bordure. La couleur peut être définie par: © 2013 www.krymo.com Tous Droits réservés.
  45. 45. Télécharger ce document en format pdf sur www.krymo.com •name - spécifiez un nom de couleur, comme "rouge" •RVB - spécifier une valeur RGB, comme "rgb (255,0,0)" •Hex - spécifiez une valeur hexadécimale, comme "# ff0000"Vous pouvez également définir la couleur de la bordure "transparent".Remarque: Le "border-color ne fonctionne pas si elle est utilisée seule. Utilisez la fonction "border-style" propriété pour définir les frontières premier.Exemplep.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}Border - côtés individuelsEn CSS, il est possible de spécifier des bordures différentes pour différents côtés:Exemplep{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted; © 2013 www.krymo.com Tous Droits réservés.
  46. 46. Télécharger ce document en format pdf sur www.krymo.comborder-left-style:solid;}Lexemple ci-dessus peut également être configuré avec une seule propriété:Exempleborder-style:dotted solid;La propriété border-style peut avoir de une à quatre valeurs. •border-style: dotted double continue en pointillés; •bordure supérieure est parsemée •bordure droite est solide •bordure inférieure est double •bordure gauche est en pointillés •border-style: dotted double continue; •bordure supérieure est parsemée •bordures droite et gauche sont solides •bordure inférieure est double •border-style: dotted solide; •bordures du haut et du bas sont parsemées •bordures droite et gauche sont solides •border-style: dotted; © 2013 www.krymo.com Tous Droits réservés.
  47. 47. Télécharger ce document en format pdf sur www.krymo.com •tous les quatre bords sont parsemésLa propriété border-style est utilisé dans lexemple ci-dessus. Cependant, il travaille également avec border-width et border-color.Border - Sténographie propriétéComme vous pouvez le voir dans les exemples ci-dessus, il existe de nombreuses propriétés à prendre en considération lorsquil sagit de frontières.Pour raccourcir le code, il est également possible de spécifier toutes les propriétés de bordure individuels dans une propriété. Cest ce quon appelle unraccourci.La propriété border est un raccourci pour les propriétés suivantes frontières individuelles: •border-width •border-style (requis) •border-colorExempleborder:5px solid red; © 2013 www.krymo.com Tous Droits réservés.
  48. 48. Télécharger ce document en format pdf sur www.krymo.comToutes les propriétés de bordure CSSPropriété Descriptionborder Définit toutes les propriétés de bordure dans une déclarationborder-bottom Définit toutes les propriétés de bordure de fond dans une déclarationborder-bottom-color Définit la couleur de la bordure inférieureborder-bottom-style Définit le style de la bordure inférieureborder-bottom-width Définit la largeur de la bordure inférieureborder-color Définit la couleur des quatre frontièresborder-left Définit toutes les propriétés de bordure gauche dans une déclarationborder-left-color Définit la couleur de la bordure gaucheborder-left-style Définit le style de la bordure gaucheborder-left-width Définit la largeur de la bordure gaucheborder-right Définit toutes les propriétés de bordure droite dans une déclaration © 2013 www.krymo.com Tous Droits réservés.
  49. 49. Télécharger ce document en format pdf sur www.krymo.comborder-right-color Définit la couleur de la bordure droiteborder-right-style Définit le style de la bordure droiteborder-right-width Définit la largeur de la bordure droiteborder-style Définit le style des quatre frontièresborder-top Définit toutes les propriétés de bordure supérieure dans une déclarationborder-top-color Définit la couleur de la bordure supérieureborder-top-style Définit le style de la bordure supérieureborder-top-width Définit la largeur de la bordure supérieureborder-width Définit la largeur des quatre frontières © 2013 www.krymo.com Tous Droits réservés.
  50. 50. Télécharger ce document en format pdf sur www.krymo.comCSS OutlineUn contour est une ligne dessinée autour déléments (en dehors des frontières) pour rendre lélément «se démarquer».Les propriétés de contour spécifier le style, la couleur, et la largeur dune esquisse.Schéma CSSUn contour est une ligne dessinée autour déléments (en dehors des frontières) pour rendre lélément «se démarquer».Cependant, la propriété outline est différente de la propriété border.Le contour nest pas une partie de dimensions dun élément; largeur totale de lélément et la hauteur nest pas affectée par la largeur du contour. © 2013 www.krymo.com Tous Droits réservés.
  51. 51. Télécharger ce document en format pdf sur www.krymo.comToutes les propriétés de contour CSSLe nombre dans le "CSS" colonne indique la version CSS la propriété est définie (CSS1 ou CSS2).Propriété Description Valeurs CSS outline-color Définit toutes les propriétés de contour dans une outline-style outline 2 déclaration outline-width inherit outline-color Définit la couleur dun contour color_name 2 hex_number rgb_number © 2013 www.krymo.com Tous Droits réservés.
  52. 52. Télécharger ce document en format pdf sur www.krymo.com invert inherit none dotted dashed solid doubleoutline-style Définit le style dun contour 2 groove ridge inset outset inherit thin medium thickoutline-width Définit la largeur dun contour 2 length inheritCSS MarginLes propriétés de marge CSS définissent lespace autour des éléments. © 2013 www.krymo.com Tous Droits réservés.
  53. 53. Télécharger ce document en format pdf sur www.krymo.comMargeLa marge efface une zone autour dun élément (en dehors de la frontière). La marge na pas de couleur de fond, et est complètement transparent.La marge du haut, droite, bas, gauche et peut être modifiée indépendamment à laide des propriétés distinctes.Une propriété margin raccourci peut égalementêtre utilisé pour modifier les marges à la fois.Valeurs possiblesValeur Description auto Le navigateur calcule une marge lenght Indique une marge en px, pt, cm, valeur par défaut est 0px etc Spécifie une marge en pour cent de la largeur de lélément % conteneur inherit Indique que la marge doit être héritée de lélément parent Il est possible dutiliser des valeurs négatives, à se chevaucher contenu.Marge - côtés individuelsEn CSS, il est possible de spécifier des marges différentes pour différents côtés: © 2013 www.krymo.com Tous Droits réservés.
  54. 54. Télécharger ce document en format pdf sur www.krymo.comExemplemargin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;Marge - Sténographie propriétéPour raccourcir le code, il est possible de spécifier toutes les propriétés de marge dans une propriété. Cest ce quon appelle un raccourci.La propriété raccourcie pour toutes les propriétés de marge est «marge»:Exemplemargin:100px 50px;La propriété margin peut avoir de une à quatre valeurs. •margin: 25px 50px 75px 100px; •marge du haut est 25px •marge de droite est 50px •marge du bas est 75px •marge gauche est de 100px •margin: 25px 50px 75px; •marge du haut est 25px •marges gauche et droite sont 50px •marge du bas est 75px © 2013 www.krymo.com Tous Droits réservés.
  55. 55. Télécharger ce document en format pdf sur www.krymo.com •margin: 50px 25px; •marges supérieure et inférieure sont 25px •marges gauche et droite sont 50px •margin: 25px; •tous les quatre marges sont 25pxToutes les propriétés CSS de margePropriété Description Un raccourci pour définir les propriétés de marge dans unemargin déclarationmargin-bottom Définit la marge inférieure dun élémentmargin-left Définit la marge gauche dun élémentmargin-right Définit la marge droite dun élémentmargin-top Définit la marge supérieure dun élément © 2013 www.krymo.com Tous Droits réservés.
  56. 56. Télécharger ce document en format pdf sur www.krymo.comCSS paddingLes propriétés de remplissage CSS définir lespace entre la bordure de lélément et lélément de contenu.RembourrageLe rembourrage efface une zone autour du contenu (à lintérieur de la frontière) dun élément. Le rembourrage est affectée par la couleur de fond de lélément.Le rembourrage haut, droite, bas, gauche et peut être modifiée indépendamment à laide des propriétés distinctes. Une propriété padding raccourci peutégalement être utilisé pour changer tous les rembourrages à la fois.Valeurs possiblesValeur Description Définit un rembourrage fixe (en pixels, pt, em, lenght etc) Définit un rembourrage en% de lélément % conteneurRembourrage - côtés individuelsEn CSS, il est possible de spécifier remplissage différent pour les différents côtés: © 2013 www.krymo.com Tous Droits réservés.
  57. 57. Télécharger ce document en format pdf sur www.krymo.comExemplepadding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;Rembourrage - Sténographie propriétéPour raccourcir le code, il est possible de spécifier toutes les propriétés de remplissage dans une propriété. Cest ce quon appelle un raccourci.La propriété raccourcie pour toutes les propriétés de remplissage est "padding":Exemplepadding:25px 50px;La propriété de rembourrage peut être une à quatre valeurs. •padding: 25px 50px 75px 100px; •rembourrage supérieur est 25px •marge droite est 50px •padding-bottom est 75px •padding gauche est 100px •padding: 25px 50px 75px; •rembourrage supérieur est 25px •rembourrages de droite et de gauche sont 50px •padding-bottom est 75px © 2013 www.krymo.com Tous Droits réservés.
  58. 58. Télécharger ce document en format pdf sur www.krymo.com •padding: 25px 50px; •rembourrages supérieure et inférieure sont 25px •rembourrages de droite et de gauche sont 50px •padding: 25px; •les quatre rembourrages sont 25pxToutes les propriétés Padding CSSPropriété Description Un raccourci pour définir toutes les propriétés de remplissage dans unepadding déclarationpadding-bottom Définit le remplissage dun élément de fondpadding-left Définit le remplissage gauche dun élémentpadding-right Définit la marge droite dun élémentpadding-top Définit les marges supérieure dun élément © 2013 www.krymo.com Tous Droits réservés.
  59. 59. Télécharger ce document en format pdf sur www.krymo.comCSS Groupement et de nidification SélecteursSélecteurs de regroupementDans les feuilles de style, il ya souvent des éléments du même style.h1{color:green;}h2{color:green;}p{color:green;}Afin de minimiser le code, vous pouvez grouper des sélecteurs.Séparez chaque sélecteur avec une virgule.Dans lexemple ci-dessous, nous avons regroupé les sélecteurs du code ci-dessus:Exempleh1,h2,p{color:green;} © 2013 www.krymo.com Tous Droits réservés.
  60. 60. Télécharger ce document en format pdf sur www.krymo.comSélecteurs de nidificationIl est possible dappliquer un style à un sélecteur dans un sélecteur.Dans lexemple ci-dessous, un style est spécifié pour tous les éléments p, un style est défini pour tous les éléments avec class = "marqués", et un troisièmestyle est spécifié que les éléments p de éléments avec class = "marqués":Exemplep{color:blue;text-align:center;}.marked{background-color:red;}.marked p{color:white;} © 2013 www.krymo.com Tous Droits réservés.
  61. 61. Télécharger ce document en format pdf sur www.krymo.comCSS DimensionLes propriétés de dimension CSS vous permettent de contrôler la hauteur et la largeur dun élément.Toutes les propriétés de dimension CSSLe nombre dans le "CSS" colonne indique la version CSS la propriété est définie (CSS1 ou CSS2).Propriété Description Valeurs CSS auto length hight Définit la hauteur dun élément 1 % inherit none length max-height Définit la hauteur maximale dun élément % 2 inherit max-width Définit la largeur maximale dun élément none 2 length % inherit © 2013 www.krymo.com Tous Droits réservés.
  62. 62. Télécharger ce document en format pdf sur www.krymo.com length min-height Définit la hauteur minimale dun élément % 2 inherit length min-width Définit la largeur minimale dun élément % 2 inherit auto length width Définit la largeur dun élément 1 % inheritCSS daffichage et de visibilitéLa propriété daffichage indique si / comment un élément est affiché, et la propriété de visibilité indique si un élément doit être visible oucaché. Encadré 1 Encadré 2 Encadré 3 © 2013 www.krymo.com Tous Droits réservés.
  63. 63. Télécharger ce document en format pdf sur www.krymo.comCacher un élément - display: none ou visibility: hiddenCacher un élément qui peut être fait en définissant la propriété daffichage sur "none" ou la propriété de visibilité pour "caché". Cependant, notez que ces deuxméthodes produisent des résultats différents:visibilité: les peaux cachés dun élément, mais il faudra encore prendre le même espace comme avant. Lélément sera caché, mais nen affectent pas la mise enpage.Exempleh1.hidden {visibility:hidden;}display: none cache un élément, et il ne prend aucun espace. Lélément sera caché, et la page saffiche comme si lélément nest pas là:Exempleh1.hidden {display:none;}CSS Display - Block et Inline élémentsUn élément de bloc est un élément qui prend toute la largeur disponible, et a un saut de ligne avant et après celui-ci.Exemples déléments de bloc: •<h1> •<p> •<div>Un élément en ligne ne prend que tant la largeur que nécessaire, et ne pas forcer les sauts de ligne. © 2013 www.krymo.com Tous Droits réservés.
  64. 64. Télécharger ce document en format pdf sur www.krymo.comExemples déléments en ligne: •<span> •<a>Modification du mode dun élément est affichéModification dun élément en ligne à un élément de type bloc, ou vice versa, peut être utile pour faire la page de regarder dune manière spécifique, et toujourssuivre les standards du web.Lexemple suivant affiche les éléments de liste que les éléments en ligne:Exempleli {display:inline;}Lexemple suivant affiche les éléments que couvrent les éléments de bloc:Exemplespan {display:block;}CSS de positionnementLe positionnement peut être difficile parfois! Les éléments peuvent se chevaucher! © 2013 www.krymo.com Tous Droits réservés.
  65. 65. Télécharger ce document en format pdf sur www.krymo.comPlacementLes propriétés de positionnement CSS vous permettent de positionner un élément. Il peut aussi placer un élément derrière lautre, et spécifier ce qui doit seproduire lorsque le contenu dun élément est trop grand.Les éléments peuvent être positionnés en utilisant le haut, le bas, la gauche et bonnes propriétés. Cependant, ces propriétés ne fonctionnera que si la propriétéposition est réglée en premier. Ils travaillent aussi différemment selon la méthode de positionnement.Il ya quatre différentes méthodes de positionnement.Positionnement statiqueÉléments HTML sont positionnés statique par défaut. Un élément statique positionné est toujours positionné selon le flux normal de la page.Statiques des éléments positionnés ne sont pas affectés par le haut, le bas, la gauche et bonnes propriétés.Positionnement fixeUn élément de position fixe est positionnée par rapport à la fenêtre de navigateur.Il ne bouge pas, même si la fenêtre défile:Exemplep.pos_fixed{position:fixed;top:30px;right:5px;} © 2013 www.krymo.com Tous Droits réservés.
  66. 66. Télécharger ce document en format pdf sur www.krymo.comRemarque: IE7 et IE8 soutenir la valeur fixe que si un DOCTYPE est spécifié!.Fixe des éléments positionnés sont retirés de la circulation normale. Le document et les autres éléments se comportent comme lélément fixe positionnénexiste pas.Fixes des éléments positionnés peuvent se chevaucher dautres éléments.Positionnement relatifUn élément positionné par rapport est positionné par rapport à sa position normale.Exempleh2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}La teneur en éléments en position relative peut être déplacé et se chevauchent dautres éléments, mais lespace réservé pour lélément est encore conservédans le flux normal. © 2013 www.krymo.com Tous Droits réservés.
  67. 67. Télécharger ce document en format pdf sur www.krymo.comExempleh2.pos_top{position:relative;top:-50px;}Éléments en position relative sont souvent utilisés comme blocs de conteneurs pour les éléments en position absolue.Positionnement absoluUn élément de position absolue est positionné par rapport au premier élément parent qui a une position autre que statique. Si aucun élément correspondantnest trouvé, le bloc conteneur est <html>:Exempleh2{position:absolute;left:100px;top:150px;}Éléments en position absolue sont retirés de la circulation normale. Le document et les autres éléments se comportent comme lélément en position absoluenexiste pas.Éléments en position absolue peuvent se chevaucher dautres éléments. © 2013 www.krymo.com Tous Droits réservés.
  68. 68. Télécharger ce document en format pdf sur www.krymo.comLes éléments qui se chevauchentLorsque les éléments sont positionnés en dehors du flux normal, ils peuvent se chevaucher dautres éléments.La propriété z-index spécifie lordre dempilement dun élément (élément qui doit être placé devant ou derrière les autres).Un élément peut avoir un ordre de la pile positive ou négative:Exempleimg{position:absolute;left:0px;top:0px;z-index:-1;}CSS floatQuest-ce que CSS float? Avec CSS float, un élément peut être poussé vers la gauche ou vers la droite, ce qui permet dautres éléments pour enrouler autour delle. Le flotteur est très souvent utilisé pour les images, mais il est également utile lorsque vous travaillez avec des configurations. Comment éléments flottants Les éléments sont flottait horizontalement, cela signifie quun élément ne peut être flotté à gauche ou à droite, pas haut ou le bas.Un élément flottant se déplace aussi loin vers la gauche ou la droite que possible. Habituellement, cela signifie tout le chemin vers la gauche ou la droite delélément contenant.Les éléments qui suivent lélément flottant iront autour de lui. © 2013 www.krymo.com Tous Droits réservés.
  69. 69. Télécharger ce document en format pdf sur www.krymo.comLes éléments dont lélément flottant ne sera pas affectée.Si une image est flottante vers la droite, un texte qui suit sécoule autour de lui, vers la gauche:Exempleimg{float:right;}Les éléments flottants côté de lautreSi vous placez plusieurs éléments flottants après lautre, ils vont flotter à côté de lautre sil ya de la place.Ici, nous avons fait une galerie dimages en utilisant la propriété float:Exemple.thumbnail{float:left;width:110px;height:90px;margin:5px;} © 2013 www.krymo.com Tous Droits réservés.
  70. 70. Télécharger ce document en format pdf sur www.krymo.comMise hors tension Float - Utilisation de ClearÉléments après lélément flottant iront autour de lui. Pour éviter cela, utilisez la bonne propriété .La propriété clear spécifie les côtés dun élément dautres éléments flottants ne sont pas autorisés.Ajouter une ligne de texte dans la galerie dimages, en utilisant la propriété clear:Exemple.text_line{clear:both;}CSS Alignement horizontal En CSS, plusieurs propriétés sont utilisées pour aligner des éléments horizontalement.Alignement des éléments de blocUn élément de bloc est un élément qui prend toute la largeur disponible, et a un saut de ligne avant et après celui-ci.Exemples déléments de bloc: •<h1> •<p> © 2013 www.krymo.com Tous Droits réservés.
  71. 71. Télécharger ce document en format pdf sur www.krymo.com •<div>Pour aligner le texte, voir le texte CSS chapitre.Dans ce chapitre, nous allons vous montrer comment aligner horizontalement les éléments de bloc à des fins de mise en page.Centre Alignement Utilisation de la propriété de margeÉléments de bloc peuvent être alignés en définissant les marges gauche et droite pour «auto».Remarque: En utilisant margin: auto ne fonctionne pas dans IE8 et plus tôt, à moins quun DOCTYPE est déclarée!.Réglage des marges gauche et droite pour automobile précise quils devraient se répartir la marge disponible également. Le résultat est un élément centré sur:Exemple.center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}Astuce: Alignement na aucun effet si la largeur est de 100%.Remarque: Dans IE5 il ya un bug de manipulation de marge pour les éléments de bloc. Pour rendre lexemple ci-dessus fonctionnent dans IE5, ajouter un peude code supplémentaire. Essayez vous-même © 2013 www.krymo.com Tous Droits réservés.
  72. 72. Télécharger ce document en format pdf sur www.krymo.comGauche et DroiteAlignementUtilisation de la propriété de positionUne méthode déléments dalignement est dutiliser le positionnement absolu:Exemple.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}Remarque: éléments positionnés avec Absolute sont retirés du flux normal et les éléments peuvent se chevaucher.Problèmes de compatibilité CrossbrowserLors de lalignement des éléments de ce genre, il est toujours une bonne idée de prédéfinir marge et le rembourrage pour lélément body. Ceci afin déviter desdifférences visuelles dans les différents navigateurs.Il ya un problème avec IE8 et versions antérieures, lorsque vous utilisez la propriété position. Si un élément conteneur (dans notre cas <divclass="container">) a une largeur spécifiée, et la déclaration! DOCTYPE est manquant, versions IE8 et versions antérieures ajouter une marge de 17px sur lecôté droit. Cela semble être un espace réservé à une barre de défilement. Toujours régler la déclaration DOCTYPE lorsque vous utilisez la propriété position!: © 2013 www.krymo.com Tous Droits réservés.
  73. 73. Télécharger ce document en format pdf sur www.krymo.comExemplebody{margin:0;padding:0;}.container{position:relative;width:100%;}.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}Gauche et DroiteAlignement aide de la propriété floatUne méthode déléments dalignement est dutiliser la propriété float: © 2013 www.krymo.com Tous Droits réservés.
  74. 74. Télécharger ce document en format pdf sur www.krymo.comExemple.right{float:right;width:300px;background-color:#b0e0e6;}Problèmes de compatibilité CrossbrowserLors de lalignement des éléments de ce genre, il est toujours une bonne idée de prédéfinir marge et le rembourrage pour lélément body. Ceci afin déviter desdifférences visuelles dans les différents navigateurs.Il ya un problème avec IE8 et plus tôt lors de lutilisation de la propriété float. Si la déclaration! DOCTYPE est manquant, versions IE8 et versions antérieuresajouter une marge de 17px sur le côté droit. Cela semble être un espace réservé à une barre de défilement. Toujours régler la déclaration DOCTYPE lorsquevous utilisez la propriété float!:Exemplebody{margin:0;padding:0;}.right{float:right;width:300px;background-color:#b0e0e6;} © 2013 www.krymo.com Tous Droits réservés.
  75. 75. Télécharger ce document en format pdf sur www.krymo.comCSS pseudo-classesCSS pseudo-classes sont utilisées pour ajouter des effets spéciaux à certains sélecteurs. © 2013 www.krymo.com Tous Droits réservés.
  76. 76. Télécharger ce document en format pdf sur www.krymo.comSyntaxeLa syntaxe de pseudo-classes:selector:pseudo-class {property:value;}Classes CSS peut également être utilisé avec les pseudo-classes:selector.class:pseudo-class {property:value;}pseudo-classesLes liens peuvent être affichés de différentes manières dans un navigateur CSS-portante:Exemplea:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */Note: a: hover doit venir après a: link et a: visited dans la définition CSS pour être efficace!Note: a: active doit venir après a: hover dans la définition CSS pour être efficace!Remarque: Pseudo-classes noms ne sont pas sensibles à la casse. © 2013 www.krymo.com Tous Droits réservés.
  77. 77. Télécharger ce document en format pdf sur www.krymo.comPseudo-classes et Classes CSSLes pseudo-classes peuvent être combinés avec des classes CSS:a.red:visited {color:#FF0000;}<a class="red" href="css_syntax.asp">CSS Syntax</a>Si le lien dans lexemple ci-dessus a été visité, il sera affiché en rouge.CSS - Le: first-child pseudo-classeL: first-child pseudo-classe correspond à un élément déterminé qui est le premier enfant dun autre élément.Remarque: Pour: first-child à travailler dans IE8 et plus tôt, un <DOCTYPE!> doit être déclaré.Correspondre à lélément <p> premierDans lexemple suivant, le sélecteur correspond à nimporte quel élément <p> qui est le premier enfant dun élément:Exemple<html><head><style>p:first-child{color:blue;}</style></head><body><p>I am a strong man.</p> © 2013 www.krymo.com Tous Droits réservés.
  78. 78. Télécharger ce document en format pdf sur www.krymo.com<p>I am a strong man.</p></body></html>Correspondre à lélément <i> première tous les éléments <p>Dans lexemple suivant, le sélecteur correspond à lélément <i> première tous les éléments <p>:Exemple<html><head><style>p > i:first-child{color:blue;}</style></head><body><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p></body></html> © 2013 www.krymo.com Tous Droits réservés.
  79. 79. Télécharger ce document en format pdf sur www.krymo.comFaire correspondre tous les éléments <i> dans tous les premiers éléments <p> enfantDans lexemple suivant, le sélecteur correspond à tous les éléments <i> dans les éléments <p> qui sont le premier enfant dun autre élément:Exemple<html><head><style>p:first-child i{color:blue;}</style></head><body><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p></body></html>CSS - Le: lang pseudo-classeLe: lang pseudo-classe permet de définir des règles spéciales pour les différentes langues.Remarque: IE8 soutient le: lang pseudo-classe que si un <DOCTYPE> est spécifié.Dans lexemple ci-dessous, le: lang classe définit les guillemets pour q éléments avec lang = "no": © 2013 www.krymo.com Tous Droits réservés.
  80. 80. Télécharger ce document en format pdf sur www.krymo.comExemple<html><head><style>q:lang(no) {quotes: "~" "~";}</style></head><body><p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p></body></html>CSS pseudo-élémentsCSS pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.SyntaxeLa syntaxe de pseudo-éléments:selector:pseudo-element {property:value;}Classes CSS peut également être utilisé avec les pseudo-éléments:selector.class:pseudo-element {property:value;} © 2013 www.krymo.com Tous Droits réservés.
  81. 81. Télécharger ce document en format pdf sur www.krymo.comLe: first-line pseudo-élémentLa "première ligne" pseudo-élément est utilisé pour ajouter un style spécial à la première ligne dun texte.Dans lexemple suivant le navigateur formats la première ligne de texte dans un élément p selon le style de la "première ligne" pseudo-élément (où lenavigateur rompt la ligne, dépend de la taille de la fenêtre du navigateur):Exemplep:first-line{color:#ff0000;font-variant:small-caps;}Note: La "première ligne" pseudo-élément ne peut être utilisé avec éléments de niveau bloc.Remarque: Les propriétés suivantes sappliquent à la "première ligne" pseudo-élément: •propriétés de la police •propriétés de couleur •propriétés de fond •word-spacing •letter-spacing •text-decoration •vertical-align •text-transform •line-height •effacerLe: first-letter pseudo-élémentLe "first-letter" pseudo-élément est utilisé pour ajouter un style spécial à la première lettre dun texte: © 2013 www.krymo.com Tous Droits réservés.
  82. 82. Télécharger ce document en format pdf sur www.krymo.comExemplep:first-letter{color:#ff0000;font-size:xx-large;}Remarque: Le "first-letter" pseudo-élément ne peut être utilisé avec éléments de niveau bloc.Remarque: Les propriétés suivantes sappliquent à la "first-letter" pseudo-élément: •propriétés de la police •propriétés de couleur •propriétés de fond •propriétés de marge •propriétés de remplissage •propriétés de bordure •text-decoration •vertical-align (uniquement si "float" est "none") •text-transform •line-height •flotter •effacerLes pseudo-éléments et classes CSSLes pseudo-éléments peuvent être combinés avec des classes CSS:p.article:first-letter {color:#ff0000;}<p class="article">A paragraph in an article</p> © 2013 www.krymo.com Tous Droits réservés.
  83. 83. Télécharger ce document en format pdf sur www.krymo.comLexemple ci-dessus va afficher la première lettre de tous les paragraphes avec class = "article", en rouge.Plusieurs pseudo-élémentsPlusieurs pseudo-éléments peuvent également être combinées.Dans lexemple suivant, la première lettre dun paragraphe sera rouge, dans une taille de police xx-large. Le reste de la première ligne sera bleu, et en petitescapitales. Le reste du paragraphe sera la taille de police par défaut et la couleur:Exemplep:first-letter{color:#ff0000;font-size:xx-large;}p:first-line{color:#0000ff;font-variant:small-caps;}CSS - Le: avant pseudo-élémentLa commande ": avant de« pseudo-élément peut être utilisé pour insérer du contenu avant que le contenu dun élément.Lexemple suivant insère une image devant chaque élément <h1>: © 2013 www.krymo.com Tous Droits réservés.
  84. 84. Télécharger ce document en format pdf sur www.krymo.comExempleh1:before{content:url(smiley.gif);}CSS - Le: après le Pseudo-élémentLa commande ": après" pseudo-élément peut être utilisé pour insérer un contenu après le contenu dun élément.Lexemple suivant insère une image après chaque élément <h1>:Exempleh1:after{content:url(smiley.gif);}CSS Barre de navigation Démo: Barre de navigation ACCEUIL ARTICLES FORUM CONTACTER © 2013 www.krymo.com Tous Droits réservés.
  85. 85. Télécharger ce document en format pdf sur www.krymo.comBarres de navigationAyant facile à utiliser de navigation est important pour nimporte quel site web.Avec CSS, vous pouvez transformer ennuyeux menus HTML dans les barres de navigation de bonne mine.Barre de navigation = Liste des liensUne barre de navigation doit HTML standard comme base.Dans nos exemples, nous construirons la barre de navigation à partir dune liste standard HTML.Une barre de navigation est essentiellement une liste de liens, donc lutilisation de la <ul> et éléments <li> fait logique:Exemple<ul><li><a href="acceuil.asp">Home</a></li><li><a href="articles.asp">News</a></li><li><a href="forum.asp">Contact</a></li><li><a href="contacter.asp">About</a></li></ul>Maintenant, nous allons extraire les balles et les marges et le remplissage de la liste: © 2013 www.krymo.com Tous Droits réservés.
  86. 86. Télécharger ce document en format pdf sur www.krymo.comExempleul{list-style-type:none;margin:0;padding:0;}Exemple expliqué: •list-style-type: none - Supprime les balles. Une barre de navigation na pas besoin de marqueurs de listes •Réglage des marges et padding à 0 pour supprimer les paramètres par défaut du navigateurLe code de lexemple ci-dessus est le code standard utilisé dans les deux barres de navigation verticales et horizontales.Barre de navigation verticalePour construire une barre de navigation verticale nous avons seulement besoin de styler les éléments <a>, en plus du code ci-dessus:Exemplea{display:block;width:60px;} © 2013 www.krymo.com Tous Droits réservés.
  87. 87. Télécharger ce document en format pdf sur www.krymo.comExemple expliqué: •display: block - Affichage des liens que les éléments de bloc rend la zone cliquable lien entier (et pas seulement le texte), et il nous permet de spécifier la largeur •Largeur: 60px - éléments de blocs ont toute la largeur disponible par défaut. Nous voulons spécifier une largeur de 60 pxAstuce: Jetez aussi un oeil à notre exemple totalement de style de navigation des barres verticales .Remarque: Toujours spécifier la largeur des éléments <a> dans une barre de navigation verticale. Si vous omettez la largeur, IE6 peut produire des résultatsinattendus.Barre de navigationIl ya deux façons de créer une barre de navigation horizontale. Utilisation en ligne ou flottant éléments de la liste.Les deux méthodes fonctionnent bien, mais si vous voulez que les liens soient de la même taille, vous devez utiliser la méthode flottante.Lister les objets en ligneUne façon de construire une barre de navigation horizontale est de spécifier les éléments que <li> en ligne, en plus de la "norme" code ci-dessus:Exempleli{display:inline;} © 2013 www.krymo.com Tous Droits réservés.

×