SlideShare une entreprise Scribd logo
1  sur  104
Télécharger ce document en format pdf sur www.krymo.com




                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Tutoriel

Dans notre tutoriel CSS, vous apprendrez comment utiliser les CSS pour contrôler le style et la présentation de plusieurs pages
Web en même temps.

Des exemples de chaque chapitre
Ce tutoriel CSS contient des centaines d'exemples CSS.

Avec notre éditeur en ligne, vous pouvez éditer le CSS, et cliquez sur un bouton pour afficher le résultat.

Exemple CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{



                                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

font-family:"Times New Roman";
font-size:20px;
}




CSS Présentation

Ce que vous devriez déjà savoir
Avant de poursuivre, vous devriez avoir une compréhension de base de ce qui suit:

        •HTML / XHTML

Si vous voulez étudier ces sujets d'abord, trouver des tutoriels sur notre page d'accueil .




Qu'est-ce que CSS?
        •CSS est synonyme de C ascading S tyle S heets
        •Les styles définissent la façon d'afficher 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.
Télécharger ce document en format pdf sur www.krymo.com




Styles Correction d'un gros problème
HTML n'a jamais été destiné à contenir des balises de mise en forme d'un document.

HTML visait à définir le contenu d'un 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éveloppeurs
web. 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 et
coû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 aujourd'hui.




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 l'apparence et la disposition
de toutes les pages d'un site Web, tout en éditant un seul fichier!




                                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Syntaxe

Syntaxe CSS
Une 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 d'une propriété et une valeur.

La propriété est l'attribut de style que vous souhaitez modifier. Chaque propriété a une valeur.




Exemple CSS
Une 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.
Télécharger ce document en format pdf sur www.krymo.com

p {color:red;text-align:center;}

Pour rendre le CSS plus lisibles, vous pouvez mettre une déclaration sur chaque ligne, comme ceci:

Exemple
p
{
color:red;
text-align:center;
}




Commentaires CSS
Les commentaires permettent d'expliquer votre code, et peut vous aider lorsque vous modifiez le code source à une date ultérieure. Les commentaires sont
ignoré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.
Télécharger ce document en format pdf sur www.krymo.com

CSS Id et class

Les sélecteurs id et class
En 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 d'ID
Le sélecteur d'ID est utilisé pour spécifier un style pour un seul élément unique.

Le sélecteur d'ID utilise l'attribut 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 d'identification d'un certain nombre! Il ne fonctionne pas dans Mozilla / Firefox.




                                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Le sélecteur de classe
Le sélecteur de classe est utilisé pour spécifier un style pour un groupe d'éléments. Contrairement au sélecteur d'ID, le sélecteur de classe est le plus souvent
utilisé 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 l'attribut HTML class, et elle est définie par un "."

Dans l'exemple 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 l'exemple ci-dessous, tous les éléments p avec class = "center" sera aligné au centre:

Exemple
p.center {text-align:center;}




                                                                                                                    © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Comment faire pour ...

Quand un navigateur lit une feuille de style, il va formater le document selon elle.




Trois façons d'insérer des CSS
Il ya trois manières d'insérer une feuille de style:

        •Feuille de style externe
        •Feuille de style interne
        •Style en ligne




Feuille de style externe
Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer l'apparence d'un
site 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 à l'intérieur de la
section de tête:




                                                                                                                       © 2013 www.krymo.com Tous Droits réservés.
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 n'importe quel éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Votre feuille de style doit être
sauvegardé avec l'extension. 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 l'unité (comme margin-left: 20 px). La manière correcte est: margin-left: 20px




Feuille de style interne
Une 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 d'une page
HTML, 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 ligne
Un 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.
Télécharger ce document en format pdf sur www.krymo.com

Pour utiliser les styles en ligne que vous utilisez l'attribut style dans la balise concernée. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple
montre comment changer la couleur et la marge gauche d'un paragraphe:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>




Feuilles de style en plusieurs
Si 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 plus
spé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.
Télécharger ce document en format pdf sur www.krymo.com



Styles multiples Will Cascade dans un
Les styles peuvent être définis:

        •dans un élément HTML
        •à l'intérieur de la section head d'une page HTML
        •dans un fichier CSS externe

Astuce: Même multiples feuilles de style externes peuvent être référencés dans un seul document HTML.


Ordre de cascade
Quel est le style sera utilisé quand il ya plus d'un 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éro
quatre 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 (à l'intérieur d'un élément HTML)

Ainsi, un style en ligne (à l'intérieur d'un élément HTML) a la priorité la plus élevée, ce qui signifie qu'il va remplacer un style défini dans la balise <head>, ou
dans 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 la
feuille de style interne!




                                                                                                                       © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Contexte

Propriétés de fond CSS sont utilisées pour définir les effets d'arrière-plan d'un é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.
Télécharger ce document en format pdf sur www.krymo.com

    •   background-position


Couleur de fond
La propriété background-color définit la couleur d'arrière-plan d'un élément.

La couleur d'arrière-plan d'une page est définie dans le corps de sélecteur:

Exemple
body {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 l'exemple ci-dessous, le h1, p, et les éléments div avoir différentes couleurs de fond:

Exemple
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}




                                                                                                         © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Image de fond
La propriété background-image spécifie une image à utiliser comme arrière-plan d'un élément.

Par défaut, l'image est répétée de manière à couvrir tout l'élément.

L'image de fond d'une page peut être définie comme ceci:

Exemple
body {background-image:url('paper.gif');}



Voici un exemple d'une mauvaise combinaison de texte et d'image de fond. Le texte est presque illisible:

Exemple
body {background-image:url('bgdesert.jpg');}




Image de fond - Répéter horizontalement ou verticalement
Par 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 à l'horizontale ou à la verticale, ou ils vont paraître étrange, comme ceci:



                                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
body
{
background-image:url('gradient2.png');
}



Si l'image est répétée seulement horizontalement (repeat-x), le fond sera plus belle:

