CSS2 - Synthese Formation

Webdesign
Pour un designer, se conformer aux normes du W3C présente des avantages, parmi eux :
- Assurer la perrénité du site.
- Assurer un affichage correct des pages sur la plupart des navigateurs.
Softwares nécessaire :
- Dreamweaver permet de gagner du temps sur la structuration de mon document en HTML : p, div, h1, h2, h3, ul, li, a, img.
Ensuite, pour affiner le code et créer les feuilles de style CSS :
- Editeur de code : Komodo Edit 5
- Navigateur : Morzilla Firefox
- Inspecteur/testeur de code : Firebug (extension à installer sur Morzilla)
- Validateur de code : Web Developper (extension à installer sur Morzilla)
- Indicateur de teintes : Colorzilla (extension à installer sur Morzilla)
- Faux texte : www.lipsum.com
- Doctype-type “Squelettor“: www.alsacreation.com
- Tutos : www.pompage.net
Les codes HTML et CSS2 sont analysés par les navigateurs. Ils permettent de créer des sites internet dont l'interface sera STATIQUE mais pas
ou très peu dynamique. Insensible aux retours à la ligne, ce balisage HTML permet de STRUCTURER ma page et de DÉSIGNER des
éléments-CIBLES auquel je vais attribuer un style en appelant une feuille de styles CSS externe.
1 : Etablir une STRUCTURE CLAIRE EN HTML -> sémantiquement logique, compréhensible même nue (pouvant être comprise même sur un
navigateur non-graphique).
2 : DÉSIGNER les éléments EN HTML -> pour leur appliquer du style ensuite.
3 : STYLER EN CSS -> design de la page
4 : En dernier lieu, recourir aux bidouilles nécessaires pour un affichage correct sur les anciens navigateurs.
La balise <head> contient des informations invisibles mais indispensables :
- Doctype : ouvrir le modele Squelettor sur KOMODO EDIT et y INJECTER le contenu brut non balisé de mon document
- Nommer mon document
- Rentrer le titre : <title> titre </title> (important car il permet le lien vers les feuilles de styles CSS)
- Définir le jeu de caractère idéal : charset:ISO-8859-1
La balise <body> contient les éléments visibles.

