33 pages

Catalan

Cours Web nº2 Introduction à CSS

Ennu - Sandrine-Dominique Gouraud (Gouraud@Lri.Fr) , Pierre Senellart (Pierre@Senellart.Com)

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

33 pages

Catalan

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

A propos
Informations
Extrait

Description

CSS et XHTMLoCours Web n 2Introduction à CSSSandrine-Dominique Gouraud (gouraud@lri.fr)Pierre Senellart (pierre@senellart.com)Semaine du 26 septembre 2005S.-D. Gouraud, P. Senellart (IFIPS) Introduction à CSS 26/09/2005 1 / 34CSS et XHTMLPlan du cours1 CSS et XHTML2 Sélecteurs de CSS3 Propriétés CSS simples4 Références5 ApplicationS.-D. Gouraud, P. Senellart (IFIPS) Introduction à CSS 26/09/2005 1 / 34CSS et XHTML IntérêtCSS : Cascading StyleSheetsRecommendation du W3CPlusieurs niveaux : CSS1 (1996), CSS2 (1998), CSS2.1 (2005), CSS3(en cours)Support par les navigateurs très inégal, jamais complet (en particulier,IE6 a plusieurs limitations importantes) =⇒ on ne parlera que de cequi marche bien dans l’ensemble des navigateurs courants.Principe(X)HTML décrit la structure et le contenuCSS décrit la mise en forme :I du texte (ce cours)I des boîtes les unes par rapport aux autres (cours suivant)S.-D. Gouraud, P. Senellart (IFIPS) Introduction à CSS 26/09/2005 2 / 34CSS et XHTML Styles en ligneManière le plus simple d’utiliser les CSS.Rajouter un attribut style sur les balises XHTML.On peut utiliser span si on a besoin d’une balise supplémentaire.Encombre le code XHTML avec des indications de mise en forme : cen’est pas ce qu’on veut!ExemplesCe mot en emphase estaussi en rouge.Cetteexpression de plusieurs mots est soulignée.S.-D. Gouraud, P. Senellart ...

Informations

Publié par	Ennu
Nombre de lectures	130
Langue	Catalan

Extrait

CSSetXHTML.SD-,P.Senel.GouraudI)SPortntralIFI(S2CS096/ctdunàio

Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com)

Cours Web no2 Introduction à CSS

Semaine du 26 septembre 2005

153/2/00

uoG.D-.SS.P,duarudtctnorSC2SoiànlartenelPS)I(IFI

Sélecteurs de CSS

Références

CSS et XHTML

Application

3/15

Propriétés CSS simples

Plan du cours

490/6002/MLHTtXSeCS

trêtéInLMTHXteSSCS-..DoGruua,d.P

CSS :CascadingStyleSheets Recommendation du W3C Plusieurs niveaux : CSS1 (1996), CSS2 (1998), CSS2.1 (2005), CSS3 (en cours) Support par les navigateurs très inégal, jamais complet (en particulier, IE6 a plusieurs limitations importantes)=⇒on ne parlera que de ce qui marche bien dans l’ensemble des navigateurs courants.

Principe (X)HTML décrit lastructureet lecontenu CSS décrit lamise en forme: Idu texte (ce cours) Idesboîtesles unes par rapport aux autres (cours suivant)

50/2/902620/SSàContiucodtrIn)SPIFI(tralleneS

SCeSXtenesgnliMLHTylSte3/05209/

Manière le plus simple d’utiliser les CSS. Rajouter un attributstylesur les balises XHTML. On peut utiliserspansi on a besoin d’une balise supplémentaire. Encombre le code XHTML avec des indications de mise en forme : ce n’est pas ce qu’on veut !

Exemples Ce mot en <emph style="color: red;">emphase</emph> est aussi en rouge. Cette expression de plusieurs mots est soulignée.

34noitcudo0/62SSCà.-Sllart(IFIPS)Intr.DoGruua,d.PeSen

eiéelylstdeleilFLueHXMTSSteC/90250/543

Exemple

Mettre la feuille de style CSS dans un ﬁchier à part (en général, on utilise l’extension.css). Permet d’utiliser la même feuille de style pour plusieurs pages Web. Rajouter une balise<link>dont l’attributrelest positionné à stylesheetdans l’en-tête du document.

<!DOCTYPE ... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... <link rel="stylesheet" href="feuille.css" type="text/css" /> </head> <body> ... </body> </html>

ucodontiSSàC/026rallFI(t)SPIrtnIurauD.GoSened,P.S-.

seetXHCSSlassTMLCuoG.D-.SS.P,duar096/00/2/357

On veut parfois rajouter encore plus de structure et de sémantique à un document XHTML. On utilise l’attributclasssur n’importe quelle balise (ou, à défaut, sur une balisespan). Après, on peut utiliser CSS pour appliquer une mise en forme commune à tout ce qui fait partie d’uneclassparticulière.

Exemple (Mettre en bleu italique les noms de personnes) XHTML Je voudrais particuli^^e8rement remercier Madame Machin et Monsieur Bidule. CSS .personne { color: blue; font-style: italic; }

4tnorudtcoiànSC2Senellart(IFIPS)I

S26/09/20058/34I)tnorudtcoiànSC

