CSS - Cascading Style Sheets

par **s.souhail** Sam 4 Nov 2006 - 4:21

Langage de feuilles de style

Un langage simple pour associer des propriétés de style à des éléments dans les documents structurés
Cascade : plusieurs feuilles de style peuvent être combinées (auteur, site, agent, utilisateur)
Exemple : sans CSS, avec CSS

Référence : http://www.w3.org/TR/REC-CSS2

par **s.souhail** Sam 4 Nov 2006 - 4:22

Spécifier la présentation des documents de façon externe

Sans modifications, un même document peut être présenté de différentes façons :
- Selon le lecteur
- Selon les caractéristiques de l'appareil de restitution
Un ensemble cohérent de documents peuvent être présentés de façon homogène en leur appliquant les mêmes modèles de présentation

Avantages

Maintenabilité
Indépendance des plates-formes
Performances

par **s.souhail** Sam 4 Nov 2006 - 4:24

Une feuille de style est un ensemble de règles comprenant chacune

Un sélecteur, qui spécifie les éléments auxquels la règle s'applique
Des propriétés, avec leurs valeurs, à appliquer à ces éléments

Exemple : h1 {color: yellow; font-weight: bold}
ul ul li {font-size: small}

par **s.souhail** Sam 4 Nov 2006 - 4:26

Sélecteur universel : *
* {border: 1px red solid}
Sélecteur d'élément : E
h1 {color: yellow; font-weight: bold}
Sélecteur de descendance : E F E > F E:first-child
ul ul {font-size: small}
Sélecteur de voisinage : E + F
div + p {margin-top: 2em}
Sélecteur d'identificateur : #id
#myname {color: yellow; font-weight: bold}
Sélecteurs de classe : .class E.class
.header {background-color: black; color: white}
Pseudo-classes : E:link E:visited E:active E:hover E:focus
a:link {color: red}
Sélecteur d'attribut : E[att] E[att="val"] E[att~="val"]
note[severity="warning"] {color: red; font-size: 16pt}
Plusieurs sélecteurs E1, E2, E3

par **s.souhail** Sam 4 Nov 2006 - 4:27

124 propriétés

Polices : famille, taille, style, variantes, graisse, étirement, etc.
Couleur du texte, couleur de fond, image de fond
Format : Bloc, élément flottant, élément en ligne
Position absolue, relative, superposition
Géométrie : Largeur, hauteur, marges, filets
Génération de contenu, numérotation, marques de listes
Description des pages, contrôle des sauts de page
Texte : indentation, alignement, décoration, soulignement, interlettrage, etc.
Tables : bordures, cadres, espacement, etc.
Sortie vocale : volume, pauses, effets sonores, position de la source, débit, hauteur du son, etc.

par **s.souhail** Sam 4 Nov 2006 - 4:29

Il existe une liste de couleurs prédéfinies
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow et orange.