Structurer en HTML :
- Ouvrir mon document sur DW
Pour structurer logiquement, la 1ère étape consiste à imaginer la construction de ma page comme autant d'éléments html : combien de
titres, combien de colonnes, combien de listes... Il faut respecter la STRUCTURE de l'Information, ne pas passer un titre qui doit être assez
petit au final mais qui dépend d'un titre de niveau <h2> en niveau <h5>, mais toujours en niveau directement inférieur, cad <h2>. S'il faut le
réduire, je suis toujours à temps de le faire dans ma feuille css.
Un élément HTML est composé d'une balise ouvrante, d'un contenu et d'une balise fermante. Elles doit être porteuses de SENS, jouant un
rôle sémantique.
- COMMENTER la balise fermante de chaque élément div (# ou . devant le nom pour notifier s'il s'agit d'un identifiant ou d'une classe) permet
de mieux comprendre les pages de code. par ex : 
Les balises html sont classées en deux catégories :

- Type BLOC (introduisant un retour à la ligne, pouvant recevoir des dimensions et permettant de mettre en place des blocs) :
ul (liste non ordonnée), li (item de liste), p (paragraphe), h1 (titre de niveau 1), div (conteneur neutre)
- Type in-line (s’appliquant à des portions de texte et renforçant le SENS) :
a (lien), em (italique), strong (engraissement), img (image, balise auto-fermante), span (conteneur neutre)
Dimensions en pixels d’un fond de page : 750 px par 600 px

Equivalent en mm : 264,6mm par 211,7mm
Toujours indiquer dans mon code à quoi correspond telle ou telle partie à l’aide des commentaires.
• Créer un paragraphe :
<p>contenu du paragraphe</p>
Pour engraisser ou italiser un lien, ces attributs sont contenus à l'intérieur de la balise <a> :
<a href="#"><strong>texte correspondant au lien</strong></a>
<a href="#"><em>texte correspondant au lien</em></a>
• Créer un lien :
<a href=“nom de la page de destination“> nom du lien visible </a>
• Importer une image :

<img src=“emplacement du dossier contenant l’image“ alt=“nom altenatif à l’attention des internautes non-voyants“/> (balise auto-fermante)
Cibler / désigner des éléments :
Classes et identifiants : il est essentiel de créer en amont des style des classes et des identifiants qui permettront ensuite en CSS de
viser afin d’attribuer tel ou tel style à différents éléments présents dans ma page. un identifiant ne peut porter que sur un objet unique et
structurant de la page (par exemple un menu, un pied, un entete) ; une classe sera utilisée pour un style présent plusieurs fois sur la page,
COMMUN à plusieurs éléments.
<div id="exemple">
contenu de la boîte
</div>  (commentaire essentiel qui indique à quelle division correspond cette balise fermante).
<p class=“nom du contenu“>contenu</p>

<ul class=“nom du contenu“ >contenu</ul>
<a class=“nom du contenu“>contenu</a>
Il est possible d’appliquer 2 classes à un même élément en les séparant par un espace (par ex : <h2 class=“sommaire titre2“> (et il est tout
autant possible en CSS d’appliquer une classe à plusieurs sélecteurs)
Toute page HTML possède une généalogie des boîte en contenant d'autres :
- ancêtre : un contenant se trouvant à la racine du document (par ex : <body>)

- Parent : un contenant DIRECT d'un élément qui est de fait son enfant
- Frères : éléments partageant le même parent
Identifier uniquement les éléments au 1er niveau de la hiérarchie, les ancêtres. Dans ma feuille css, utiliser des sélecteurs de
descendants afin de mieux viser les sélecteurs dans la multitude de styles utilisés. Plus j’exploite les PROPRIÉTÉS D’HÉRITAGE que
proposent les éléments “ancêtres“ désignés au préalable (il n’est pas nécessaire de nommer les éléments “enfants“), plus mon code sera
allégé, et plus ma page s’affichera vite.
Par exemple, en HTML, je crée cette liste de liens que je souhaite styliser :
ul <id=“menu»>
<li><a href=“index.html“>photos<a>
<li><a href=“index.html“>Chroniques<a>
<li><a href=“index.html“>news<a>
</ul>
La liste <ul> est l’ancêtre des item <li> qui contiennent eux-même les liens <a> auquel je souhaite attribuer un certain style. Pour cela, je
désigne tout simplement le sélecteur suivant :
#menu li a {
text-decoration: none;
}
• Formulaires :
La balise <form> contient tout le formulaire.
La balise <input> correspond à un champ à remplir.
La balise <submit> correspond à un champ de validation.
• Créer une version imprimable :

Ajouter dans le doctype :
<link rel="stylesheet" type="text/css" href="par exemple imprimante.css" media="print"/>
Identifier ensuite dans ma structure HTML les éléments à ne pas imprimer :
Class=“no print“
En style :
. no print {
display: none
}
- Fermer mon document et l’ouvrir sur Komodo Edit 5 pour épurer le code html et créer les feuilles de style css.
Styler en CSS :
L’aspect graphique relève des feuilles de style CSS2. Précéder mes styles CSS par un commentaire CSS pour mieux me repérer afin de
savoir à quels éléments j'attribue les styles qui suivent :
/*styles globaux*/ ou /*styles de la colonne de gauche*/
Une rêgle de style est constituée d’un sélecteur et d’un déclaration de style :
sélecteur (par ex : # entete ou .menu li) {

propriété: valeur ;
}
Il est possible d’attribuer une déclaration à plusieurs sélecteurs, par ex :
h2, p, body {
}
Afin de styler les différents éléments d’un site sans confondre les noms, on rajoute devant les éléments enfants la classe ou l’identifiant de
leur parent ou ancêtre. Par exemple :
La balise <div class="fiche-produit"> contient des balises <h2>, <p>, et une div #argumentaire.
Dans la feuille de style, on rajoute donc à tous les élément-enfants contenus dans cette div la classe ou l'identifiant de leur élément-
parent :
.fiche-produit h2 {
}
.fiche-produit p {
}
.fiche-produit .argumentaire {
}
Attacher une feuille de style :

Soit :
<link rel="stylesheet" type="text/css" href="nom de la feuille de style.css">
ou :
<style> : <style type="texte/css">
@import url(nom de ma feuille de style.css) ;
</style>
• BOîTES :
La balise DIV est l'unique balise de type BLOC qui ne possède pas de marges INTERNES ni EXTERNES (contrairement aux balises <p>,
<ul>, <li>, <h1>). Il faut donc pour toutes les autres balises de type bloc avec des taille précisées leur appliquer une margin : 0px et un
padding : 0px.
Créer une page centrée :