Exemple
body
{
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 l'image une seule fois est spécifié par la propriété background-repeat:

Exemple
body
{
background-image:url('img_tree.png');




                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

background-repeat:no-repeat;
}


Dans l'exemple ci-dessus, l'image de fond est montré à la même place que le texte. Nous voulons changer la position de l'image, de sorte qu'il ne perturbe pas
le trop de texte.

La position de l'image est spécifiée par la propriété background-position:

Exemple
body
{
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 lorsqu'il s'agit de milieux.

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés en une seule propriété. C'est ce qu'on appelle un raccourci.

La propriété raccourcie pour le fond est tout simplement "fond":

Exemple
body {background:#ffffff url('img_tree.png') no-repeat right top;}


                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com



Lorsque vous utilisez la propriété raccourcie de l'ordre de la valeur des propriétés est la suivante:

        •background-color
        •background-image
        •background-repeat
        •-fond de fixation
        •background-position

Ce n'est pas grave si l'une 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 d'oeil: Exemple avancé




Toutes les propriétés d'arrière-plan CSS
Propriété                       Description

 fond                            Définit toutes les propriétés d'arriè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 d'arrière-plan d'un élément

 background-image                Définit l'image d'arrière-plan d'un élément



                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

background-position   Règle la position de départ d'une image de fond

background-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 l'espace entre les
caractères est spécifié. Le soulignement est supprimé de la "Essayez vous-même" lien.




                                                                                      © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Couleur du texte
La 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 d'une page par défaut est défini dans le sélecteur de corps.

Exemple
body {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 texte
La propriété text-align est utilisée pour définir l'alignement horizontal d'un 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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}




Décoration du texte
La 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:

Exemple
a {text-decoration:none;}



Il peut également être utilisé pour décorer texte:

Exemple
h1   {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 n'est pas un lien, car cela confond souvent les utilisateurs.




                                                                                                                      © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Transformation du texte
La 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.

Exemple
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}




Indentation du texte
La propriété text-indentation est utilisée pour spécifier l'indentation de la première ligne d'un texte.

Exemple
p {text-indent:50px;}




                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Toutes les propriétés du texte CSS
Propriété         Description

color             Définit la couleur du texte

direction         Spécifie le texte de direction / écriture direction

letter-spacing    Augmente ou diminue l'espace entre les caractères dans un texte

line-height       Définit la hauteur de la ligne

text-align        Spécifie l'alignement horizontal du texte

text-decoration   Spécifie la décoration ajoutée au texte

text-indent       Spécifie l'indentation de la première ligne de texte dans un bloc-

text-shadow       Spécifie l'effet d'ombre ajoutée au texte

text-transform    Contrôle la casse du texte

unicode-bidi



                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

 vertical-align       Définit l'alignement vertical d'un élément

 white-space          Indique comment un espace blanc à l'intérieur d'un élément est traité

 word-spacing         Augmente ou diminue l'espace entre les mots dans un texte



CSS police

CSS propriétés de police définient la famille de polices, l'audace, la taille et le style d'un texte.




Différence entre Serif et Sans-serif Polices




   Sur les écrans d'ordinateur, sans-serif sont considérés comme plus faciles à lire que les polices serif.




                                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Des familles de polices CSS
En 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 n'ont 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 Console




Famille de polices
La 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, il
tente 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 famille
générique, s'il n'y a pas d'autres polices sont disponibles.

Remarque : Si le nom d'une famille de polices est plus d'un mot, il doit être placé entre guillemets, comme font-family: "Times New Roman".

Plus d'une famille de polices est spécifié dans une liste séparée par des virgules:




                                                                                                                       © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
p{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 police
La 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)

Exemple
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}




Taille de la police
La 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 à faire
des paragraphes ressembler rubriques ou rubriques air de paragraphes.


                                                                                                                      © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Toujours 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 d'accessibilité)
        •Taille absolue est utile quand la taille physique de la sortie est connue

Taille 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 pixels
Réglage de la taille du texte avec des pixels vous donne le plein contrôle sur la taille du texte:

Exemple
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}



L'exemple ci-dessus permet à Internet Explorer 9, Firefox, Chrome, Opera et Safari pour redimensionner le texte.

Remarque: L'exemple ci-dessus ne fonctionne pas dans IE, version antérieure 9.

Le texte peut être redimensionné dans tous les navigateurs utilisant l'outil de zoom (toutefois, cela redimensionne la page entière, et pas seulement le texte).




                                                                                                                    © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Définir la taille de la police Avec Em
Pour éviter le problème redimensionnement avec les anciennes versions d'Internet Explorer, de nombreux développeurs em utiliser à la place des pixels.

La taille de l'unité 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 = em

Exemple
h1 {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 l'exemple ci-dessus, la taille du texte lui est le même que l'exemple précédent en pixels. Cependant, la taille lui, il est possible d'ajuster la taille du texte
dans tous les navigateurs.

Malheureusement, il ya encore un problème avec les anciennes versions d'IE. Le texte devient plus grande qu'elle ne devrait l'rendue plus grande lorsque, et
plus petite que ce qu'elle devrait quand rendue plus petite.




Utilisez une combinaison de pourcentage et Em
La 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:

Exemple
body {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.
Télécharger ce document en format pdf sur www.krymo.com



Notre code fonctionne maintenant beaucoup! Il montre la taille du texte même dans tous les navigateurs, et permet à tous les navigateurs pour zoomer ou
redimensionner le texte!




Toutes les propriétés de police CSS
Proprié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 d'une police




                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

CSS Liens

Liens peuvent être décorés de différentes manières.




Liens Styling
Les liens peuvent être stylé avec n'importe quelle propriété CSS (par exemple la couleur, font-family, fond, etc.)

Spécial pour les liens est qu'ils peuvent être présentées différemment en fonction de l'état dans lequel ils sont po

Les quatre États liens sont les suivants:

        •a:   link - une vie normale, lien non visité
        •a:   visited - un lien que l'utilisateur a visité
        •a:   hover - un lien lorsque l'utilisateur souris au-dessus
        •a:   active - un lien du moment où il est cliqué

Exemple
a: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 d'ordre:

        •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.
Télécharger ce document en format pdf sur www.krymo.com




Styles de liens communs
Dans l'exemple ci-dessus le lien change de couleur en fonction de quel état il est po

Permet de passer par quelques-uns des autres moyens communs aux liens de style:


Décoration du texte
La propriété text-decoration est surtout utilisé pour enlever souligne des liens:

Exemple
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}




Couleur de fond
La propriété background-color définit la couleur de fond pour les liens:

Exemple
a: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.
Télécharger ce document en format pdf sur www.krymo.com




CSS listes

Les 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 liste




Liste
En 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 lettres

Avec 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 liste
Le type de marqueur élément de la liste est spécifiée avec la propriété list-style-type:

Exemple
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}



                                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com


ol.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 d'item List
Pour spécifier une image en tant que marqueur élément de la liste, utilisez la propriété list-style-image:

Exemple
ul
{
list-style-image: url('sqpurple.gif');
}



L'exemple ci-dessus ne s'affiche pas égale dans tous les navigateurs. IE et Opera affichera l'image marqueur un peu plus élevé que Firefox, Chrome et Safari.

Si vous voulez que l'image du marque-être placé aussi dans tous les navigateurs, une solution crossbrowser est expliqué ci-dessous.


Solution Crossbrowser
L'exemple suivant affiche l'image-repère également dans tous les navigateurs:

Exemple
ul
{
list-style-type: none;
padding: 0px;


                                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

margin: 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 l'URL de l'image et l'afficher qu'une seule fois (no-repeat)
                •Positionnez l'image où vous le souhaitez (à gauche 0px 5px en bas)
                •Placez le texte dans la liste avec padding-left




Liste - propriété raccourcie
Il est également possible de spécifier toutes les propriétés de la liste dans un seul, bien seul. C'est ce qu'on appelle un raccourci.

La propriété raccourcie utilisé pour les listes, est la propriété list-style:

Exemple
ul
{
list-style: square url("sqpurple.gif");
}




                                                                                                                       © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com



Lorsque vous utilisez la propriété raccourcie, l'ordre 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-image

Ce n'est pas grave si l'une des valeurs ci-dessus sont manquantes, aussi longtemps que les autres sont dans l'ordre spécifié.




CSS tableaux

Le regard d'un 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.
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                Danemark



Bordures de tableau
Pour spécifier les bordures de tableau en CSS, utilisez la propriété border.

L'exemple ci-dessous spécifie une bordure noire pour la table, th et td éléments:

Exemple
table, th, td
{
border: 1px solid black;
}



Notez que la table dans l'exemple ci-dessus a des frontières doubles. C'est 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.
Télécharger ce document en format pdf sur www.krymo.com

Réduire les frontières
La propriété border-collapse définit si les bordures de tableau sont regroupées en une seule bordure ou séparés:

Exemple
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}




Largeur et Hauteur de table
La largeur et la hauteur d'une table est définie par la largeur et height.

L'exemple ci-dessous indique la largeur de la table à 100%, et la hauteur des éléments ième à 50px:

Exemple
table
{
width:100%;
}
th
{
height:50px;
}



                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Alignement du texte tableau
Le texte dans un tableau est aligné avec les propriétés text-align et vertical-align.

La propriété text-align définit l'alignement horizontal, comme à gauche, à droite ou au centre:

Exemple
td
{
text-align:right;
}


La propriété vertical-align définit l'alignement vertical, comme en haut, en bas ou au milieu:

Exemple
td
{
height:50px;
vertical-align:bottom;
}




                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Rembourrage tableau
Pour contrôler l'espace entre la bordure et le contenu d'une table, utilisez la propriété padding sur td et th éléments:

Exemple
td
{
padding:15px;
}




Table de couleurs
L'exemple ci-dessous spécifie la couleur des bordures et la couleur du texte et le fond des éléments e:

Exemple
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;



                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

color:white;
}




CSS Box Model

Le modèle de boîte CSS
Tous 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 en
page.

Le modèle de boîte CSS est essentiellement une boîte qui s'enroule autour des éléments HTML, et il se compose de: marges, les bordures, le remplissage et le
contenu proprement dit.

Le modèle de la boîte nous permet de placer une bordure autour des éléments et des éléments d'espace par rapport aux autres éléments.

L'image ci-dessous illustre le modèle de boîte:


                                                                                                                © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Explication des différentes parties:

        •Marge - Efface une zone autour de la frontière. La marge n'a 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 apparaissent

Afin de définir la largeur et la hauteur d'un élément correctement dans tous les navigateurs, vous avez besoin de savoir comment fonctionne le modèle de
boîte.




La largeur et la hauteur d'un élément
  Important: Lorsque vous définissez les propriétés width et height d'un élément avec CSS, il vous suffit de définir la largeur et la hauteur de la zone de
contenu . Pour calculer la taille réelle d'un élément, vous devez également ajouter les espacements, bordures et les marges.


                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

La largeur totale de l'élément dans l'exemple 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)
= 300px

Supposons que vous aviez seulement 250px de l'espace. Faisons un élément avec une largeur totale de 250px:

Exemple
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;




La largeur totale d'un é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 droite

La hauteur totale d'un é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.
Télécharger ce document en format pdf sur www.krymo.com

Problème de compatibilité des navigateurs
IE8 et versions antérieures d'Internet 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 Border

Propriétés des bordures Css
Les propriétés de bordure CSS vous permettent de spécifier le style et la couleur de la bordure d'un élément.


Style de bordure
La propriété border-style spécifie le type de bordure à afficher.

  Aucun des propriétés de bordure n'aura aucun effet à moins que le border-style propriété est définie!


border-style: les valeurs
none: Définit aucune frontière

pointillé: Définit une bordure en pointillés

en pointillés: Définit une bordure en pointillés

solide: Définit une bordure solide

doubler: Définit deux frontières. La largeur des deux bordures sont les mêmes que la valeur border-width

rainure: Définit une bordure 3D rainuré. L'effet dépend de la valeur border-color

crête: Définit une bordure 3D striée. L'effet dépend de la valeur border-color

encadré: Définit une bordure 3D encadré. L'effet dépend de la valeur border-color


                                                                                                                © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

départ: Définit une bordure 3D départ. L'effet dépend de la valeur border-color




Largeur de la bordure
La 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 l'une 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ères
premier.

Exemple
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}




Couleur de la bordure
La 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.
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.

Exemple
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}




Border - côtés individuels
En CSS, il est possible de spécifier des bordures différentes pour différents côtés:

Exemple
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;


                                                                                                                      © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

border-left-style:solid;
}




L'exemple ci-dessus peut également être configuré avec une seule propriété:

Exemple
border-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.
Télécharger ce document en format pdf sur www.krymo.com

                •tous les quatre bords sont parsemés

La propriété border-style est utilisé dans l'exemple 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 lorsqu'il s'agit 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é. C'est ce qu'on appelle un
raccourci.

La propriété border est un raccourci pour les propriétés suivantes frontières individuelles:

        •border-width
        •border-style (requis)
        •border-color

Exemple
border:5px solid red;




                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Toutes les propriétés de bordure CSS
Propriété             Description

border                Définit toutes les propriétés de bordure dans une déclaration

border-bottom         Définit toutes les propriétés de bordure de fond dans une déclaration

border-bottom-color   Définit la couleur de la bordure inférieure

border-bottom-style   Définit le style de la bordure inférieure

border-bottom-width   Définit la largeur de la bordure inférieure

border-color          Définit la couleur des quatre frontières

border-left           Définit toutes les propriétés de bordure gauche dans une déclaration

border-left-color     Définit la couleur de la bordure gauche

border-left-style     Définit le style de la bordure gauche

border-left-width     Définit la largeur de la bordure gauche

border-right          Définit toutes les propriétés de bordure droite dans une déclaration



                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

border-right-color   Définit la couleur de la bordure droite

border-right-style   Définit le style de la bordure droite

border-right-width   Définit la largeur de la bordure droite

border-style         Définit le style des quatre frontières

