Css

Télécharger ce document en format pdf sur www.krymo.com

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


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
{



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



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!



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:



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



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.



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



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:



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



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.



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!



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



• 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;}



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:



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



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



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



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.



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



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.



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



Toutes les propriétés du texte CSS

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



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.



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:



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.



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



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



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

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



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



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



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



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;



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");
}



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-



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.



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



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



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;



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:



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.



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



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



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:



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



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;



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



Toutes les propriétés de bordure CSS

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



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



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.



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



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.



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:



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



•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

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



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:



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



•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

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



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



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



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



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



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.



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!


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



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.



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.



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.



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



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>



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



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

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!:



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

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:



Exemple
.right
{
float:right;
width:300px;
}

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



CSS pseudo-classes

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



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.



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>



<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>
</body>
</html>



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



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



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:



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>



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



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



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:



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



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



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.



Ajouter une description de l'image ici






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>


Css

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Css

Ähnlich wie Css (20)

Css