Appliquer à l'élément <body> les valeurs suivantes :
En html :
<body>
<div id="conteneur">
tout mon document
</div> 
</body>
en css :
body {
margin: 0px ;
padding: 10px ;
font-size: 80% (minimum) ;
font-family: Arial, Helvetica, sans-serif ;
color: white ;
Background: black url(chemin vers l'image) ; Ici la valeur black est essentielle car elle permet d'afficher une couleur de fond au cas où l'image
de fond ne s'affiche pas pour une raison ou une autre.
}
#conteneur {
width: 750px ;
margin: 0 auto ;
}
Pour CENTRER le contenu IN-LINE (texte ou image) d'un BLOC :

.edito {
text-align: center ; (ou justify, left, ou encore right)
}
- Transformer un élément in-line en élément de type bloc :

display: block ;
- Transformer un élément de type BLOC en in-line :

display: inline ;
- “Liquéfier“ le texte d'une boîte :
width: auto ;
- Définir une taille maximum à une boîte :

max-width: ;
max-height: ;
- Définir une hauteur minimum à une boîte (utile dans le cas où la boîte affiche en background une image mesurant 160 pixels de haut et
susceptible d'accueillir du texte en plus) :
min-height: 160px ;
- Retrait intérieur dans la boîte :

Padding: 3px (s’appliquera sur les 4 côtés intérieurs) ;
Padding: 3px (s’appliquera en haut et en bas) 6px (s’appliquera à gauche et à droite) ;
Padding: 3px 6px 7px 9px (1ère valeur s’appliquera en haut, 2nde à droite, 3ème en bas et 4ème à gauche) ;
- Retrait extérieur dans la boîte :

margin: 3px (s’appliquera sur les 4 côtés intérieurs) ;
margin: 3px (s’appliquera en haut et en bas) 6px (s’appliquera à gauche et à droite) ;
margin: 3px 6px 7px 9px (1ère valeur s’appliquera en haut, 2nde à droite, 3ème en bas et 4ème à gauche) ;
- Espacer des éléments blocs :

margin-top: 6px ;
margin-bottom: 9px (Attention à la fusion des marges : par exemple dans ce cas,le navigateur conservera toujours la marge la PLUS ELEVEE :
les éléments seront séparés de 9 pixels car les marges fusionnent. Par contre, les paddings et les borders s'additionnent entre eux et s'ajoutent
aux width.)
• IMAGES :
- Placer une image d’arrière-plan dans un élément de type BLOC :
background-image: url(nom du dossier source) ;
- Gérer la répétition d'une image en arrière-plan :

background-repeat: ;
- Positionner une image d'arrière-plan dans une boîte (la 1ère valeur correspond à l'abscisse (en X), la seconde à l'ordonnée (en Y) :
background-position: right center ;
Il est possible de regrouper ces propriétés en notation synthétisée :

background: valeur de background-image valeur de background-color valeur de background-position valeur de background-repeat
ou
body {
background: url (nom de l'image.jpg ou .png) center right ("position") no-repeat (repeat) ;
scroll ("attachment" cad fixation de l'image en cas de barre d'ascenseur) ;
}
• CADRES :
- Appliquer un cadre REGULIER à une "boîte":

border: 1px solid gray ;
- Appliquer un cadre IRREGULIER à une "boîte":

border-width: 1px 2px ;
- Pour supprimer la bordure bleue présente par défaut autour des images-liens :
img {
border: 0 (width) none (style) ;
}
Exemple de style affichant un pavé de texte s'appuyant sur un filet à sa gauche :

.bordure {
width: 350px ;
text-align: justify;
margin-left: 0px ;
Border-left: 1px solid #282E3D ;
padding-left: 9px;
}
• POSITIONNEMENT DES BOÎTES :

Le flux courant est l'ordre d'écriture des éléments d'une page dans le document HTML. Ce concept peut être comparé à un courant qui
monte et "pousse" les éléments vers le haut de la page.
Différentes propriétés de POSITIONNEMENTS :
- Courant : Si un élément de type bloc n'a aucune width précisée, il occcupe toute la largeur de la page dans le flux.
un élément enfant peut être précisément positionné en "top", "right" par rapport à la position de son élément parent géré en "position-relative".
La balise <div> est la SEULE balise de type BLOC qui ne possède pas de marges internes et externes, contrairement aux balises <p>, <ul>,
<a>, etc
- Relatif : les valeurs (top, right, bottom,ow left) decalent l'élément (<p>, <a>, <span> ou <img>) par rapport à son parent DIRECT.
- Absolu : les valeurs (top, right, bottom,ow left) decadent l'élément (<p>, <a>, <span> ou <img>) par rapport à son ancêtre position (<body>
par défaut, sinon il faut appliquer une PROPRIÉTÉ de POSITION à son élément conteneur)
- Flottant : l'élément est poussé à DROITE ou à GAUCHE du conteneur et la SUITE DU FLUX s'écoule AUTOUR. Il ne peut pas être centré.
C'est une solution intermédiaire entre le flux courant et absolu (qui fait sortir l'élément du flux complètement). Le style "clear: both" appliqué à
l'élément suivant agit comme une barrière interdisant tout flottant à son niveau et peut être caché :
.séparation {
clear: both ;
visibility: hidden ;
}
- Aligner des boîtes :