border-top           Définit toutes les propriétés de bordure supérieure dans une déclaration

border-top-color     Définit la couleur de la bordure supérieure

border-top-style     Définit le style de la bordure supérieure

border-top-width     Définit la largeur de la bordure supérieure

border-width         Définit la largeur des quatre frontières




                                                                                                © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Outline

Un   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 d'une esquisse.




Schéma CSS
Un 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 n'est pas une partie de dimensions d'un élément; largeur totale de l'élément et la hauteur n'est pas affectée par la largeur du contour.




                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Toutes les propriétés de contour CSS
Le 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 d'un contour                              color_name      2
                                                                                     hex_number
                                                                                     rgb_number


                                                                                                         © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

                                                                        invert
                                                                        inherit

                                                                        none
                                                                        dotted
                                                                        dashed
                                                                        solid
                                                                        double
outline-style       Définit le style d'un contour                                         2
                                                                        groove
                                                                        ridge
                                                                        inset
                                                                        outset
                                                                        inherit

                                                                        thin
                                                                        medium
                                                                        thick
outline-width       Définit la largeur d'un contour                                       2
                                                                        length
                                                                        inherit




CSS Margin

Les propriétés de marge CSS définissent l'espace autour des éléments.


                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com



Marge
La marge efface une zone autour d'un élément (en dehors de la frontière). La marge n'a pas de couleur de fond, et est complètement transparent.

La marge du haut, droite, bas, gauche et peut être modifiée indépendamment à l'aide des propriétés distinctes.Une propriété margin raccourci peut également
être utilisé pour modifier les marges à la fois.


Valeurs possibles
Valeur      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 d'utiliser des valeurs négatives, à se chevaucher contenu.




Marge - côtés individuels
En 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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
margin-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é. C'est ce qu'on appelle un raccourci.

La propriété raccourcie pour toutes les propriétés de marge est «marge»:

Exemple
margin: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.
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 25px




Toutes les propriétés CSS de marge
Propriété       Description

                 Un raccourci pour définir les propriétés de marge dans une
margin
                 déclaration

margin-bottom    Définit la marge inférieure d'un élément

margin-left      Définit la marge gauche d'un élément

margin-right     Définit la marge droite d'un élément

margin-top       Définit la marge supérieure d'un élément




                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

CSS padding

Les propriétés de remplissage CSS définir l'espace entre la bordure de l'élément et l'élément de contenu.




Rembourrage
Le rembourrage efface une zone autour du contenu (à l'intérieur de la frontière) d'un é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 à l'aide des propriétés distinctes. Une propriété padding raccourci peut
également être utilisé pour changer tous les rembourrages à la fois.


Valeurs possibles
Valeur       Description

             Définit un rembourrage fixe (en pixels, pt, em,
 lenght
             etc)

             Définit un rembourrage en% de l'élément
 %
             conteneur




Rembourrage - côtés individuels
En 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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
padding-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é. C'est ce qu'on appelle un raccourci.

La propriété raccourcie pour toutes les propriétés de remplissage est "padding":

Exemple
padding: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.
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 25px




Toutes les propriétés Padding CSS
Propriété          Description

                    Un raccourci pour définir toutes les propriétés de remplissage dans une
padding
                    déclaration

padding-bottom      Définit le remplissage d'un élément de fond

padding-left        Définit le remplissage gauche d'un élément

padding-right       Définit la marge droite d'un élément

padding-top         Définit les marges supérieure d'un élément




                                                                                              © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Groupement et de nidification Sélecteurs

Sélecteurs de regroupement
Dans 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 l'exemple ci-dessous, nous avons regroupé les sélecteurs du code ci-dessus:

Exemple
h1,h2,p
{
color:green;
}


                                                                                                  © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




Sélecteurs de nidification
Il est possible d'appliquer un style à un sélecteur dans un sélecteur.

Dans l'exemple 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ème
style est spécifié que les éléments p de éléments avec class = "marqués":

Exemple
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}




                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS Dimension

Les propriétés de dimension CSS vous permettent de contrôler la hauteur et la largeur d'un élément.


Toutes les propriétés de dimension CSS
Le 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 d'un élément                                                               1
                                                                                                  %
                                                                                                  inherit

                                                                                                  none
                                                                                                  length
 max-height                Définit la hauteur maximale d'un élément                               %                      2
                                                                                                  inherit



 max-width                 Définit la largeur maximale d'un élément                               none                   2
                                                                                                  length
                                                                                                  %
                                                                                                  inherit


                                                                                                            © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

                                                                                         length
 min-height              Définit la hauteur minimale d'un élément                        %                         2
                                                                                         inherit

                                                                                         length
 min-width               Définit la largeur minimale d'un élément                        %                         2
                                                                                         inherit

                                                                                         auto
                                                                                         length
 width                   Définit la largeur d'un élément                                                           1
                                                                                         %
                                                                                         inherit




CSS d'affichage et de visibilité

La propriété d'affichage indique si / comment un élément est affiché, et la propriété de visibilité indique si un élément doit être visible ou
caché.

    Encadré 1          Encadré 2            Encadré 3




                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Cacher un élément - display: none ou visibility: hidden
Cacher un élément qui peut être fait en définissant la propriété d'affichage sur "none" ou la propriété de visibilité pour "caché". Cependant, notez que ces deux
méthodes produisent des résultats différents:

visibilité: les peaux cachés d'un élément, mais il faudra encore prendre le même espace comme avant. L'élément sera caché, mais n'en affectent pas la mise en
page.

Exemple
h1.hidden {visibility:hidden;}



display: none cache un élément, et il ne prend aucun espace. L'élément sera caché, et la page s'affiche comme si l'élément n'est pas là:

Exemple
h1.hidden {display:none;}




CSS Display - Block et Inline éléments
Un é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.
Télécharger ce document en format pdf sur www.krymo.com

Exemples d'éléments en ligne:

        •<span>
        •<a>




Modification du mode d'un élément est affiché
Modification d'un élément en ligne à un élément de type bloc, ou vice versa, peut être utile pour faire la page de regarder d'une manière spécifique, et toujours
suivre les standards du web.

L'exemple suivant affiche les éléments de liste que les éléments en ligne:

Exemple
li {display:inline;}



L'exemple suivant affiche les éléments que couvrent les éléments de bloc:

Exemple
span {display:block;}




CSS de positionnement

Le positionnement peut être difficile parfois!



 Les éléments peuvent se
 chevaucher!
                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Placement

Les propriétés de positionnement CSS vous permettent de positionner un élément. Il peut aussi placer un élément derrière l'autre, et spécifier ce qui doit se
produire lorsque le contenu d'un é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 fixe
Un é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:

Exemple
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}




                                                                                                                   © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com



Remarque: 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é
n'existe pas.

Fixes des éléments positionnés peuvent se chevaucher d'autres éléments.




Positionnement relatif
Un élément positionné par rapport est positionné par rapport à sa position normale.

Exemple
h2.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 d'autres éléments, mais l'espace réservé pour l'élément est encore conservé
dans le flux normal.




                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
h2.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 absolu
Un é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 correspondant
n'est trouvé, le bloc conteneur est <html>:

Exemple
h2
{
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 absolue
n'existe pas.

Éléments en position absolue peuvent se chevaucher d'autres éléments.




                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Les éléments qui se chevauchent
Lorsque les éléments sont positionnés en dehors du flux normal, ils peuvent se chevaucher d'autres éléments.

La propriété z-index spécifie l'ordre d'empilement d'un é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:

Exemple
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

CSS float

Qu'est-ce que CSS float?
                     Avec CSS float, un élément peut être poussé vers la gauche ou vers la droite, ce qui permet d'autres éléments pour enrouler autour d'elle.

                     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 qu'un é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 de
l'é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.
Télécharger ce document en format pdf sur www.krymo.com

Les é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:

Exemple
img
{
float:right;
}




Les éléments flottants côté de l'autre
Si vous placez plusieurs éléments flottants après l'autre, ils vont flotter à côté de l'autre s'il ya de la place.

Ici, nous avons fait une galerie d'images 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.
Télécharger ce document en format pdf sur www.krymo.com

Mise 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 d'un élément d'autres éléments flottants ne sont pas autorisés.

Ajouter une ligne de texte dans la galerie d'images, 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 bloc
Un é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.
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 qu'un DOCTYPE est déclarée!.

Réglage des marges gauche et droite pour automobile précise qu'ils 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 n'a 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 l'exemple ci-dessus fonctionnent dans IE5, ajouter un peu
de code supplémentaire. Essayez vous-même




                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Gauche et Droite

Alignement

Utilisation de la propriété de position
Une méthode d'éléments d'alignement est d'utiliser 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é Crossbrowser
Lors de l'alignement 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 des
diffé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 <div
class="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 le
cô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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}




Gauche et Droite

Alignement aide de la propriété float
Une méthode d'éléments d'alignement est d'utiliser la propriété float:




                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}




Problèmes de compatibilité Crossbrowser
Lors de l'alignement 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 des
différences visuelles dans les différents navigateurs.

Il ya un problème avec IE8 et plus tôt lors de l'utilisation de la propriété float. Si la déclaration! DOCTYPE est manquant, versions IE8 et versions antérieures
ajouter 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 lorsque
vous utilisez la propriété float!:

Exemple
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}


                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




CSS pseudo-classes

CSS pseudo-classes sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.


                                                                                            © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com



Syntaxe
La 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-classes
Les liens peuvent être affichés de différentes manières dans un navigateur CSS-portante:

Exemple
a: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.
Télécharger ce document en format pdf sur www.krymo.com

Pseudo-classes et Classes CSS
Les 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 l'exemple ci-dessus a été visité, il sera affiché en rouge.




CSS - Le: first-child pseudo-classe
L': first-child pseudo-classe correspond à un élément déterminé qui est le premier enfant d'un 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> premier
Dans l'exemple suivant, le sélecteur correspond à n'importe quel élément <p> qui est le premier enfant d'un é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.
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 l'exemple 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.
Télécharger ce document en format pdf sur www.krymo.com