Exemples :
em {color: #f00} /* #rgb */
em {color: #ff0000} /* #rrggbb */
em {background-color: rgb(255,0,0)} /* integer range 0 - 255 */
em {background-color: rgb(100%, 0%, 0%)} /* float range 0.0% - 100.0% */

par **s.souhail** Sam 4 Nov 2006 - 4:30

Les unités relatives :

em: la valeur du 'font-size'
ex: la hauteur du x 'x-height' dans la fonte
px: pixels, relatif à la définition de l'écran
%: pourcentage

Les unités absolues :

in: inches -- vaut 2.54 centimètres
cm: centimètres
mm: millimètres
pt: points -- vaut 1/72ème de inch
pc: picas -- vaut 12 points

par **s.souhail** Sam 4 Nov 2006 - 4:31

Spécification de :

font-family : un nom de la famille 'helvetica', 'arial', ''verdana', 'times', 'courier'
et/ou une famille générique 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'.
font-style : valeurs 'normal', 'italic', 'oblique'
font-variant : valeurs 'normal' ou 'small-caps'
font-weight : valeurs 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900
font-size : xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', ou valeur relative, ou valeur absolue
font : ['font-style' 'font-variant' 'font-weight'] 'font-size' [ /'line-height'] 'font-family'

Exemples : p {font: 12pt/14pt sans-serif}
p {font: 80% sans-serif}

par **s.souhail** Sam 4 Nov 2006 - 4:37

À chaque élément du document est associée une boîte qui possède

des marges (margin)
une bordure (border)
du remplissage (padding)
un contenu (content)

Des propriétés CSS contrôlent ces paramètres dans les quatre directions

Exemple : margin: 1em auto; /* top/bottom = 1em right/left = auto */
padding: 1em 2em 3em; /* top = 1em right/left = 2em bottom = 3em */
Figure (marche sous firefox j sai pa prkoi n marche pas ss IE)

par **s.souhail** Sam 4 Nov 2006 - 4:38

Épaisseur
border-top-width, border-right-width, border-bottom-width, border-left-width, border-width

Couleur
border-top-color, border-right-color, border-bottom-color, border-left-color, border-color

Style
border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
valeurs : none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', et 'outset' peuvent être interprétés comme 'solid'

Raccourcis
border-top, border-bottom, border-right, border-left, border

par **s.souhail** Sam 4 Nov 2006 - 4:52

Les boîtes des éléments successifs de la structure se juxtaposent avec fusion des marges contiguës

Exemple :

Code:: <div> <p>First paragraph.</p> <p>The second...</p> </div>

Figure(meme probleme avec IE)

par **s.souhail** Sam 4 Nov 2006 - 4:54

La propriété float pousse la boîte à gauche ou à droite de la ligne courante.
La boîte doit avoir une largeur explicite (propriété width) ou une dimension intrinsèque.
img {float: left}
CSS - Cascading Style Sheets Floateg

par **s.souhail** Sam 4 Nov 2006 - 4:56

Quand une boîte mise en ligne se superpose avec un élément float, le contenu, le fond et la bordure de cette boîte sont poussés sur le bord de l'élément float.

CSS - Cascading Style Sheets Float2p

par **s.souhail** Sam 4 Nov 2006 - 4:56

La propriété clear permet d'annuler le comportement précédent.

p {clear: both}
CSS - Cascading Style Sheets Floatclear

par **s.souhail** Sam 4 Nov 2006 - 4:57

Le positionnement est réalisé par la combinaison des règles suivantes

position définit la boîte bloc qui sert de repère (containing block) sauf pour la valeur 'static'.
- 'relative' par rapport à l'englobant.
- 'absolute' par rapport à la racine du document.
- 'fixed' par rapport à la fenêtre (voir exemple)

left, right, top, bottom fixent un des bords de la boîte par rapport à la boîte racine.
width, height fixent les dimensions de la boîte

par **s.souhail** Sam 4 Nov 2006 - 4:58

La présentation peut varier selon les média :

aural, braille, embossed, handheld, print, projection, screen, tty, tv

Sélection des règles CSS selon les média : @media print {
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt}
}
@media screen, print {
body {line-height: 1.2}
}

par **s.souhail** Sam 4 Nov 2006 - 4:59

La règle @import permet d'inclure un fichier CSS dans un autre fichier CSS
Cette règle doit être placée en tête du fichier (avant toute autre règle).
Elle peut spécifier un media type.

Exemples : @import "mystyle.css";
@import url("mystyle.css");
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

par **Aissam.IZIMI** Mer 7 Fév 2007 - 12:34

C'est pas aussi simple que tu le prétend monsieur Souhail.. Le plus grand problème c'est la compatibilité avec les différents navigateur.. ça c'est un casse-tête..

par **dragoun** Ven 5 Déc 2008 - 7:54

Salut a tous
Bon c'est mon premier poste dans ce forum alors j'espère que je vais pas faire de gaffe Rolling Eyes

Bon vue que le sujet parle du HTML/CSS j'aimerai bien vous proposer quelques livres qui traite ce sujet je tien juste a noter que c'est en anglais
Pour télécharger les livres voici les liens
HTML 4 For Dummies 2005
=> http://rapidshare.com/files/170503617/HTML_4_For_Dummies__5th_Edition__2005_.pdf

CSS The Definitive Guide 3rd Edition 2006
=> http://rapidshare.com/files/170510256/CSS_-_The_Definitive_Guide__3rd_Edition__2006_.chm

@ Mr AISSAM

C'est pas aussi simple que tu le prétend monsieur Souhail.. Le plus
grand problème c'est la compatibilité avec les différents navigateur..
ça c'est un casse-tête..

Le Navigateur qui pose problème c'est internet explorer ,essayer plutôt Firefox ou bien Opera Smile

par **shintok** Sam 6 Déc 2008 - 6:47

Salut
Merci pour ces infos, Smile

Mais le problème n'est pas uniquement IE, Firefox a ses incompatibilité qui marchent par exemple sur Konqueror et safari , chaque navigateur a ses incompatibilités .

J'ajoute Un lien pour voir les incompatibilités majeurs de IE :
http://www.christopher-jablonski.com/fr/reperes/ie6.shtml

par **E.Fahd** Dim 7 Déc 2008 - 17:17

Salam,

- Normalement IE8 (qui est au stade de beta2) devrait être complètement compatibles avec les specifications CSS2.1 (ce qui n'est même pas le cas de Firefox). Donc, déjà à la sortie d'IE8, il sera possible d'afficher la même chose sur Opera, Safari, Firefox et IE sans avoir recour à des hacks.

- Le gros problème avec CSS, et avec touts les standads de la W3C d'ailleurs, c'est que ça avance TROP lentement par rapport à ce que l'on peut vraiment faire. C'est ça qui a fait que certaines sociétés (comme Microsoft) ont décidé, par le passé, de laissé tomber la W3C et de faire leurs propres technologies. Maintenant c'est entrain de changer, notemment avec l'ouverture d'Internet Explorer aux standards. Reste encore à assurer la transition entre la situation actuelle et celle où touts les navigateurs interpreteront le code de la même façon.

PS : Le blog de la IE-Team (équipe qui développe Internet Explorer et son moteur de rendu Trident) est intéressant à lire pour ceux qui s'intéressent au futur du développement Web : IE Blog

par **Aissam.IZIMI** Lun 15 Déc 2008 - 8:57

Le Navigateur qui pose problème c'est internet explorer ,essayer plutôt Firefox ou bien Opera

Le vrai casse-tête c'est le fait de pouvoir rendre le site compatible avec le plus grand nombre de navigateurs même avec les incompatibilités.. Et comme a dit Fahd -que je remercie pour les infos- ils faut actuellement plein de hacs pour contourner ces failles. On a pas le droit de négliger IE juste parce qu'il présente pleins d'incompatibilités..
Toi par exemple tu développe des site juste pour les utilisateur de firefox? que fait tu des plus de 80% des gens qui n'utilisent que IE?

PS: merci saad pour le lien.

par Contenu sponsorisé

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

Objectifs de CSS

Principes

Sélecteurs CSS2

Quelques propriétés CSS2

Couleurs

Unités

Fontes

Modèle de boîte

Bordures

Assemblage de boîtes

Propriété float

Assemblage de boîtes et float

Propriété clear

Positionnement

Media types

Règle @import

Re: CSS - Cascading Style Sheets

Re: CSS - Cascading Style Sheets

Re: CSS - Cascading Style Sheets

Re: CSS - Cascading Style Sheets

Re: CSS - Cascading Style Sheets

Re: CSS - Cascading Style Sheets