créer une boîte "parent" contenant les boîtes "enfants" et leur servant de référent :
position:relative ;
- Supprimer les fusions des marges des éléments "descendants":

padding: 1px 0px ;
- Caler une boîte en haut à gauche :

float: left ;
- Aligner un élément sous un élément flottant :

clear: both ;
• TEXTES :
Une police de caractère devant être affichée doit nécessairement être fournie par l’ordinateur du visiteur. Il faut donc se limiter aux fontes
standard livrées par défaut avec les systèmes d’exploitation :
• sans empattements : Arial, Arial Black, Verdana, Trebuchet MS

• avec empattements (appellées «Serif») : Georgia, Times New Roman, Impact
• icones : Webdings
- Choisir une fonte : afin de maîtriser l’affichage, il faut suggérer 2 ou 3 possibilités de remplacement sur toute la page :
body {
font-family: Trebuchet, Times, Verdana, Sans-Serif ;
}
ou
body {
font-family: Arial, “Helvetica, Sans-Serif ;
}
- Modifier la taille du texte :

• Titres :
font-size: 1.2em;
Texte courant :
• font-size: 0.9em (minimum pour des questions de lisibilité) ;
- Modifier l'interlignage :
.colonnes {
line-height: 1.4em (correspond à 140 %) ;
- Modifier l'interlettrage d’un mot :

.ecart {
letter-spacing: 1.3em ;
}
- Augmenter l'espace ENTRE les MOTS :

.ecart {
word-spacing: 1.4em ;
}
- Augmenter l'espace DANS un mot :

.ecart {
letter-spacing: 1.4em ;
}
- Justifier le texte :
.justification {
text-align: justify ;
}
Pour modifier la LIGNE DE BASE d'un texte :

line-height: 2px ;
(pour centrer verticalement, rentrer la même valeur que celle de height de l’élément conteneur)
- Appliquer un réaction de survol au menu (ou «roll-over menu») :

.menu a:hover a :{
color: orange ;
}
- Identifier un lien déja activé :

.menu a:visited {
color: brown ;
}
- Capitales :
.majuscules {
text-transform: uppercase ;
}
• LIENS :
- Supprimer le soulignement d'un lien :
text-decoration: none ;
CONSEILS :
- INDENTER (avec une tabulation) le contenu des éléments <div> ou <ul> confèrent une clarté visuelle aux pages de code.
- Précéder mes styles CSS par un commentaire CSS pour mieux me repérer afin de savoir à quels éléments j'attribue les styles qui suivent :
/*styles globaux*/ ou /*styles de la colonne de gauche*/
Affichage plus rapide : il est possible de PRECHARGER des images récurantes pour rendre le site plus réactif, notemment lors du survol du
menu :
en HTML :
<body>
<div class=cache>
<img src="" alt=""/>

</body>
En css :
.cache {
position: absolute ;
left: 0 ;
top: - 5000px ; (ainsi l'image se charge mais hors de la page affichée)
}
Pour corriger un ou des bogues, il faut déterminer d’où cela provient :

Appliquer une couleur d’arrière-fond à mes boîtes
Appliquer un {display : none ;} successivement à chaque élément pour localiser lequel est en cause.
Appliquer temporairement à tous mes éléments des marges internes et externes à 0 :
Au tout début de la feuille de style, écrire * {margin : 0 ; padding : 0 ;}
Une fois le test de détection effectué, supprimer ce style.
JARGON :
- l’ARBORESCENCE : il s’agit de la hiérarchie des blocs (les descendants dépendent directement des ancêtres)
DYNAMISME :
Une page possède une ambiance de couleurs générale, composée de 2 teintes principales (à différents pourcentages) et une 3ème qui
apparait par petites touches et qui tranche avec le reste. On la retrouvera par exemple dans les textes des éléments réagissant en rollover
(sélecteur a :hover).
Faire apparaitre une bulle qui s'affiche automatiquement au-dessus d'un lien :
<a href="photo.html" title="cliquez ici pour voir les jolies photos"> photos (ou <img src="image.png" alt="photographie"/>) </a>
Il faut un menu (horizontal ou vertical), des boutons d’accès rapide, un fil d’ariane (sélecteur a :visited).
Il faut un lien de retour en haut de page :

<a href=“#“>retour en haut de page</a>
Internet Explorer 6 :
- Il est fortement conseillé d'utiliser les commentaires conditionnels pour CONTOURNER les bogues. Ils se placent à l’intérieur de la balise
<head> :
< !-- [if IE]>
Saisir ici le code HTML réservé à IE
< ! [endif] -->
- Le mode QUIRKS affiche un modèle de boîte érroné concernant IE jusqu'à la version 6. Pour éviter cet affichage, il faut bien rédiger le
doctype.

CSS2 - Synthese Formation

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS2 - Synthese Formation

Transféré par

Droits d'auteur :

Formats disponibles

Webdesign

La balise <head> contient des informations invisibles mais indispensables :

La balise <body> contient les éléments visibles.

Les balises html sont classées en deux catégories :

Dimensions en pixels d’un fond de page : 750 px par 600 px

• Importer une image :

Cibler / désigner des éléments :

<p class=“nom du contenu“>contenu</p>

- ancêtre : un contenant se trouvant à la racine du document (par ex : <body>)

• Créer une version imprimable :

sélecteur (par ex : # entete ou .menu li) {

Attacher une feuille de style :

Créer une page centrée :

Pour CENTRER le contenu IN-LINE (texte ou image) d'un BLOC :

- Transformer un élément in-line en élément de type bloc :

- Transformer un élément de type BLOC en in-line :

- Définir une taille maximum à une boîte :

- Retrait intérieur dans la boîte :

- Retrait extérieur dans la boîte :

- Espacer des éléments blocs :

- Gérer la répétition d'une image en arrière-plan :

Il est possible de regrouper ces propriétés en notation synthétisée :

- Appliquer un cadre REGULIER à une "boîte":

- Appliquer un cadre IRREGULIER à une "boîte":

Exemple de style affichant un pavé de texte s'appuyant sur un filet à sa gauche :

• POSITIONNEMENT DES BOÎTES :

Différentes propriétés de POSITIONNEMENTS :

- Aligner des boîtes :

- Supprimer les fusions des marges des éléments "descendants":

- Caler une boîte en haut à gauche :

- Aligner un élément sous un élément flottant :

• sans empattements : Arial, Arial Black, Verdana, Trebuchet MS

- Modifier la taille du texte :

- Modifier l'interlettrage d’un mot :

- Augmenter l'espace ENTRE les MOTS :

- Augmenter l'espace DANS un mot :

Pour modifier la LIGNE DE BASE d'un texte :

- Appliquer un réaction de survol au menu (ou «roll-over menu») :

- Identifier un lien déja activé :

<img src="" alt=""/>

Pour corriger un ou des bogues, il faut déterminer d’où cela provient :

Il faut un lien de retour en haut de page :

Vous aimerez peut-être aussi