Faire correspondre tous les éléments <i> dans tous les premiers éléments <p> enfant
Dans l'exemple suivant, le sélecteur correspond à tous les éléments <i> dans les éléments <p> qui sont le premier enfant d'un 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-classe
Le: 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 l'exemple 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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
<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éments

CSS pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.




Syntaxe
La 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.
Télécharger ce document en format pdf sur www.krymo.com

Le: first-line pseudo-élément
La "première ligne" pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d'un texte.

Dans l'exemple 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ù le
navigateur rompt la ligne, dépend de la taille de la fenêtre du navigateur):

Exemple
p: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 s'appliquent à 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
        •effacer




Le: first-letter pseudo-élément
Le "first-letter" pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d'un texte:


                                                                                                                 © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
p: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 s'appliquent à 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
       •effacer




Les pseudo-éléments et classes CSS
Les 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.
Télécharger ce document en format pdf sur www.krymo.com

L'exemple ci-dessus va afficher la première lettre de tous les paragraphes avec class = "article", en rouge.




Plusieurs pseudo-éléments
Plusieurs pseudo-éléments peuvent également être combinées.

Dans l'exemple suivant, la première lettre d'un paragraphe sera rouge, dans une taille de police xx-large. Le reste de la première ligne sera bleu, et en petites
capitales. Le reste du paragraphe sera la taille de police par défaut et la couleur:

Exemple
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}




CSS - Le: avant pseudo-élément
La commande ": avant de« pseudo-élément peut être utilisé pour insérer du contenu avant que le contenu d'un élément.

L'exemple suivant insère une image devant chaque élément <h1>:




                                                                                                                    © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
h1:before
{
content:url(smiley.gif);
}




CSS - Le: après le Pseudo-élément
La commande ": après" pseudo-élément peut être utilisé pour insérer un contenu après le contenu d'un élément.

L'exemple suivant insère une image après chaque élément <h1>:

Exemple
h1: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.
Télécharger ce document en format pdf sur www.krymo.com




Barres de navigation
Ayant facile à utiliser de navigation est important pour n'importe quel site web.

Avec CSS, vous pouvez transformer ennuyeux menus HTML dans les barres de navigation de bonne mine.




Barre de navigation = Liste des liens
Une barre de navigation doit HTML standard comme base.

Dans nos exemples, nous construirons la barre de navigation à partir d'une liste standard HTML.

Une barre de navigation est essentiellement une liste de liens, donc l'utilisation 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.
Télécharger ce document en format pdf sur www.krymo.com

Exemple
ul
{
list-style-type:none;
margin:0;
padding:0;
}



Exemple expliqué:

       •list-style-type: none - Supprime les balles. Une barre de navigation n'a pas besoin de marqueurs de listes
       •Réglage des marges et padding à 0 pour supprimer les paramètres par défaut du navigateur

Le code de l'exemple ci-dessus est le code standard utilisé dans les deux barres de navigation verticales et horizontales.




Barre de navigation verticale
Pour construire une barre de navigation verticale nous avons seulement besoin de styler les éléments <a>, en plus du code ci-dessus:

Exemple
a
{
display:block;
width:60px;
}


                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple 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 px

Astuce: 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ésultats
inattendus.




Barre de navigation
Il 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 ligne
Une 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:

Exemple
li
{
display:inline;
}




                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Exemple expliqué:

       •display: inline; - Par défaut, les éléments sont <li> éléments de bloc. Ici, on enlève les sauts de ligne avant et après chaque élément de la liste, de les
       afficher sur une seule ligne

Astuce: Jetez aussi un oeil à notre exemple de style de navigation entièrement barre horizontale .


Lister les objets flottants
Dans l'exemple ci-dessus les liens ont des largeurs différentes.

Pour tous les liens pour avoir une largeur égale, les éléments flottent <li> et spécifier une largeur pour les éléments <a>:

Exemple
li
{
float:left;
}
a
{
display:block;
width:60px;
}




CSS Galerie d'images

CSS peut être utilisé pour créer une galerie d'images.




                                                                                                                     © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com




             Ajouter une description de l'image ici




             Ajouter une description de l'image ici




             Ajouter une description de l'image ici




             Ajouter une description de l'image ici




                                                      © 2013 www.krymo.com Tous Droits réservés.
Télécharger ce document en format pdf sur www.krymo.com

Galerie d'images
La galerie d'images suivant est créé avec CSS:

Exemple
<html>
<head>
<style>
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>



                                                                                                © 2013 www.krymo.com Tous Droits réservés.
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css
Css

Contenu connexe

Tendances

Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygenEmmanuelle Morlock
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBGaspar Daniel
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsAref Jdey
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5Aymen Hamdouni
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
 

Tendances (20)

Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
 
Cours html
Cours htmlCours html
Cours html
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
HTML
HTMLHTML
HTML
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigts
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 

En vedette

Quelques idées sur le web
Quelques idées sur le webQuelques idées sur le web
Quelques idées sur le webFrederic Soussin
 
Des pratiques numériques des jeunes aux enjeux pour l'école
Des pratiques numériques des jeunes aux enjeux pour l'écoleDes pratiques numériques des jeunes aux enjeux pour l'école
Des pratiques numériques des jeunes aux enjeux pour l'écoleMichel Guillou
 
Formation Quel statut juridique pour mon entreprise ?
Formation Quel statut juridique pour mon entreprise ?Formation Quel statut juridique pour mon entreprise ?
Formation Quel statut juridique pour mon entreprise ?Grain Incubation
 
Quelques bibliotheques finlandaises
Quelques bibliotheques finlandaisesQuelques bibliotheques finlandaises
Quelques bibliotheques finlandaisesXavier Galaup
 
Baromètre attractivité de la France en 2010
Baromètre attractivité de la France en 2010Baromètre attractivité de la France en 2010
Baromètre attractivité de la France en 2010Béatrice Duboisset
 
cat devant une brulure
cat devant une brulurecat devant une brulure
cat devant une brulureSarra OUBAHI
 
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...006148
 
Entomologie moléculaire et étude de la structuration génétique des population...
Entomologie moléculaire et étude de la structuration génétique des population...Entomologie moléculaire et étude de la structuration génétique des population...
Entomologie moléculaire et étude de la structuration génétique des population...Institut Pasteur de Madagascar
 
Séminaire invité - LIRMM - 23 janvier 2015
Séminaire invité - LIRMM - 23 janvier 2015Séminaire invité - LIRMM - 23 janvier 2015
Séminaire invité - LIRMM - 23 janvier 2015Adrien Guille
 
2 aaz fonctionnement d'un nids
2 aaz   fonctionnement d'un nids2 aaz   fonctionnement d'un nids
2 aaz fonctionnement d'un nidskaser info2aaz
 
Nias nagas presentar
Nias nagas presentarNias nagas presentar
Nias nagas presentarChikytaty
 
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIA
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIAPUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIA
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIAEsteban Uyarra Encalado
 
Evolución normativa en España hasta las NIAS
Evolución normativa en España hasta las NIASEvolución normativa en España hasta las NIAS
Evolución normativa en España hasta las NIASEsteban Uyarra Encalado
 
Nouvelles approches analytiques pour la détection des fraudes
Nouvelles approches analytiques pour la détection des fraudesNouvelles approches analytiques pour la détection des fraudes
Nouvelles approches analytiques pour la détection des fraudesPôle Qualiméditerranée
 
Quick Start Guide Minelab GPX-4000 Metal Detector French Language 4901 0060 ...
Quick Start Guide Minelab GPX-4000 Metal Detector  French Language 4901 0060 ...Quick Start Guide Minelab GPX-4000 Metal Detector  French Language 4901 0060 ...
Quick Start Guide Minelab GPX-4000 Metal Detector French Language 4901 0060 ...Serious Detecting
 

En vedette (20)

Quelques idées sur le web
Quelques idées sur le webQuelques idées sur le web
Quelques idées sur le web
 
Des pratiques numériques des jeunes aux enjeux pour l'école
Des pratiques numériques des jeunes aux enjeux pour l'écoleDes pratiques numériques des jeunes aux enjeux pour l'école
Des pratiques numériques des jeunes aux enjeux pour l'école
 
Formation Quel statut juridique pour mon entreprise ?
Formation Quel statut juridique pour mon entreprise ?Formation Quel statut juridique pour mon entreprise ?
Formation Quel statut juridique pour mon entreprise ?
 
Quelques bibliotheques finlandaises
Quelques bibliotheques finlandaisesQuelques bibliotheques finlandaises
Quelques bibliotheques finlandaises
 
Baromètre attractivité de la France en 2010
Baromètre attractivité de la France en 2010Baromètre attractivité de la France en 2010
Baromètre attractivité de la France en 2010
 
cat devant une brulure
cat devant une brulurecat devant une brulure
cat devant une brulure
 
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...
Mediat bibliothèques et droit de l'information [lecture seule] [mode de compa...
 
Entomologie moléculaire et étude de la structuration génétique des population...
Entomologie moléculaire et étude de la structuration génétique des population...Entomologie moléculaire et étude de la structuration génétique des population...
Entomologie moléculaire et étude de la structuration génétique des population...
 
LMO08a.ppt
LMO08a.pptLMO08a.ppt
LMO08a.ppt
 
Séminaire invité - LIRMM - 23 janvier 2015
Séminaire invité - LIRMM - 23 janvier 2015Séminaire invité - LIRMM - 23 janvier 2015
Séminaire invité - LIRMM - 23 janvier 2015
 
Les sondes de température
Les sondes de températureLes sondes de température
Les sondes de température
 
2 aaz fonctionnement d'un nids
2 aaz   fonctionnement d'un nids2 aaz   fonctionnement d'un nids
2 aaz fonctionnement d'un nids
 
La détection des spam
La détection des spamLa détection des spam
La détection des spam
 
Nias nagas presentar
Nias nagas presentarNias nagas presentar
Nias nagas presentar
 
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIA
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIAPUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIA
PUESTA EN MARCHA DE LAS NORMAS INTERNACIONALES DE AUDITORIA
 
