Cours Web nº2 Introduction à CSS

Cours Web nº2 Introduction à CSS

-

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

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

Sujets

Informations

Publié par
Ajouté le 24 septembre 2011
Nombre de lectures 128
Langue Catalan
Signaler un problème
CSSetXHTML.SD-,P.Senel.GouraudI)SPortntralIFI(S2CS096/ctdunàio
Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com)
4
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
5
3
4
CSS et XHTML
2
Application
1
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.
43
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. <span style="text-decoration: underline">Cette expression de plusieurs mots</span> est soulignée.
34noitcudo0/62SSCà.-Sllart(IFIPS)Intr.DoGruua,d.PeSen
eiéelylstdeleilFLueHXMTSSteC/90250/543
Exemple
Mettre la feuille de style CSS dans un fichier à 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 <p>Je voudrais particuli^^e8rement remercier <span class="personne">Madame Machin</span> et <span class="personne">Monsieur Bidule</span>.</p> 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écifique de mise en forme à modifier (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 conflit. Cascade: mécanismes gérant ces conflits.
Cascade Si!importantest précisé après la valeur, la règle sera prioritaire. Sinon, plus une règle est spécifique, 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
-
3
4
S
Références
G
5
o
Application
D
1
.
CSS et XHTML
a
2
u
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éfixée d’un ‘.’, tel qu’il apparaît dans un attributclassd’une balise XHTML.
49//00520àCon26SSSéctlerseuCSdeeclaursdecteSSélssse