Ensemble de règles de la forme : sélécteur{ propriété:valeur; ... } sélecteurquelles parties du documents la règle s’aplique: indique à (cf partie 2 de ce cours). propriété: propriété spéciﬁque de mise en forme à modiﬁer (cf partie 3 de ce cours et cours suivant). valeur: son sens dépend de la propriété. Il fautvaliderde style avec un validateur approprié, cfles feuilles http://jigsaw.w3.org/css-validator/validator-uri.html Commentaires entre/*et*/.

SPIFI(tralleneS.,Pudraou.G-DS.CSSyntaxedeteHXMTSLCSS

LCTMcaasSSCXHetedelenrtlaFI(I)IPSD-.SuoG.duarS.P,S2CSnàioctduront

Plusieurs feuilles de style peuvent s’appliquer simultanément : IPlusieurs balises<link rel="stylesheet"> IDirective@importd’une feuille de style @import url(feuille_annexe.css); I tilisateur (Mozilla, Opera.Feuille de style de l’ . . ) u Au sein même d’une feuille de style, plusieurs règles peuvent être en conﬂit. Cascade: mécanismes gérant ces conﬂits.

Cascade Si!importantest précisé après la valeur, la règle sera prioritaire. Sinon, plus une règle est spéciﬁque, plus elle est prioritaire. Sinon, la dernière règle s’applique.

43/95002/90/6

,d.PeSenllra(tFIIPS)IntroductionCàSS620//9025001/34

Plan du cours

Propriétés CSS simples

Références

Application

CSS et XHTML

Sélecteurs de CSS

urSSCtcuesredéSel

IFSPtrI(lealS.neud,Poura-D.GS.missruetlum,selp,uespltielrsveniéSelrsdecteuélecCSSSorudI)tnànSCtcoi09/2S26/1/340051

Exemples ul { color: blue; }met l’ensemble du contenu des listes non ordonnées en bleu. h1,h2,h3,h4,h5,h6 { color: red; }met l’ensemble des titres de rubrique en rouge. * { color: black; }met tout en noir. Dans ce cas précis, on préférera une règlebody { color: black; }.

Sélecteur simple :nom d’une balise. Sélecteur multiple :plusieurs sélecteurs séparés par des virgules. Sélecteur univers l sélectionne tout‘ ’, e :* .

ruoG.D-.Scuitrtdo)SnIFIPIart(nellP.Seaud,3/21

Exemples .personne { font-face: bold; }met l’ensemble des balises de classepersonneen gras. p.comment { font-style: italic; }met l’ensemble des balisesp de classecommenten italique.

Sélecteur de classe :nom d’une classe, préﬁxée d’un ‘.’, tel qu’il apparaît dans un attributclassd’une balise XHTML.

49//00520àCon26SSSéctlerseuCSdeeclaursdecteSSélssse

Univers
Ebooks
Livres audio
Presse
Podcasts
BD
Documents

Cours Web nº2 Introduction à CSS

YouScribe

Le catalogue

Le service

Les conditions