Evolución normativa en España hasta las NIAS
Evolución normativa en España hasta las NIASEvolución normativa en España hasta las NIAS
Evolución normativa en España hasta las NIAS
 
Nouvelles approches analytiques pour la détection des fraudes
Nouvelles approches analytiques pour la détection des fraudesNouvelles approches analytiques pour la détection des fraudes
Nouvelles approches analytiques pour la détection des fraudes
 
Détection
Détection Détection
Détection
 
Quick Start Guide Minelab GPX-4000 Metal Detector French Language 4901 0060 ...
Quick Start Guide Minelab GPX-4000 Metal Detector  French Language 4901 0060 ...Quick Start Guide Minelab GPX-4000 Metal Detector  French Language 4901 0060 ...
Quick Start Guide Minelab GPX-4000 Metal Detector French Language 4901 0060 ...
 
Les detecteurs tout ou rien
Les detecteurs tout ou rienLes detecteurs tout ou rien
Les detecteurs tout ou rien
 

Similaire à Css

seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.pptAmineReal
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement webYounesOuladSayad1
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueDanielMohamed4
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3Annabi Gihed
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSSManel Ben Sassi
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Abdessattar Ettaieb
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSSVlad Posea
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfmdallamohamed
 

Similaire à Css (20)

seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
CSS
CSSCSS
CSS
 
cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
CSS 3
CSS 3CSS 3
CSS 3
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
 
Atelier template
Atelier templateAtelier template
Atelier template
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
Initiation au css
Initiation au cssInitiation au css
Initiation au css
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 

