[faq][css] Tutorial CSS Niveau 2 (voire 3) [07/03/2005]

Logiciel & apps Programmation
1

Je remettrais jamais à jour mon guide, alors autant en créer un nouveau basé sur de la vraie doc :

http://www.w3.org/TR/REC-CSS2/propidx.html
http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc

J’aimerai bien voir CSS 3 qui a l’air plus puissant, mais comme je retrouve plus la doc, bah …

[edit] Pendant les dix minutes de Flood, hé bien j’ai fais une pause Google :

http://www.w3.org/TR/css3-roadmap/
http://www.w3.org/TR/css3-text/
http://www.w3.org/TR/2002/WD-css3-linebox-20020515/

CSS 3 will rowor :slight_smile:

Grosse mise à jour :

Il y a une chose essentielle aux CSS qu’il faut je dirais mettre bien profond quelque part (…), ce sont les noms des identifiants ! Les identifiants, c’est quoi? hé bien ce sont les noms des classes CSS, ou encore le contenu des attributs id des balises (ex: ).

http://www.w3.org/TR/REC-CSS2/syndata.html

IDENT {ident}
HASH #{name}

Et plus loin ident :

ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \[0-9a-f]{1,6}[ \n\r\t\f]?
escape {unicode}|\[ -~\200-\4177777]
nmchar [a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*.[0-9]+

Moralité :

Un nom de classe NE PEUT ET NE DOIT CONTENIR que les caractères suivants :

au début : [a-zA-Z] | [^\0-\177] | séquence d’échappement
suivi de : [a-z0-9-] | [^\0-\177] | séquence d’échappement

En gros ? classe_truc est INVALIDE tandis que classe-truc est VALIDE.

Tandis qu’un nom d’identifiant ne peut contenir que les caractères suivants :

au début: [a-z0-9-] | [^\0-\177] | séquence d’échappement
suivi de: pareil!

En gros ? même baratin foo_truc est INVALIDE mais pas foo-truc !

SI VOUS VOULEZ DU CODE CSS COMPATIBLE, N’UTILISEZ PAS LE CARACTERE SOULIGNE (_) MAIS BIEN LE TIRET (-) !!!

2

1. Qu’est ce qu’une feuille de style CSS ?

Une feuille de style permet à contrario du langage XML (que ce soit un dérivé ou un vrai document XML) de définir une mise en forme des éléments du document XML. Le document XML étant alors utilisé pour la structure (ie: par exemple, on pourrait avoir un élément racine puis des puis des , etc)

CSS veut dire Cascading Style Sheet (Feuille de Style en Cascade).

XML signifie eXtended Markup Language et est une extension de SGML.

HTML est quant à lui un dérivé de SGML tandis que XHTML est un dérivé de XML. Ca importe dans le sens où dans l’un des deux langages la casse des caractère (min/maj) est prise en compte.

3

2. Avant d’utiliser les CSS :

Vous devez vous assurer de plusieurs choses :

  1. le document XML valide son DOCTYPE. Pour cela, faites un tour sur le Validateur[/url] du [url=http://www.w3.org]W3.

  2. avoir un navigateur décent… Oui c’est triste à dire, c’est bonne vieille bouse d’IE pleine de faille de sécurité n’est pas le must du must pour les feuilles de style. Même : si vous voulez faire des vraies CSS… abandonnez tout de suite si vous n’êtes pas capable de changer de navigateur…

Disons qu’IE a une certaine façon archaïque (du genre Moi Fort, Moi imposer Loi à moi !) de gérer les feuilles de style. Si bien sûr la plupart des feuilles de style seront supportées … cela ne veut pas dire qu’elles le soient bien [ie: par exemple, width comprend la taille de la bordure du bloc sous IE, tandis que sous des vrais navigateurs, c’est une certaine somme… (voir width)

Avoir un navigateur décent ne veut pas dire « avoir autre chose qu’Internet Explorer »; non ça veut dire avoir un navigateur mise à jour réguliérement (car les normes sont mises à jour assez souvent)

Pour cela, Mozilla est parfait. Je n’ai que ça, et comme Mozilla roxe, bah j’ai pas testé le reste :slight_smile:

4

3. Appeler une feuille de style dans un document :

Selon le type de document, il y a plusieurs façon d’appeler la feuille de style :

document XML :

<?xml-stylesheet href="[b].css[/b]" type="text/css"?>

A noter que cela permet également d’utiliser des feuilles de style XSLT qui au contraire de CSS permettent de manipuler le document XML.

Ex [XSLT] : <?xml-stylesheet href="[b].xsl[/b]" type="text/xsl"?>

document XHTML :

document HTML :

document XHTML, HTML :

... declarations CSS ...

A noter :

  • dans le cas du document xml, la feuille de style doit être placée en dessous de la déclaration XML :
<?xml version="1.0" encoding="iso-8859-1"?>
  • dans les deux autres cas : les balises et doivent être incluses entre les balises et elles-mêmes incluses dans l’élément racine .

Donc : à partir du moment où vous avez lu ce tutorial, et si vos pages contiennent des trucs de ce genre :
[fixed]

... declarations CSS ... [/fixed] C'est que vous n'avez rien compris. Prenez une douche froide, relisez ce tutorial au moins 2 fois, et recommencez.

Bien sûr, il en va de même avec le cas javascript qui consiste à faire un document.write( ‹ … ›) parce que soi-disant on a pas accés aux propriétés de la page :

Si tel est votre cas, bah tant pis !

Au pire, vous pouvez vous amuser à utiliser l’attribut style valide sur à peu près toute les balises.

A noter que : un document XHTML est un document XML utilisant un DOCTYPE particulier. Donc, en théorie :

<?xml-stylesheet href="[b].css[/b]" type="text/css"?>

Peut être utilisé. Mais bon, faites gaffe… Internet Explorer risque de pas supporter, Netscape 4.7 idem, etc.

5

4. Propriété de Cascade :

CSS veut dire Cascading Style Sheet, cela veut dire qu’il y a un certain côté « Cascade » ie:

Au départ, on commence à évaluer la feuille de style de l’utilisateur (du visiteur). Elle peut influer, par exemple :

<macss.css>
[fixed]
img, applet, object {
display: none;
}
[/fixed]
Aura pour effet de supprimer toutes images et plugin si vous ne spécifiez dans la feuille de style de votre document une la propriété display. ie:

http://www.monsite.com/styles/feuille.css
[fixed]
img, applet, object {
display: block;
}
[/fixed]

Ce qui - miracle de la technologie moderne - aura pour effet de réafficher images, applet et objet au détriment de l’utilisateur (mais bon, si vous utilisez IE, et Java et/ou Flash c’est que l’utilisateur vous importe très peu, seul le côté ‹ frimeur › vous intéresse :D)

Néanmoins, l’utilisateur pourra vous dire merde quand même en changeant <macss.css>

<macss.css>
[fixed]
img, applet, object {
display: none !important;
}
[/fixed]

Là on indique que c’est très important (et parfois nécessaire) de ne pas afficher images et autres conneries.

Ensuite, viennent les propriétés du navigateur.

Par exemple [sous Mozilla] : si vous en avez marre que la balise [b] affiche du gras, ou encore que la balise 

 bouffe toute la page, ou encore que la balise 
 ne justifie pas les paragraphes, vous pouvez très bien modifier ce comportement :


Ouvrez : <Mozilla\res\html.css>

Recherchez : b (en respectant la casse)

[fixed]

b, strong {

font-weight: bolder;

}

[/fixed]

Et jartez cette déclaration (ou commentez-là)

Recherchez : pre (en respectant la casse)

[fixed]

plaintext, xmp, pre {

display: block;

font-family: -moz-fixed;

white-space: pre;

margin: 1em 0;

}

[/fixed]

Et au choix : jartez ‹ white-space ›, ou foutez comme valeur ‹ normal ›

Recherchez : p (en respectant la casse)

[fixed]

p, dl, multicol {

display: block;

margin: 1em 0;

}

[/fixed]

Et ajoutez : text-align: justify;

[fixed]

p, dl, multicol {

display: block;

margin: 1em 0;

text-align: justify;

}

[/fixed]


Sans avoir essayé, je peux vous dire qu’en théorie ça devrait changer le comportement du navigateur.


Néanmoins, si vous avez <macss.css> telle que :


<macss.css>

[fixed]

img, applet, object {

display: none !important;

}

p, dl, multicol {

display: block;

margin: 1em 0;

text-align: left;

}

[/fixed]


Alors tout les 
 seront alignés sur la gauche (sauf si vous mettez !important dans <Mozilla\res\html.css> mais bref).


 → Il y a d’autres propriétés de cascade, assez dure à comprendre (à votre avis, pourquoi j’en parle pas ?:))


[edit] Puisqu’on en est à trafiquer les pages via le navigateur :


Aller dans votre profil Mozilla

Recherchez le fichier nommé « userContent-example.css »

Ajoutez ceci :

[fixed]

iframe[width=« 468 »][height=« 60 »][scrolling=« no »],

object[width=« 468 »][height=« 60 »] {

display: none !important;

}

[/fixed]

Et sauvegardez sous : « userContent.css » (dans le même dossier que userContent-example.css)


Rechargez votre navigateur sur une page avec de la méchante pub : pouf ! plus de iframe, donc plus de pub :>


Par contre : cela peut influer sur la mise en page.
6

5. CSS , ou la mise en boite ! :

A partir du moment où vous avez votre document XML tout bien structuré, et tout et tout, hé bien comment le navigateur doit-il l’afficher ? etc etc?

Prenons un exemple simple, XHTML :

<mondoc.xhtml>
[fixed]
…

Ceci est un [b]paragraphe[/b] avec des mots en gras et en couleur !

Ceci suit le paragraphe.
Truc! .. [/fixed]

Si vous utilisez ceci, d’une part :

  1. Sans raison apparente, il y a un saut de ligne entre
    et . Ie : mon image apparaît en dessous du paragraphe.
  2. On retrouve le même phénonène avec le paragraphe alors que le texte entre [b], et entre s’affiche tel quel sur ma page.

Oui : c’est normal.

et

sont des éléments de types [b]bloc[/b] alors que , , [b] sont des éléments de types [b]en ligne[/b].

Ce qui veut dire dans le premier cas qu’ils générereont une boite, et tout le tralala : ie. l’élément suivant apparaîtra en dessous. Tandis que dans le deuxième cas, cela apparaîtra « tel quel » : c’est à dire en ligne.

On a deux types d’éléments [en ligne ou non, on verra ça plus loin] (de base) :

  1. les éléments dont le contenu est remplacé. est un exemple, aussi.
  2. les éléments qui affiche leur contenu. (

    , [b], , etc)

Concernant les éléments type ‹ bloc › :

http://www.yoyodesign.org/doc/w3c/css2/images/boxdim.gif

Ici, vous comprendrez comment est formé une boite CSS.

En outre :

une boite est formée de trois principaux éléments :
(de l’intérieur vers l’éxtérieur)

  1. L’espacement entre le bord extérieur de l’intérieur de la boite, et la bordure intérieure de la boite [padding]
  2. La bordure [border]
  3. L’espacement entre la bordure extérieure et la marge extérieure de la boite [margin]

Ca c’était pour les boites, pour que vous compreniez un peu comment ça fonctionne : les boites sont régies par plusieurs propriétés dont voici quelque unes célébres (voire plus pas pour description complètre)

display : type d’affichage de la boite : bloc (block), en ligne (inline), pas du tout (none), hérité (inherit), et d’autres propriétés liés aux tableaux et aux listes

padding : espacement intérieur de la boite. Se dérive en plusieurs propriétés.

border : bordure de la boite. Se dérive en plusieurs propriétés.

margin : marge de la boite. Se dérive en plusieurs propriétés.

float : permet de déterminer le flottement d’une boite.

clear : force le navigateur à supprimer tout flottement de boite précédent (voir desc. avancée)

width, height, left, right, top, bottom : connu du grans public !

Petit oubli :

La taille d’une boite est égale à la somme des différentes propriétés.

ie:

vous désirez que votre boite fasse 200 pixels, avec un espacement de 5 pixels sur tous les bords, une marge de 20 px à gauche et 5px à droite, une bordure de 10px à gauche, et une de 0px à droite;

Cette boite doit aussi être haute de 100 pixels, et a donc un espacement de 5px (haut/bas), une marge de 16pt sur le bas, et une bordure de 3px en haut et en bas.

Ceci nous donne :

Largeur = 200 = padding (droite, gauche) + border (droite, gauche) + margin (droite, gauche) + width.

En outre :

200 = (5 + 5) [=padding-right + padding-left] + 10 [=border-left] + (20 + 5) [= margin-left + margin-right] + width

Ce qui nous fais :

200 = 10 + 10 + 25 + width => width = 200 - 45 = 155.

Ainsi, nous devrons définir les propriétés suivantes pour avoir une boite de largeur 200 px :
[fixed]
boite200px {
padding-left: 5px;
padding-right: 5px;
margin-left: 20px;
margin-right: 5px;
border-left: 10px;
width: 155px;
}
/*Largeur : 200px */
[/fixed]

Notez que : les propriétés « uniques » ont été utilisées pour cet exemple et qu’il ne règle pas le problème de la hauteur. A vous de le faire !

7

6. Explicitions enfin les CSS :

CSS qu’est-ce que c’est réellement ? Comme vu précédemment ou du moins, je crois, c’est un ensemble de règles s’appliquant à des éléments diverses et variés.

Ca vous en dit pas plus hein?

Reprenons l’exemple précédent :

<mondoc.xhtml>
[fixed]
…

Ceci est un [b]paragraphe[/b] avec des mots en gras et en couleur !

Ceci suit le paragraphe.
Truc! .. [/fixed]

Nous avions dit que

,

était des éléments (ou boites) de type « Bloc »; [b], des éléments en lignes non remplacés et un élément en ligne remplacé.

Nous avions aussi dit qu’une CSS pouvait s’appliquer à un fichier XML. Donc à priori, il n’y a pas de raisons pour que seuls

et

. ie: dans un document XHTML le code ci-dessus apparaîtra comme souhaité c’est à dire on ‹ saute une ligne › après

, et se retrouve en dessous.

Comment cela se passe donc ?

Tout d’abord, ici on a deux balises : div et p

On doit spécifier avec la propriété display que ce sont des boites soit de type ‹ bloc › soit de type ‹ en ligne ›.

Mais pour le moment, on ne sait pas où mettre cette fameuse propriété display et encore moins ses valeurs, et comment l’appliquer à nos balises !

J’y viens !

Pour cela, on utilise la construction des CSS :

[fixed]
nom_balise {
propriété-1: valeur;
…
propriété-…: valeur;
…
propriété-n: valeur;
}
[/fixed]

Comme vous pourrez le constater :

  • nom_balise indique que la liste de n-propriété s’appliquera aux éléments <nom_balise> du document XML sans toutefois donner des précisions sur son emplacement.
  • propriété-1 … propriété-n est une liste de propriétés [dont vous trouverez la liste compléte sur la Recommandation CSS2]. Une propriété se distingue par son nom, à gauche du symbole : et par sa valeur, à droite du symbole :. Après la valeur vient un ‹ ; › permettant de séparer les propriétés. Ce n’est pas nécessaire s’il n’y a qu’une propriété, mais habituez-vous à le mettre même si c’est pas nécessaire à priori.

Donc, pour notre histoire de

,

(ou , dans un document XML logique) nous aurions :

[fixed]
div, p {
display: block;
}
[/fixed]

Jusque là c’est assez simple, non ?

Oui sauf que…

Mettons que nous ayons un document XML du genre :

<mondoc.xml>
[fixed]

Resources Documentation .. Ceci est un paragraphe. [/fixed]

(ne vous affolez pas : un document XHTML est un document XML, de même un document HTML est … presque … un document HTML… )

Là nous sommes bien embêtés : mais quelles raisons aurions nous à afficher le bloc de la balise de la même manière que le bloc de la balise ?

Aucune ! Néanmoins, notre CSS corrigée (ie: div remplacé par division, id. avec p) fera ce que l’on ne veut pas forcément : le menu apparaîtra clairement au dessus des informations du document sans qu’on puisse faire quoique ce soit tandis que nos informations, bah elles apparaîtront en dessous…

Comment faire pour appliquer les bonnes règles CSS aux éléments ?

Simplement en utilisant les sélecteurs !

  1. nous voulons que contenu dans soit affiché à gauche, comme un vrai menu de 200 pixels.
  2. nous voulons que contenu dans soit affiché tel quel sur la droite. Et pour représenter les divisions, on va foutre une jolie bordure de 2px de type inset.

<macss.css>
[fixed]
menu division {
position: fixed;
float: left;
display: inline;
left: 0px;
top: 0px;
width: 200px;
}

information division {
display: block;
margin-left: 205px;
border: 2px inset black;
}
[/fixed]

Miracle : ça marche ! [en théorie, j’ai pas testé voyez vous!]

Sélection de descandants

Nous observons la curieuse syntaxe employée :

information division

Ceci signifie ‹ appliquer la règle CSS à tous les éléments descendants de  ›

En outre :

Tous les éléments enfants nommé de seront affectés, ainsi que les éléments qui pourraient simplement être contenu dans .

Nota :

Un élément est enfant par rapport à un autre élément [b] SI l’élément est directement situé ‹ à la racine › de [b]. C’est à dire : il n’est pas contenu dans aucune autre balise. SINON on dit que cet élément est un descendant de [b] car il est quand même contenu entre et .

<pourbienpiger.xml>
[fixed]

b est mon parent, et je suis son enfant ![/url]

b est mon ancêtre, et je suis son descendant ![/url]

b est mon ancêtre, et je suis son descendant ![/url]



[/fixed]

Mais dans ce cas, qu’advient-il si par hasard nous avions eu des balises dans notre code XML ? Ben en gros, ça aurait été une belle catastrophe car la règle actuelle s’applique à tout élément contenu dans . Cela ne nous dit pas ce qu’est (enfant, etc) par rapport à .

Pour remédier à ce problème, on utilise simplement ceci :

[fixed]
menu > division {
position: fixed;
float: left;
display: inline;
left: 0px;
top: 0px;
width: 200px;
}
[/fixed]

Sélection d’enfants

menu > division veut dire « appliquer la règle à tout éléments enfants de  ».

Nota IE s’occupant d’abord de corriger les failles avant de faire des ajouts, le > ne marchera pas sous IE !

Néanmoins, nous avons toujours un problème, et de taille !

<mondoc.xml>
[fixed]

Resources Documentation .. Ceci est un paragraphe. [/fixed]

Nous avons plusieurs (s), et notre CSS va appliquer les mêmes règles pour toute les divisions, et malheureusement… on va avoir un léger problème : toutes les (s) vont êtes au même endroit.

Bon, là on pourrait simplement se dire « bon appliquons la règle à tout court », mais non. Je tiens à vous montrer les pseudo-classes !

Bref, dans notre exemple, bah comme c’est un exemple le deuxième tag de ne contient que du vide, que des valeurs par super utiles donc on se fiche éperdument car c’est un exemple et puis voilà quoi !

On ne veut donc appliquer notre règle CSS qu’au premier tag . Comment faire ?

Pseudo-Classe

Simple : en utilisant la pseudo-classe :first-child !

Notre CSS prend la forme suivante :

[fixed]
menu > division {
display: none;
}
menu > division:fisrt-child {
position: fixed;
float: left;
display: inline !important;
left: 0px;
top: 0px;
width: 200px;
}
[/fixed]

Récapitulons :

  1. menu > division va appliquer display: none (ne pas afficher) aux éléments enfants de .
  2. menu > division:first-child va réclamer que soit le premier enfant de son parent (ici: ) et lui appliquer la règle qu’on connait, en ajoutant !important après la valeur de display pour indiquer au navigateur (ou autre) que cette propriété display est plus important que tout autres déclarée avant.

Nota : element:first-child veut dire quelque soit le contexte « tout élément premier enfant de son element parent ».

Il existe d’autres pseudo-classes qui n’agissent pas au même niveau :

– element:link, element:visited

Ici, element est un lien hypertexte. Vous comprendrez donc que element est - en xhtml - forcément égal à .

:link indique que le lien n’a pas encore été visité, et :visited indique le contraire.

Les pseudos classes qui suivent ne s’appliquent pas qu’aux liens.

NOTEZ LE DANS VOTRE CALEPIN gruble!

– element:active

L’élément est activé, plus généralement : on a cliqué dessus; par exemple sur un lien : en cliquant dessus, le lien devient en général d’une autre couleur, et est entouré d’une fine bordure.

– element:hover

L’élément est survolé (l’élément, pas son parent, ni ses enfants, testez donc avec tr en xhtml).

– element:focus

On a le focus sur l’élément, ie: on peut avec le clavier taper du texte et autre connerie. Par exemple, en appuyant sur TAB je peux avoir le focus sur « Valider votre message », ou encore les divers liens.

– element:lang(c)

Ceci permet de changer certains trucs en fonction de la langue (déclarée avec xml:lang [xhtml 1.1] ou lang [xhtml 1.0]).

A noter : j’en parle pas ou presque pas, mais :

vous n’êtes absolument pas forcés de mettre element:pseudo-class
vous pouvez très bien mettre :pseudo-class, dans ce cas cela voudra dire « appliqué la règle (en fonction de la pseudo classe) à tout élément quelqu’il soit »

ex:

[fixed]
:hover {
background-color: #0f0 !important;
background-image: none !important;
border: 1px solid #080 !important:
color: #080 !important;
}
[/fixed]

Ceci appliquera la pseudo classe :hover à tout éléments où et quelqu’il soit ! Si vous voulez ne faire que les liens :

[fixed]
:link:hover {
background-color: #0f0 !important;
background-image: none !important;
border: 1px solid #080 !important:
color: #080 !important;
}
[/fixed]

Ceci va rechercher : « tout lien hypertexte, et qui est survolé »

A noter (bis) : :hover est équivalent à :hover, où '’ signifie tout élément descendants de l’élément situé à gauche.
ie:
p *:hover : tout élément descendants de

.
*:hover : tout élément descendants dans le document (bah tout quoi!)

Pseudo-Element

Après les pseudo-classes, viennent dans le même ordre d’idée, les pseudos éléments : vous ne pouvez en utiliser qu’un à la fois (au contraire des pseudos classes). Ce qui est assez logique…

– :first-line

Affecte la règle à la première ligne d’un contenu textuel.

Par exemple :

[fixed]

Bonjour ça va ? Oui et toi?

[/fixed]

On désirerai par exemple, mettre en rouge la première ligne, ie: la portion de texte entre le départ de

et la coupure automatique par le navigateur.

Par exemple vous êtes bien conscients que le navigateur se charge de sauter à la ligne les paragraphes, c’est d’ailleurs le but…

Hé bien :first-line va exactement sélectionner cette première ligne. Ok?

Donc dans notre exemple :

« Bonjour ça va ? Oui et toi » sera affiché tout en rouge sauf si on s’amuse à changer de manière signifiante la taille de la boite

.

– :first-letter

Applique un style particulier à la première lettre d’un élément. Cela vous permet par exemple de faire des jolis débuts de paragrpahe à la conte de fée (je crois que ce sont des Lettrines, bref)

Exemple du W3 [[uri=http://www.w3.org/TR/REC-CSS2/selector.html#first-letter]Source[/uri]]

[fixed]

Drop cap initial letter P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase }

The first few words of an article in The Economist.

[/fixed]

Le résutlat : http://www.w3.org/TR/REC-CSS2/images/first-letter.gif

– :after, :before :

C’est deux pseudo-éléments déterminent ce qu’il y a avant (:before) et après (:after) l’élément.

Par exemple :
[fixed]
li:before {
content:counter(chapter) « . » ;
counter-increment: chapter;
}
[/fixed]

Ou encore :

[fixed]
a[id]:after {
content: « [ » attr(id) « ] » ;
}
[/fixed]

Ce qui aura pour effet d’ajouter après tout liens ayant un attribut id la valeur de son attribut entre crochets. Ca peut être bien dans certains cas…

Nous verrons plus loin la syntaxe des sélecteurs d’attributs.

Sélecteur adjacent

Nous avons vu en gros presque tout : il nous manque les classes, et les sélecteurs d’attributs, ainsi que les sélecteurs adjacents…

Qu’est-ce ?

C’est simple : mettons par exemple que nous ayons une image, d’accord ? Cette image () peut être incluse n’importe où, hé bien souhaitons qu’on l’inclus dans un paragraphe

, ok?

Par exemple, l’image représente la première lettre du paragraphe, et donc, on doit lui appliquer un style différent des autres images.

Notre image sera bien sûr placée avant tout texte donc en gros :

lors qu'il était dans la forêt, le Petit Chapreron Rouge rencontra un loup, il lui dit "Mais que vous avez de grandes oreilles", le loup s'enfuit alors.. Le Petit Chaperon s'en alla continuant sa route paisible vers chez Grand Mère quand il vit de nouveaux le loups "Oh mais que vous avez de grands yeux"; le loup s'enfuit derechef. Plus tard sur son chemin, Le Petit Chaperon Rouge retrouva de nouveau le loup "Oh mais que vous avez un grannd Nez", le loup s'enfuya encore une fois... Un peu étonné, le Chaperons rouge continua sa route... et rencontra de nouveau le loup "Oh mais que vous avez de grandes dents". Le loup lui répondit "Mais putain tu vas me laisser chier tranquille ?!"

L’image a.png devrait être affichée sur la gauche du paragraphe p.

Pour cela, on va utiliser le symbole « + »

[fixed]
p + img {
float: left;
width: 45px;
height: 45px;
margin: 0px 5px 5px 0px;
}
[/fixed]

Cela fera ce qu’on veut.

Mais … que veut dire p + img ?

Simple :

cela veut dire « tout élément immédiatement précédé par un élément

 ».

Simple non?

Bref : ceci n’est toujours pas supporté par Internet Explorer et comme près de 90% utilise encore ce truc… … vous voyez que l’utilité des sélecteurs adjacents … c’est plus ça:/

Sélecteur d’ID

Non, ID n’est pas une abbréviation pour idée, mais pour Identifier. C’est à dire un identifiant unique. Prenons encore une fois un document XML :

<id.xml>
[fixed]

<?xml version="1.0"> print Print affiche du texte en php. [/fixed] C'est tout con : fooPrint est un identificateur unique, accessible facilement via un document.getElementById( 'fooPrint') (en DOM). idref signifie qu'on fait une référence (pas forcément unique) vers fooPrint. Jusque là rien de bien dur. Reprenons encore une fois notre exemple de menu [fixed] Resources Documentation .. Ceci est un paragraphe. [/fixed] et la CSS : [fixed] menu > division { display: none; } menu > division:fisrt-child { position: fixed; float: left; display: inline !important; left: 0px; top: 0px; width: 200px; } [/fixed] Nous la changerons ainsi : [fixed] #div1 { position: fixed; float: left; display: inline !important; left: 0px; top: 0px; width: 200px; } [/fixed] Et magie, on affichera correctement ce foutu menu ! Comment ça se passe ? hé bien on utilise # puis le nom de l'identifieur (ou identifiant?) unique, et on applique une règle spécifique. Nous verrons plus bas comment simuler cela... avec les sélecteurs d'attributs. [b]Sélecteurs d'attributs, et classe CSS[/b] Au vu de CSS 1, on sait une chose : les sélecteurs d'éléments ne sont pas suffisants. Pour cela, on pouvait déclarer des classes, etc. Par exemple : [fixed] a.foo:hover { text-decoration: blink; } [/fixed] Ici : le 'a' n'est pas obligatoire du tout, c'est juste que l'on veut appliquer ça aux liens. On pourrait utiliser une syntaxe plus chaude du genre : p > a.foo:hover : tout élément enfant de

ayant comme classe "foo" (class="foo") et étant survolé p + a.foo:hover : tout élément suivant

ayant comme classe "foo" (class="foo") et étant survolé Il me semble aussi que les trucs du genre : p.foo a.foo sont autorisés, mais je crois pas. Ne vous en servez pas ! C'est bien mimi les classes, mais bon à chaque fois faut foutre une classe CSS partout, etc, etc .. Bon certes, html permet d'en déclarer plusieurs :
Mais bon c'est pas la panacée quand même. Cela s'écrirai : [fixed) br.foo1 { } [/fixed] Avec les sélecteurs d'attributs, on pourrait écrire cela tout autrement : [fixed) br[class] {} [/fixed] Ceci s'applique à tout élément br ayant un attribut "class". la sélection d'attributs se fait entre [] on peut avoir : class|="foo1" : l'attribut classe commence par "foo1" class~="foo1" : l'attribut classe contient le mot foo1 [b]Attention[/b] Cela ne veut pas dire "contient foo1" mais bien le mot "foo1" séparé par des espaces Typiquement : Ne sera jamais capturé par : title~"foo1" par contre title~"foo1," le sera. classe="foo1" : ;l'attribut classe est exactement foo1. Ex complexe : [fixed] p[class="justify"] + img[class="left"] { float: left; } [/fixed] Ceci s'appliquerait à tout élément

muni de l'attribut class="justify" précédant toute élément muni de l'attribut class="left". Dans le même genre, on peut refaire pareil avec #id ! ([id="bidule"] au lieu de #bidule). [b]Combiner plusieurs sélecteurs[/b] Je ne l'ai pas dis car ça coule de source, mais : vous pouvez combiner plusieurs sélecteurs en utilisant le symbole virgule (,) : [fixed] p[class="justify"] + img[class="left"], div > img, div.image img { float: left; } [/fixed] Ceci applique float left à : - p[class="justify"] + img[class="left"] (voir plus haut) - tout élément enfant de

- tout élément contenu dans
ayant un attribut class="image". [#ff0000][edit] Aîe caramba ! J'ai oublié une pseudo classe, une qui peut être assez importante : [/#ff0000] :lang(identifcateur de la RFC bidule) En gros :

this is english

und das is deutsch...

Imaginons que via php par exemple on ait accés à la langue du navigateur : du genre, on a une fonction language_match( 'de' ) qui renvoie vrai si on a pu trouvé la langue 'de' (allemand). Ensuite, on utilise l'élément tel que : [fixed] /* jarte tout paragraphe qui a l'attribut langue défini, a noter : on ne fait que les paragraphes. il faudrait traiter au cas par cas. Parce que par exemple, b est de type en ligne... etc */ p[lang] { display: none; } <?php if ( language_match('de') ) { ?>

p:lang(de) {
display: block;
}

<?php } else { ?>

p:lang(en) {
display: block;
}

<?php } ?> [/fixed]

Ce qui aura pour effet d’afficher tous les paragraphe

dont la langue sera définie avec
l’attribut lang=« de » (pour allemand) ou lang=« en » pour l’anglais.

Sympa non? Oui, et non : il faut l’attribut lang, d’accord ?

Hé bien en XHTML 1.1, l’attribut lang est remplacé par xml:lang, ça change rien me direz vous,
y a juste un nom d’espace en plus…

Hé bien y a qu’à regarder le résultat sous Mozilla !

Et pire :

normalement :lang(de) est l’équivalent de [lang|=« de »].

Oui, donc on aurait pu tenter de faire fonctionner le sélecteur de langue ainsi… mais là
où c’est retord, c’est que on utilise xml:lang ( et plus lang ! ) en XHTML 1.1…

Oui, mais xml:lang c’est l’attribut lang avec un autre nom d’espace… Hé bien, rien à taper
Mozilla n’en fera rien : la seule façon d’appliquer une forme en fonction de la langue…
c’est avec l’attribut lang sans nom d’espace (xml).

Vivement CSS3 !

8

CSS 3.0 : parce que c’est mieux !

Voici plusieurs modifications de [uri=http://www.w3.org/TR/css3-selectors/#changesFromCSS2]CSS3[/url]

Attention :
si CSS2 ne fonctionnait pas totalement sous IE6, CSS3 ne risque même pas de fonctionner !

Par contre Mozilla ;)))

Possibilité de spécifier un nom d’espace par exemple pour les feuilles de style XSLT il s’agit de xsl.

On peut donc n’appliquer nos propriétés CSS qu’aux éléments XSLT :
[fixed]
<xsl:for-each select=« / »>
…
</xsl:for-each>
[/fixed]

Ce qui s’écrirai :

[fixed]
@namespace xsl url(http://www.w3.org/TR/1999/Transform);

xsl|for-each {
…
}
[/fixed]

Autre syntaxe :

xsl|* : tout élément avec non d’espace xsl (xsl:element)
|element : tout élément sans nom d’espace
|element : tout élément avec nom d’espace
| : n’importe quel élément avec nom d’espace
| : n’importe quel élément sans nom d’espace

  • : identique à | si aucun nom d’espace n’a été déclaré, sinon identiqiue à nomespace|*.

Ici : xsl doit être déclaré d’abord avec la syntaxe @namespace…

Un exemple bon à voir, ce sont les fichiers *.css dans /Mozilla/res.

Sélecteur d’attributs (supplémentaires)

attribut^=« valeur » : attribut commence par ‹ valeur ›.
attribut$=« valeur » : attribut finit par ‹ valeur ›.
attribut*=« valeur » : attribut contient ‹ valeur ›.

La syntaxe des noms d’espaces est la même :

xsl|attribut : tout attribut ayant pour nom d’espace xsl.
|attribut, xsl|, |attribut, attribut : etc

attribut et |attribut sont équivalents (pas de nom d’espaces présents donc)

Pseudo-Classes supplémentaires :

:target

Pas trop compris le truc, mais me semble que c’est pour indiquer qu’un lien pointe vers quelque chose d’interne dans le document ? (uri#truc)

ex:

[uri]
p:target {
font-weight: bold;
}
[/uri]

lien[/url]

paragraphe mais pas en gras

Si on clique sur le lien, hé bien le contenu de

est en gras.

nb: après test, j’affirme que c’est ça et que c’est bien sympa :>

:disabled
:enabled
:checked

Ces trois pseudo classes permettent de customiser l’apparence d’un élément quand il est désactivé (genre ex: ), activé ou coché.

:checked s’applique aussi aux éléments sélectionnés tels que les listes déroulantes.

:indeterminate

Etat indéterminé, ex: une liste de radio box et aucune d’elle n’est cochée.
Plus généralement : c’est un élément qui n’est ni coché ni décoché (si si!).

:root

Ceci s’applique à la racine d’un document XML : html en XHTML, etc.

:nth-child(an+b)

Ce truc bizarre permet de sélectionner le an+b-ième élément enfant d’un élément. (a, b appartenant aux entiers relatifs)

ex :
[fixed]

1
2
3
4
5

[/fixed]

Par exemple :
[fixed]
truc:nth-child(2n) {
display: none;
}
truc:nth-child(2n+1) {
display: inline;
}
[/fixed]
Ceci aura pour effet de n’afficher que les 2n+1 ième éléments de truc, en gros ? Ca affichera « 135 ». Marrant non?

A noter que : 2n est équivalent à even et 2n+1 à even.

Si a = 0, le n n’est pas obligatoire. Dans ce cas :
[fixed]
truc:nth-child(3) {
display: inline;
}
[/fixed]
N’affichera que « 3 ».

id. si a = 1 : on peut mettre n au lieu de 1n
id. si b = 0 : on peut mettre an au lieu de an+0

A noter que :
element:nth-child(n) et element sont équivalents, mais element:nth-child(n) est plus spécifique.

Quand a et/ou b sont négatifs, bah…

:nth-last-child()

Pareil que nth-child si j’ai bien compris, sauf qu’on compte à partir du dernier élément.

Ex de la doc:
[fixed]
tr:nth-last-child(-n+2) /* represents the two last rows of a HTML table */
[/fixed]

:nth-of-type(an+b)

pour an+b voir plus haut

Sinon :

ceci a pour effet de choisir les an+b élément de même type.

Par exemple (de la doc!)
[fixed]
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
[/fixed]

Alterne dans les positions d’image.

:nth-last-of-type(an+b)

théoriquement : commence par le dernier element de même type dans le document.

:first-child

Equivalent à : :nth-child(1);

:last-child

Equivalent à : :nth-last-child(1);

:first-of-type <=> :nth-of-type(1)

Premier élément de type
Ex de la doc :

dl dt:first-of-type

[fixed]

gigogne
fusée
multistage rocket
table
nest of tables
[/fixed]

Cela s’appliquera aux deux premiers

:last-of-type <=> nth-last-of-type(1)

Voir nth-last-of-type

element:only-child

Identique à :first-child:last-child.

Cela veut dire « enfant unique de  »

element:only-of-type

identique à :first-of-type:last-of-type

Cela veut dire « seul élément »

:empty

S’applique aux eléments vides, ie: en XHTML (par exemple)

:contains( « foo » )

Ca c’est du fort !
Par exemple, dans vos moteurs de recherche, vous auriez plus qu’à appliquer une feuille de style du genre :

*:contains(« mot-clef ») {
background-color: black;
color: white;
}

Tout ce qui contient « mot-clef » (en jartant tout tag XML !! ie : « mot-clef » est bon !) sera mise en blanc sur noir (et pas seulement « mot-clef »)

:not(sélecteur)

Négation d’un sélecteur
Ex:
:not(:link)

Prend tous sauf les liens non visités.

id: pour les boutons non désactivés :

button:not([DISABLED])

Pseudo-Eléments supplémentaires :

Déjà, on écrit plus les pseudo éléments de CSS2 et 1 pareillement : on doit metre ::

Attention : sous Mozilla 1.4 la syntaxe :: n’est pas supporté… et aussi, tous les pseudo éléments ne sont pas supportés.

ex: element::after

Rassurez-vous, les navigateurs DOIVENT toujours repérer les pseudo-éléments de CSS 2 et 1 avec un « : ».

::selection

Pseudo élément très très intéressant puisqu’il représente la sélection (de texte) en cours !

Normalement, seules les propriétés suivantes peuvent être utilisées : color, cursor, background, outline
(donc pas de bordure merdique je pense)

Sélecteur adjacents :

Ajout d’un nouveau sélecteur tilde (~) (Alt Gr + 2)
Celui-ci permet de sélectionner tout élément suivant un autre élément :

truc ~ *

Ceci affectera tout élément qui suivent .

De tout cela je noterai :

  1. Mozilla supporte partiellement CSS3.0

Supportés :
:target
:last-child
:root
:empty
:checked
:not
sélecteur d’attributs avancé (^=, $=, *=)

Le reste n’a pas l’air de fonctionné… dommage:/
9

Pour ce qui concerne les propriétés, je vous renvoie à ceci :

http://www.w3.org/TR/REC-CSS2/propidx.html

Je n’ai pas le temps pour le moment de le faire.

10

Pour ceux qui s’intéresse à IE, qui suit différement les normes CSS1 (et ne suit pas les normes CSS2 ni 3)

http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true

11

okay sans-nom
y-a de bonnes infos là (surtout pour qui se donne la peine de taper ça dans une page et de visualiser :wink: bien que ce soit un peu dans le désordre.

2 questions :

  • quelle est la propriété pour centrer un élément bloc ?
    exemple avec une page où 3 « colonnes » sont définies avec ‹ float:left ; width:33%; ›

si on veut centrer un élément bloc dans l’une de ces colonnes, comment on fait ?

  • quand doit-on utiliser la propriété ‹ display:inline/bloc ›, sachant que la propriété ‹ float:left/right › permet d’afficher une balise bloc comme

    ou [*] inline ?

12

  1. margin: 0px auto; en toute logique. Cela fera des marges sur la droite/gauche de x% de manière à ce que le contenu soit centré. float, c’est pour faire flotter les éléments pas pour les aligner…

  2. float est mal géré par les navigateurs, même Mozilla. Si tu veux, quand tu place un float quelque part, si l’élément adjacent est un bloc, celui-ci sera « cassé » en deux et s’affichera comme une union de deux rectangles plutôt qu’être uni. (c’est pour ça que les tableaux ont encore longue vie sur le net)

display indique le type d’affichage que tu veux. inline c’est pour les éléments en ligne tels que les images, le gras, etc. qui ne doivent pas être placé sur la page en créant un saut de ligne.

block c’est pour faire un bloc, un rectangle si tu préfères.

13

merci Sans-nom

J’ai fait un bon bout d’essais pour adapter ça à ma situ, résultat (DSL c un poil long) :

  1. margin:0px auto marche pour les blocs DIV et P, pas UL > li ni DL > dt.
    Sous Opera je m’en sors impec en remplaçant ‹ margin:0px auto; › par un ‹ text-align:center; › …pour les childs des éléments UL et DL à centrer! >> chq child est bien centré dans UL ou DL, qui sont eux-même centrés (c ce que je veux)… bref assez zarb en somme.
  2. IE aligne à gauche les balises ayant une classe (bwhite), même si je colle
    margin:0px auto;
    text-align:center;
    à cette class :heink:

Au fait,

  • La page xhtml 1.0 contient 3 ‹ DIV float:left › pour remplacer un tablô.
  • dans le DIV principal, j’ai des blocs de texte et d’images qui doivent être inline et centrés p/r au DIV principal. Ci-dessous le code CSS et HTML pour ce DIV seul.

Le CSS :
[fixed] #center {
float: left;
padding-top:1em;
width:74%;
height:100%;

#center h1,p,li,dt {
text-align:center; } // aligne ces blocs (ainsi que leur parent UL et DL) au centre

.bwhite {
background-color:#f8f8f8;
padding:.5em;
border: 1px solid #999999;
margin:0px auto; /* pour DIV & P il faut ajouter ‹ margin:0px auto › sans ça : aligné à gauche même sous Opera */ }

#center li{
display: inline;
float:left;
padding-left:1%;
margin-left:0.5em;
width:20%;
list-style: none;}

#center dt{
display: inline;
float:left;
padding-top:1em;
width:30%;}[/fixed]

Le BODY :
[fixed]


img 
txt</h1>

blabla

blabla

    [*]img [*]img [*]img [*]img [/list]

    • txt

    • txt

    • txt

    • txt

      img>
      img>
      img>

[/fixed]
14

Juste comme ça… centrer un truc se fait en fonction de l’élément Parent… donc si tu lui donne pas une taille, je ne sais pas si ça marchera.

Ensuite, file un screenshot, ou un truc du genre

15

nb : code ci-dessus édité pour prendre tout en compte

vi?
tu parles de préciser la taille (largeur etc.) du child p/r au Parent si je comprends.
Et bin, si je précise la largeur d’un child il est centré sous Opera et aussi sous IE (qui le centre au milieu de la largeur fixée -arf)

16

comme la dernière fois, j’arrive pas à accéder à ton serveur qui timeout

17

ok cela dit ce sont les screenshots… du code tapé ci-dessus :oui:
et tu as pas cliqué le dernier lien car il est chez free :wink:

tant qu’il faudra coder pour tous les navigateurs + IE g l’impression qu’un petit Javascript avec un Style par type de navig’ sera indispensable :sarcastic:

ps : concernant l’url : le jour où le FTP de free marchera un poil le WE et bin on se cassera moins le nez.
Par contre vu que g une config apache autorisant tout accès aux fichiers de ce répertoire (mais pas Indexes) je pige pas pq ça fait un time out (sauf >8 connexions en même temps mais bon)

18

j’ai ça « The connection was refused when (…) »

19

vi, c pas terrible en guise de screen :wink:

vu que le ftp free est en rade, je te propose de bien vouloir jetter un oeil sur le code ci-dessus.
un ‹ div align=center › fonctionne pour ie :sarcastic: et gêne pas opera. par contre c pas le pied pour jongler entre les 2 codes : les 2 css, mais aussi le code xhtml :heink:

20

bah tu sais

c’est rien de plus que :

div[align=center] {
margin: 0px auto;
}