Css

  • 1. Télécharger ce document en format pdf sur www.krymo.com © 2013 www.krymo.com Tous Droits réservés.
  • 2. Télécharger ce document en format pdf sur www.krymo.com CSS Tutoriel Dans notre tutoriel CSS, vous apprendrez comment utiliser les CSS pour contrôler le style et la présentation de plusieurs pages Web en même temps. Des exemples de chaque chapitre Ce tutoriel CSS contient des centaines d'exemples CSS. Avec notre éditeur en ligne, vous pouvez éditer le CSS, et cliquez sur un bouton pour afficher le résultat. Exemple CSS body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { © 2013 www.krymo.com Tous Droits réservés.
  • 3. Télécharger ce document en format pdf sur www.krymo.com font-family:"Times New Roman"; font-size:20px; } CSS Présentation Ce que vous devriez déjà savoir Avant de poursuivre, vous devriez avoir une compréhension de base de ce qui suit: •HTML / XHTML Si vous voulez étudier ces sujets d'abord, trouver des tutoriels sur notre page d'accueil . Qu'est-ce que CSS? •CSS est synonyme de C ascading S tyle S heets •Les styles définissent la façon d'afficher 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. Télécharger ce document en format pdf sur www.krymo.com Styles Correction d'un gros problème HTML n'a jamais été destiné à contenir des balises de mise en forme d'un document. HTML visait à définir le contenu d'un 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éveloppeurs web. 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 et coû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 aujourd'hui. 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 l'apparence et la disposition de toutes les pages d'un site Web, tout en éditant un seul fichier! © 2013 www.krymo.com Tous Droits réservés.
  • 5. Télécharger ce document en format pdf sur www.krymo.com CSS Syntaxe Syntaxe CSS Une 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 d'une propriété et une valeur. La propriété est l'attribut de style que vous souhaitez modifier. Chaque propriété a une valeur. Exemple CSS Une 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. Télécharger ce document en format pdf sur www.krymo.com p {color:red;text-align:center;} Pour rendre le CSS plus lisibles, vous pouvez mettre une déclaration sur chaque ligne, comme ceci: Exemple p { color:red; text-align:center; } Commentaires CSS Les commentaires permettent d'expliquer votre code, et peut vous aider lorsque vous modifiez le code source à une date ultérieure. Les commentaires sont ignoré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. Télécharger ce document en format pdf sur www.krymo.com CSS Id et class Les sélecteurs id et class En 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 d'ID Le sélecteur d'ID est utilisé pour spécifier un style pour un seul élément unique. Le sélecteur d'ID utilise l'attribut 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 d'identification d'un certain nombre! Il ne fonctionne pas dans Mozilla / Firefox. © 2013 www.krymo.com Tous Droits réservés.
  • 8. Télécharger ce document en format pdf sur www.krymo.com Le sélecteur de classe Le sélecteur de classe est utilisé pour spécifier un style pour un groupe d'éléments. Contrairement au sélecteur d'ID, le sélecteur de classe est le plus souvent utilisé 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 l'attribut HTML class, et elle est définie par un "." Dans l'exemple 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 l'exemple ci-dessous, tous les éléments p avec class = "center" sera aligné au centre: Exemple p.center {text-align:center;} © 2013 www.krymo.com Tous Droits réservés.
  • 9. Télécharger ce document en format pdf sur www.krymo.com CSS Comment faire pour ... Quand un navigateur lit une feuille de style, il va formater le document selon elle. Trois façons d'insérer des CSS Il ya trois manières d'insérer une feuille de style: •Feuille de style externe •Feuille de style interne •Style en ligne Feuille de style externe Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages. Avec une feuille de style externe, vous pouvez changer l'apparence d'un site 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 à l'intérieur de la section de tête: © 2013 www.krymo.com Tous Droits réservés.
  • 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 n'importe quel éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Votre feuille de style doit être sauvegardé avec l'extension. 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 l'unité (comme margin-left: 20 px). La manière correcte est: margin-left: 20px Feuille de style interne Une 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 d'une page HTML, 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 ligne Un 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. Télécharger ce document en format pdf sur www.krymo.com Pour utiliser les styles en ligne que vous utilisez l'attribut style dans la balise concernée. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple montre comment changer la couleur et la marge gauche d'un paragraphe: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Feuilles de style en plusieurs Si 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 plus spé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. Télécharger ce document en format pdf sur www.krymo.com Styles multiples Will Cascade dans un Les styles peuvent être définis: •dans un élément HTML •à l'intérieur de la section head d'une page HTML •dans un fichier CSS externe Astuce: Même multiples feuilles de style externes peuvent être référencés dans un seul document HTML. Ordre de cascade Quel est le style sera utilisé quand il ya plus d'un 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éro quatre 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 (à l'intérieur d'un élément HTML) Ainsi, un style en ligne (à l'intérieur d'un élément HTML) a la priorité la plus élevée, ce qui signifie qu'il va remplacer un style défini dans la balise <head>, ou dans 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 la feuille de style interne! © 2013 www.krymo.com Tous Droits réservés.
  • 13. Télécharger ce document en format pdf sur www.krymo.com CSS Contexte Propriétés de fond CSS sont utilisées pour définir les effets d'arrière-plan d'un é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. Télécharger ce document en format pdf sur www.krymo.com • background-position Couleur de fond La propriété background-color définit la couleur d'arrière-plan d'un élément. La couleur d'arrière-plan d'une page est définie dans le corps de sélecteur: Exemple body {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 l'exemple ci-dessous, le h1, p, et les éléments div avoir différentes couleurs de fond: Exemple h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} © 2013 www.krymo.com Tous Droits réservés.
  • 15. Télécharger ce document en format pdf sur www.krymo.com Image de fond La propriété background-image spécifie une image à utiliser comme arrière-plan d'un élément. Par défaut, l'image est répétée de manière à couvrir tout l'élément. L'image de fond d'une page peut être définie comme ceci: Exemple body {background-image:url('paper.gif');} Voici un exemple d'une mauvaise combinaison de texte et d'image de fond. Le texte est presque illisible: Exemple body {background-image:url('bgdesert.jpg');} Image de fond - Répéter horizontalement ou verticalement Par 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 à l'horizontale ou à la verticale, ou ils vont paraître étrange, comme ceci: © 2013 www.krymo.com Tous Droits réservés.
  • 16. Télécharger ce document en format pdf sur www.krymo.com Exemple body { background-image:url('gradient2.png'); } Si l'image est répétée seulement horizontalement (repeat-x), le fond sera plus belle: Exemple body { 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 l'image une seule fois est spécifié par la propriété background-repeat: Exemple body { background-image:url('img_tree.png'); © 2013 www.krymo.com Tous Droits réservés.
  • 17. Télécharger ce document en format pdf sur www.krymo.com background-repeat:no-repeat; } Dans l'exemple ci-dessus, l'image de fond est montré à la même place que le texte. Nous voulons changer la position de l'image, de sorte qu'il ne perturbe pas le trop de texte. La position de l'image est spécifiée par la propriété background-position: Exemple body { 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 lorsqu'il s'agit de milieux. Pour raccourcir le code, il est également possible de spécifier toutes les propriétés en une seule propriété. C'est ce qu'on appelle un raccourci. La propriété raccourcie pour le fond est tout simplement "fond": Exemple body {background:#ffffff url('img_tree.png') no-repeat right top;} © 2013 www.krymo.com Tous Droits réservés.
  • 18. Télécharger ce document en format pdf sur www.krymo.com Lorsque vous utilisez la propriété raccourcie de l'ordre de la valeur des propriétés est la suivante: •background-color •background-image •background-repeat •-fond de fixation •background-position Ce n'est pas grave si l'une 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 d'oeil: Exemple avancé Toutes les propriétés d'arrière-plan CSS Propriété Description fond Définit toutes les propriétés d'arriè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 d'arrière-plan d'un élément background-image Définit l'image d'arrière-plan d'un élément © 2013 www.krymo.com Tous Droits réservés.
  • 19. Télécharger ce document en format pdf sur www.krymo.com background-position Règle la position de départ d'une image de fond background-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 l'espace entre les caractè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. Télécharger ce document en format pdf sur www.krymo.com Couleur du texte La 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 d'une page par défaut est défini dans le sélecteur de corps. Exemple body {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 texte La propriété text-align est utilisée pour définir l'alignement horizontal d'un 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. Télécharger ce document en format pdf sur www.krymo.com Exemple h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} Décoration du texte La 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: Exemple a {text-decoration:none;} Il peut également être utilisé pour décorer texte: Exemple h1 {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 n'est pas un lien, car cela confond souvent les utilisateurs. © 2013 www.krymo.com Tous Droits réservés.
  • 22. Télécharger ce document en format pdf sur www.krymo.com Transformation du texte La 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. Exemple p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} Indentation du texte La propriété text-indentation est utilisée pour spécifier l'indentation de la première ligne d'un texte. Exemple p {text-indent:50px;} © 2013 www.krymo.com Tous Droits réservés.
  • 23. Télécharger ce document en format pdf sur www.krymo.com Toutes les propriétés du texte CSS Propriété Description color Définit la couleur du texte direction Spécifie le texte de direction / écriture direction letter-spacing Augmente ou diminue l'espace entre les caractères dans un texte line-height Définit la hauteur de la ligne text-align Spécifie l'alignement horizontal du texte text-decoration Spécifie la décoration ajoutée au texte text-indent Spécifie l'indentation de la première ligne de texte dans un bloc- text-shadow Spécifie l'effet d'ombre ajoutée au texte text-transform Contrôle la casse du texte unicode-bidi © 2013 www.krymo.com Tous Droits réservés.
  • 24. Télécharger ce document en format pdf sur www.krymo.com vertical-align Définit l'alignement vertical d'un élément white-space Indique comment un espace blanc à l'intérieur d'un élément est traité word-spacing Augmente ou diminue l'espace entre les mots dans un texte CSS police CSS propriétés de police définient la famille de polices, l'audace, la taille et le style d'un texte. Différence entre Serif et Sans-serif Polices Sur les écrans d'ordinateur, sans-serif sont considérés comme plus faciles à lire que les polices serif. © 2013 www.krymo.com Tous Droits réservés.
  • 25. Télécharger ce document en format pdf sur www.krymo.com Des familles de polices CSS En 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 n'ont 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 Console Famille de polices La 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, il tente 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 famille générique, s'il n'y a pas d'autres polices sont disponibles. Remarque : Si le nom d'une famille de polices est plus d'un mot, il doit être placé entre guillemets, comme font-family: "Times New Roman". Plus d'une 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. Télécharger ce document en format pdf sur www.krymo.com Exemple p{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 police La 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) Exemple p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} Taille de la police La 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 à faire des paragraphes ressembler rubriques ou rubriques air de paragraphes. © 2013 www.krymo.com Tous Droits réservés.
  • 27. Télécharger ce document en format pdf sur www.krymo.com Toujours 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 d'accessibilité) •Taille absolue est utile quand la taille physique de la sortie est connue Taille 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 pixels Réglage de la taille du texte avec des pixels vous donne le plein contrôle sur la taille du texte: Exemple h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} L'exemple ci-dessus permet à Internet Explorer 9, Firefox, Chrome, Opera et Safari pour redimensionner le texte. Remarque: L'exemple ci-dessus ne fonctionne pas dans IE, version antérieure 9. Le texte peut être redimensionné dans tous les navigateurs utilisant l'outil de zoom (toutefois, cela redimensionne la page entière, et pas seulement le texte). © 2013 www.krymo.com Tous Droits réservés.
  • 28. Télécharger ce document en format pdf sur www.krymo.com Définir la taille de la police Avec Em Pour éviter le problème redimensionnement avec les anciennes versions d'Internet Explorer, de nombreux développeurs em utiliser à la place des pixels. La taille de l'unité 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 = em Exemple h1 {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 l'exemple ci-dessus, la taille du texte lui est le même que l'exemple précédent en pixels. Cependant, la taille lui, il est possible d'ajuster la taille du texte dans tous les navigateurs. Malheureusement, il ya encore un problème avec les anciennes versions d'IE. Le texte devient plus grande qu'elle ne devrait l'rendue plus grande lorsque, et plus petite que ce qu'elle devrait quand rendue plus petite. Utilisez une combinaison de pourcentage et Em La 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: Exemple body {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. Télécharger ce document en format pdf sur www.krymo.com Notre code fonctionne maintenant beaucoup! Il montre la taille du texte même dans tous les navigateurs, et permet à tous les navigateurs pour zoomer ou redimensionner le texte! Toutes les propriétés de police CSS Proprié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 d'une police © 2013 www.krymo.com Tous Droits réservés.
  • 30. Télécharger ce document en format pdf sur www.krymo.com CSS Liens Liens peuvent être décorés de différentes manières. Liens Styling Les liens peuvent être stylé avec n'importe quelle propriété CSS (par exemple la couleur, font-family, fond, etc.) Spécial pour les liens est qu'ils peuvent être présentées différemment en fonction de l'état dans lequel ils sont po Les quatre États liens sont les suivants: •a: link - une vie normale, lien non visité •a: visited - un lien que l'utilisateur a visité •a: hover - un lien lorsque l'utilisateur souris au-dessus •a: active - un lien du moment où il est cliqué Exemple a: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 d'ordre: •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. Télécharger ce document en format pdf sur www.krymo.com Styles de liens communs Dans l'exemple ci-dessus le lien change de couleur en fonction de quel état il est po Permet de passer par quelques-uns des autres moyens communs aux liens de style: Décoration du texte La propriété text-decoration est surtout utilisé pour enlever souligne des liens: Exemple a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} Couleur de fond La propriété background-color définit la couleur de fond pour les liens: Exemple a: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. Télécharger ce document en format pdf sur www.krymo.com CSS listes Les 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 liste Liste En 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 lettres Avec 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 liste Le type de marqueur élément de la liste est spécifiée avec la propriété list-style-type: Exemple ul.a {list-style-type: circle;} ul.b {list-style-type: square;} © 2013 www.krymo.com Tous Droits réservés.
  • 33. Télécharger ce document en format pdf sur www.krymo.com ol.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 d'item List Pour spécifier une image en tant que marqueur élément de la liste, utilisez la propriété list-style-image: Exemple ul { list-style-image: url('sqpurple.gif'); } L'exemple ci-dessus ne s'affiche pas égale dans tous les navigateurs. IE et Opera affichera l'image marqueur un peu plus élevé que Firefox, Chrome et Safari. Si vous voulez que l'image du marque-être placé aussi dans tous les navigateurs, une solution crossbrowser est expliqué ci-dessous. Solution Crossbrowser L'exemple suivant affiche l'image-repère également dans tous les navigateurs: Exemple ul { list-style-type: none; padding: 0px; © 2013 www.krymo.com Tous Droits réservés.
  • 34. Télécharger ce document en format pdf sur www.krymo.com margin: 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 l'URL de l'image et l'afficher qu'une seule fois (no-repeat) •Positionnez l'image où vous le souhaitez (à gauche 0px 5px en bas) •Placez le texte dans la liste avec padding-left Liste - propriété raccourcie Il est également possible de spécifier toutes les propriétés de la liste dans un seul, bien seul. C'est ce qu'on appelle un raccourci. La propriété raccourcie utilisé pour les listes, est la propriété list-style: Exemple ul { list-style: square url("sqpurple.gif"); } © 2013 www.krymo.com Tous Droits réservés.
  • 35. Télécharger ce document en format pdf sur www.krymo.com Lorsque vous utilisez la propriété raccourcie, l'ordre 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-image Ce n'est pas grave si l'une des valeurs ci-dessus sont manquantes, aussi longtemps que les autres sont dans l'ordre spécifié. CSS tableaux Le regard d'un 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. 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 Danemark Bordures de tableau Pour spécifier les bordures de tableau en CSS, utilisez la propriété border. L'exemple ci-dessous spécifie une bordure noire pour la table, th et td éléments: Exemple table, th, td { border: 1px solid black; } Notez que la table dans l'exemple ci-dessus a des frontières doubles. C'est 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. Télécharger ce document en format pdf sur www.krymo.com Réduire les frontières La propriété border-collapse définit si les bordures de tableau sont regroupées en une seule bordure ou séparés: Exemple table { border-collapse:collapse; } table,th, td { border: 1px solid black; } Largeur et Hauteur de table La largeur et la hauteur d'une table est définie par la largeur et height. L'exemple ci-dessous indique la largeur de la table à 100%, et la hauteur des éléments ième à 50px: Exemple table { width:100%; } th { height:50px; } © 2013 www.krymo.com Tous Droits réservés.
  • 38. Télécharger ce document en format pdf sur www.krymo.com Alignement du texte tableau Le texte dans un tableau est aligné avec les propriétés text-align et vertical-align. La propriété text-align définit l'alignement horizontal, comme à gauche, à droite ou au centre: Exemple td { text-align:right; } La propriété vertical-align définit l'alignement vertical, comme en haut, en bas ou au milieu: Exemple td { height:50px; vertical-align:bottom; } © 2013 www.krymo.com Tous Droits réservés.
  • 39. Télécharger ce document en format pdf sur www.krymo.com Rembourrage tableau Pour contrôler l'espace entre la bordure et le contenu d'une table, utilisez la propriété padding sur td et th éléments: Exemple td { padding:15px; } Table de couleurs L'exemple ci-dessous spécifie la couleur des bordures et la couleur du texte et le fond des éléments e: Exemple table, td, th { border:1px solid green; } th { background-color:green; © 2013 www.krymo.com Tous Droits réservés.
  • 40. Télécharger ce document en format pdf sur www.krymo.com color:white; } CSS Box Model Le modèle de boîte CSS Tous 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 en page. Le modèle de boîte CSS est essentiellement une boîte qui s'enroule autour des éléments HTML, et il se compose de: marges, les bordures, le remplissage et le contenu proprement dit. Le modèle de la boîte nous permet de placer une bordure autour des éléments et des éléments d'espace par rapport aux autres éléments. L'image ci-dessous illustre le modèle de boîte: © 2013 www.krymo.com Tous Droits réservés.
  • 41. Télécharger ce document en format pdf sur www.krymo.com Explication des différentes parties: •Marge - Efface une zone autour de la frontière. La marge n'a 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 apparaissent Afin de définir la largeur et la hauteur d'un élément correctement dans tous les navigateurs, vous avez besoin de savoir comment fonctionne le modèle de boîte. La largeur et la hauteur d'un élément Important: Lorsque vous définissez les propriétés width et height d'un élément avec CSS, il vous suffit de définir la largeur et la hauteur de la zone de contenu . Pour calculer la taille réelle d'un élément, vous devez également ajouter les espacements, bordures et les marges. © 2013 www.krymo.com Tous Droits réservés.
  • 42. Télécharger ce document en format pdf sur www.krymo.com La largeur totale de l'élément dans l'exemple 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) = 300px Supposons que vous aviez seulement 250px de l'espace. Faisons un élément avec une largeur totale de 250px: Exemple width:220px; padding:10px; border:5px solid gray; margin:0px; La largeur totale d'un é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 droite La hauteur totale d'un é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. Télécharger ce document en format pdf sur www.krymo.com Problème de compatibilité des navigateurs IE8 et versions antérieures d'Internet 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 Border Propriétés des bordures Css Les propriétés de bordure CSS vous permettent de spécifier le style et la couleur de la bordure d'un élément. Style de bordure La propriété border-style spécifie le type de bordure à afficher. Aucun des propriétés de bordure n'aura aucun effet à moins que le border-style propriété est définie! border-style: les valeurs none: Définit aucune frontière pointillé: Définit une bordure en pointillés en pointillés: Définit une bordure en pointillés solide: Définit une bordure solide doubler: Définit deux frontières. La largeur des deux bordures sont les mêmes que la valeur border-width rainure: Définit une bordure 3D rainuré. L'effet dépend de la valeur border-color crête: Définit une bordure 3D striée. L'effet dépend de la valeur border-color encadré: Définit une bordure 3D encadré. L'effet dépend de la valeur border-color © 2013 www.krymo.com Tous Droits réservés.
  • 44. Télécharger ce document en format pdf sur www.krymo.com départ: Définit une bordure 3D départ. L'effet dépend de la valeur border-color Largeur de la bordure La 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 l'une 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ères premier. Exemple p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } Couleur de la bordure La 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. 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. Exemple p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } Border - côtés individuels En CSS, il est possible de spécifier des bordures différentes pour différents côtés: Exemple p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; © 2013 www.krymo.com Tous Droits réservés.
  • 46. Télécharger ce document en format pdf sur www.krymo.com border-left-style:solid; } L'exemple ci-dessus peut également être configuré avec une seule propriété: Exemple border-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. Télécharger ce document en format pdf sur www.krymo.com •tous les quatre bords sont parsemés La propriété border-style est utilisé dans l'exemple 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 lorsqu'il s'agit 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é. C'est ce qu'on appelle un raccourci. La propriété border est un raccourci pour les propriétés suivantes frontières individuelles: •border-width •border-style (requis) •border-color Exemple border:5px solid red; © 2013 www.krymo.com Tous Droits réservés.
  • 48. Télécharger ce document en format pdf sur www.krymo.com Toutes les propriétés de bordure CSS Propriété Description border Définit toutes les propriétés de bordure dans une déclaration border-bottom Définit toutes les propriétés de bordure de fond dans une déclaration border-bottom-color Définit la couleur de la bordure inférieure border-bottom-style Définit le style de la bordure inférieure border-bottom-width Définit la largeur de la bordure inférieure border-color Définit la couleur des quatre frontières border-left Définit toutes les propriétés de bordure gauche dans une déclaration border-left-color Définit la couleur de la bordure gauche border-left-style Définit le style de la bordure gauche border-left-width Définit la largeur de la bordure gauche border-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. Télécharger ce document en format pdf sur www.krymo.com border-right-color Définit la couleur de la bordure droite border-right-style Définit le style de la bordure droite border-right-width Définit la largeur de la bordure droite border-style Définit le style des quatre frontières border-top Définit toutes les propriétés de bordure supérieure dans une déclaration border-top-color Définit la couleur de la bordure supérieure border-top-style Définit le style de la bordure supérieure border-top-width Définit la largeur de la bordure supérieure border-width Définit la largeur des quatre frontières © 2013 www.krymo.com Tous Droits réservés.
  • 50. Télécharger ce document en format pdf sur www.krymo.com CSS Outline Un 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 d'une esquisse. Schéma CSS Un 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 n'est pas une partie de dimensions d'un élément; largeur totale de l'élément et la hauteur n'est pas affectée par la largeur du contour. © 2013 www.krymo.com Tous Droits réservés.
  • 51. Télécharger ce document en format pdf sur www.krymo.com Toutes les propriétés de contour CSS Le 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 d'un contour color_name 2 hex_number rgb_number © 2013 www.krymo.com Tous Droits réservés.
  • 52. Télécharger ce document en format pdf sur www.krymo.com invert inherit none dotted dashed solid double outline-style Définit le style d'un contour 2 groove ridge inset outset inherit thin medium thick outline-width Définit la largeur d'un contour 2 length inherit CSS Margin Les propriétés de marge CSS définissent l'espace autour des éléments. © 2013 www.krymo.com Tous Droits réservés.
  • 53. Télécharger ce document en format pdf sur www.krymo.com Marge La marge efface une zone autour d'un élément (en dehors de la frontière). La marge n'a pas de couleur de fond, et est complètement transparent. La marge du haut, droite, bas, gauche et peut être modifiée indépendamment à l'aide des propriétés distinctes.Une propriété margin raccourci peut également être utilisé pour modifier les marges à la fois. Valeurs possibles Valeur 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 d'utiliser des valeurs négatives, à se chevaucher contenu. Marge - côtés individuels En 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. Télécharger ce document en format pdf sur www.krymo.com Exemple margin-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é. C'est ce qu'on appelle un raccourci. La propriété raccourcie pour toutes les propriétés de marge est «marge»: Exemple margin: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. 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 25px Toutes les propriétés CSS de marge Propriété Description Un raccourci pour définir les propriétés de marge dans une margin déclaration margin-bottom Définit la marge inférieure d'un élément margin-left Définit la marge gauche d'un élément margin-right Définit la marge droite d'un élément margin-top Définit la marge supérieure d'un élément © 2013 www.krymo.com Tous Droits réservés.
  • 56. Télécharger ce document en format pdf sur www.krymo.com CSS padding Les propriétés de remplissage CSS définir l'espace entre la bordure de l'élément et l'élément de contenu. Rembourrage Le rembourrage efface une zone autour du contenu (à l'intérieur de la frontière) d'un é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 à l'aide des propriétés distinctes. Une propriété padding raccourci peut également être utilisé pour changer tous les rembourrages à la fois. Valeurs possibles Valeur Description Définit un rembourrage fixe (en pixels, pt, em, lenght etc) Définit un rembourrage en% de l'élément % conteneur Rembourrage - côtés individuels En 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. Télécharger ce document en format pdf sur www.krymo.com Exemple padding-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é. C'est ce qu'on appelle un raccourci. La propriété raccourcie pour toutes les propriétés de remplissage est "padding": Exemple padding: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. 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 25px Toutes les propriétés Padding CSS Propriété Description Un raccourci pour définir toutes les propriétés de remplissage dans une padding déclaration padding-bottom Définit le remplissage d'un élément de fond padding-left Définit le remplissage gauche d'un élément padding-right Définit la marge droite d'un élément padding-top Définit les marges supérieure d'un élément © 2013 www.krymo.com Tous Droits réservés.
  • 59. Télécharger ce document en format pdf sur www.krymo.com CSS Groupement et de nidification Sélecteurs Sélecteurs de regroupement Dans 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 l'exemple ci-dessous, nous avons regroupé les sélecteurs du code ci-dessus: Exemple h1,h2,p { color:green; } © 2013 www.krymo.com Tous Droits réservés.
  • 60. Télécharger ce document en format pdf sur www.krymo.com Sélecteurs de nidification Il est possible d'appliquer un style à un sélecteur dans un sélecteur. Dans l'exemple 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ème style est spécifié que les éléments p de éléments avec class = "marqués": Exemple p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } © 2013 www.krymo.com Tous Droits réservés.
  • 61. Télécharger ce document en format pdf sur www.krymo.com CSS Dimension Les propriétés de dimension CSS vous permettent de contrôler la hauteur et la largeur d'un élément. Toutes les propriétés de dimension CSS Le 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 d'un élément 1 % inherit none length max-height Définit la hauteur maximale d'un élément % 2 inherit max-width Définit la largeur maximale d'un élément none 2 length % inherit © 2013 www.krymo.com Tous Droits réservés.
  • 62. Télécharger ce document en format pdf sur www.krymo.com length min-height Définit la hauteur minimale d'un élément % 2 inherit length min-width Définit la largeur minimale d'un élément % 2 inherit auto length width Définit la largeur d'un élément 1 % inherit CSS d'affichage et de visibilité La propriété d'affichage indique si / comment un élément est affiché, et la propriété de visibilité indique si un élément doit être visible ou caché. Encadré 1 Encadré 2 Encadré 3 © 2013 www.krymo.com Tous Droits réservés.
  • 63. Télécharger ce document en format pdf sur www.krymo.com Cacher un élément - display: none ou visibility: hidden Cacher un élément qui peut être fait en définissant la propriété d'affichage sur "none" ou la propriété de visibilité pour "caché". Cependant, notez que ces deux méthodes produisent des résultats différents: visibilité: les peaux cachés d'un élément, mais il faudra encore prendre le même espace comme avant. L'élément sera caché, mais n'en affectent pas la mise en page. Exemple h1.hidden {visibility:hidden;} display: none cache un élément, et il ne prend aucun espace. L'élément sera caché, et la page s'affiche comme si l'élément n'est pas là: Exemple h1.hidden {display:none;} CSS Display - Block et Inline éléments Un é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. Télécharger ce document en format pdf sur www.krymo.com Exemples d'éléments en ligne: •<span> •<a> Modification du mode d'un élément est affiché Modification d'un élément en ligne à un élément de type bloc, ou vice versa, peut être utile pour faire la page de regarder d'une manière spécifique, et toujours suivre les standards du web. L'exemple suivant affiche les éléments de liste que les éléments en ligne: Exemple li {display:inline;} L'exemple suivant affiche les éléments que couvrent les éléments de bloc: Exemple span {display:block;} CSS de positionnement Le positionnement peut être difficile parfois! Les éléments peuvent se chevaucher! © 2013 www.krymo.com Tous Droits réservés.
  • 65. Télécharger ce document en format pdf sur www.krymo.com Placement Les propriétés de positionnement CSS vous permettent de positionner un élément. Il peut aussi placer un élément derrière l'autre, et spécifier ce qui doit se produire lorsque le contenu d'un é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 fixe Un é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: Exemple p.pos_fixed { position:fixed; top:30px; right:5px; } © 2013 www.krymo.com Tous Droits réservés.
  • 66. Télécharger ce document en format pdf sur www.krymo.com Remarque: 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é n'existe pas. Fixes des éléments positionnés peuvent se chevaucher d'autres éléments. Positionnement relatif Un élément positionné par rapport est positionné par rapport à sa position normale. Exemple h2.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 d'autres éléments, mais l'espace réservé pour l'élément est encore conservé dans le flux normal. © 2013 www.krymo.com Tous Droits réservés.
  • 67. Télécharger ce document en format pdf sur www.krymo.com Exemple h2.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 absolu Un é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 correspondant n'est trouvé, le bloc conteneur est <html>: Exemple h2 { 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 absolue n'existe pas. Éléments en position absolue peuvent se chevaucher d'autres éléments. © 2013 www.krymo.com Tous Droits réservés.
  • 68. Télécharger ce document en format pdf sur www.krymo.com Les éléments qui se chevauchent Lorsque les éléments sont positionnés en dehors du flux normal, ils peuvent se chevaucher d'autres éléments. La propriété z-index spécifie l'ordre d'empilement d'un é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: Exemple img { position:absolute; left:0px; top:0px; z-index:-1; } CSS float Qu'est-ce que CSS float? Avec CSS float, un élément peut être poussé vers la gauche ou vers la droite, ce qui permet d'autres éléments pour enrouler autour d'elle. 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 qu'un é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 de l'é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. Télécharger ce document en format pdf sur www.krymo.com Les é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: Exemple img { float:right; } Les éléments flottants côté de l'autre Si vous placez plusieurs éléments flottants après l'autre, ils vont flotter à côté de l'autre s'il ya de la place. Ici, nous avons fait une galerie d'images 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. Télécharger ce document en format pdf sur www.krymo.com Mise 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 d'un élément d'autres éléments flottants ne sont pas autorisés. Ajouter une ligne de texte dans la galerie d'images, 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 bloc Un é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. 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 qu'un DOCTYPE est déclarée!. Réglage des marges gauche et droite pour automobile précise qu'ils 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 n'a 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 l'exemple ci-dessus fonctionnent dans IE5, ajouter un peu de code supplémentaire. Essayez vous-même © 2013 www.krymo.com Tous Droits réservés.
  • 72. Télécharger ce document en format pdf sur www.krymo.com Gauche et Droite Alignement Utilisation de la propriété de position Une méthode d'éléments d'alignement est d'utiliser 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é Crossbrowser Lors de l'alignement 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 des diffé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 <div class="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 le cô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. Télécharger ce document en format pdf sur www.krymo.com Exemple body { margin:0; padding:0; } .container { position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } Gauche et Droite Alignement aide de la propriété float Une méthode d'éléments d'alignement est d'utiliser la propriété float: © 2013 www.krymo.com Tous Droits réservés.
  • 74. Télécharger ce document en format pdf sur www.krymo.com Exemple .right { float:right; width:300px; background-color:#b0e0e6; } Problèmes de compatibilité Crossbrowser Lors de l'alignement 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 des différences visuelles dans les différents navigateurs. Il ya un problème avec IE8 et plus tôt lors de l'utilisation de la propriété float. Si la déclaration! DOCTYPE est manquant, versions IE8 et versions antérieures ajouter 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 lorsque vous utilisez la propriété float!: Exemple body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; } © 2013 www.krymo.com Tous Droits réservés.
  • 75. Télécharger ce document en format pdf sur www.krymo.com CSS pseudo-classes CSS pseudo-classes sont utilisées pour ajouter des effets spéciaux à certains sélecteurs. © 2013 www.krymo.com Tous Droits réservés.
  • 76. Télécharger ce document en format pdf sur www.krymo.com Syntaxe La 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-classes Les liens peuvent être affichés de différentes manières dans un navigateur CSS-portante: Exemple a: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. Télécharger ce document en format pdf sur www.krymo.com Pseudo-classes et Classes CSS Les 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 l'exemple ci-dessus a été visité, il sera affiché en rouge. CSS - Le: first-child pseudo-classe L': first-child pseudo-classe correspond à un élément déterminé qui est le premier enfant d'un 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> premier Dans l'exemple suivant, le sélecteur correspond à n'importe quel élément <p> qui est le premier enfant d'un é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. 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 l'exemple 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. Télécharger ce document en format pdf sur www.krymo.com Faire correspondre tous les éléments <i> dans tous les premiers éléments <p> enfant Dans l'exemple suivant, le sélecteur correspond à tous les éléments <i> dans les éléments <p> qui sont le premier enfant d'un 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-classe Le: 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 l'exemple 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. Télécharger ce document en format pdf sur www.krymo.com Exemple <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éments CSS pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs. Syntaxe La 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. Télécharger ce document en format pdf sur www.krymo.com Le: first-line pseudo-élément La "première ligne" pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d'un texte. Dans l'exemple 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ù le navigateur rompt la ligne, dépend de la taille de la fenêtre du navigateur): Exemple p: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 s'appliquent à 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 •effacer Le: first-letter pseudo-élément Le "first-letter" pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d'un texte: © 2013 www.krymo.com Tous Droits réservés.
  • 82. Télécharger ce document en format pdf sur www.krymo.com Exemple p: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 s'appliquent à 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 •effacer Les pseudo-éléments et classes CSS Les 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. Télécharger ce document en format pdf sur www.krymo.com L'exemple ci-dessus va afficher la première lettre de tous les paragraphes avec class = "article", en rouge. Plusieurs pseudo-éléments Plusieurs pseudo-éléments peuvent également être combinées. Dans l'exemple suivant, la première lettre d'un paragraphe sera rouge, dans une taille de police xx-large. Le reste de la première ligne sera bleu, et en petites capitales. Le reste du paragraphe sera la taille de police par défaut et la couleur: Exemple p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } CSS - Le: avant pseudo-élément La commande ": avant de« pseudo-élément peut être utilisé pour insérer du contenu avant que le contenu d'un élément. L'exemple suivant insère une image devant chaque élément <h1>: © 2013 www.krymo.com Tous Droits réservés.
  • 84. Télécharger ce document en format pdf sur www.krymo.com Exemple h1:before { content:url(smiley.gif); } CSS - Le: après le Pseudo-élément La commande ": après" pseudo-élément peut être utilisé pour insérer un contenu après le contenu d'un élément. L'exemple suivant insère une image après chaque élément <h1>: Exemple h1: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. Télécharger ce document en format pdf sur www.krymo.com Barres de navigation Ayant facile à utiliser de navigation est important pour n'importe quel site web. Avec CSS, vous pouvez transformer ennuyeux menus HTML dans les barres de navigation de bonne mine. Barre de navigation = Liste des liens Une barre de navigation doit HTML standard comme base. Dans nos exemples, nous construirons la barre de navigation à partir d'une liste standard HTML. Une barre de navigation est essentiellement une liste de liens, donc l'utilisation 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. Télécharger ce document en format pdf sur www.krymo.com Exemple ul { list-style-type:none; margin:0; padding:0; } Exemple expliqué: •list-style-type: none - Supprime les balles. Une barre de navigation n'a pas besoin de marqueurs de listes •Réglage des marges et padding à 0 pour supprimer les paramètres par défaut du navigateur Le code de l'exemple ci-dessus est le code standard utilisé dans les deux barres de navigation verticales et horizontales. Barre de navigation verticale Pour construire une barre de navigation verticale nous avons seulement besoin de styler les éléments <a>, en plus du code ci-dessus: Exemple a { display:block; width:60px; } © 2013 www.krymo.com Tous Droits réservés.
  • 87. Télécharger ce document en format pdf sur www.krymo.com Exemple 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 px Astuce: 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ésultats inattendus. Barre de navigation Il 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 ligne Une 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: Exemple li { display:inline; } © 2013 www.krymo.com Tous Droits réservés.
  • 88. Télécharger ce document en format pdf sur www.krymo.com Exemple expliqué: •display: inline; - Par défaut, les éléments sont <li> éléments de bloc. Ici, on enlève les sauts de ligne avant et après chaque élément de la liste, de les afficher sur une seule ligne Astuce: Jetez aussi un oeil à notre exemple de style de navigation entièrement barre horizontale . Lister les objets flottants Dans l'exemple ci-dessus les liens ont des largeurs différentes. Pour tous les liens pour avoir une largeur égale, les éléments flottent <li> et spécifier une largeur pour les éléments <a>: Exemple li { float:left; } a { display:block; width:60px; } CSS Galerie d'images CSS peut être utilisé pour créer une galerie d'images. © 2013 www.krymo.com Tous Droits réservés.
  • 89. Télécharger ce document en format pdf sur www.krymo.com Ajouter une description de l'image ici Ajouter une description de l'image ici Ajouter une description de l'image ici Ajouter une description de l'image ici © 2013 www.krymo.com Tous Droits réservés.
  • 90. Télécharger ce document en format pdf sur www.krymo.com Galerie d'images La galerie d'images suivant est créé avec CSS: Exemple <html> <head> <style> div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> © 2013 www.krymo.com Tous Droits réservés.