80CSS法语教程 同时学习语言和专业知识

LesfeuillesdestyleCSS2LesfeuillesdestyleCSSCSS=CascadingStyleSheets(Feuilledestyleencascade)Documentpermettantdespécifiertouteslescaractéristiquesdemiseenformed’unepageHTMLEllespermettentdedéfinirlamiseenformeauniveaudechaquebaliseHTML3LesavantagesdesCSSSéparationducontenuetdelaforme:Améliorationdel’accessibiliténumériqueCohésiondelaprésentationpourl’ensembledusiteModificationtrèssimpledel’apparenced’unsitesansavoiràenmodifierlecontenuFacilitationdelamaintenanceOutildemiseenformepluspropreetpluspuissantquecequeproposeHTMLPalieràcertaineinsuffisancedeHTML(contrôledelapolice,desmarges,del’indentation,…)PositionnementaupixelprèsAmélioreletempsdechargementdespages4Syntaxed’unstyleCSSSyntaxesuivante:Balise{propriété_de_style:valeur}Où:Balise:PermetdepréciserlabalisedontonsouhaitemodifierlestylePropriété_de_style:Permetdespécifierlapropriétédelabalisequel’onsouhaitemodifier(alignement,couleur,…)Valeur:PermetdespécifierlanouvellevaleurassociéeàlapropriétéIlestpossibledemodifierplusieurspropriétéspourunemêmebaliseenlesséparantpardes«;»5ExempledestyleCSSH1{font-family:Arial;font-style:italic}H1,H2,H3{color:blue}•LestitresH1posséderontalorslestylesuivant:–Police:Arial–Ecritureenitalique–Couleurbleue•H2etH3:–Couleurbleue•Onconstateque–Lesdéfinitionsdespropriétéss’accumulentpourunemêmebalise–Ilestpossibledemodifiersimultanémentlespropriétésdeplusieursbalises6StyleCSSetredondanceDanslecasoùlamêmepropriétéd’unemêmebaliseestdéfinieplusieursfoisonneconservequeladernièredéclarationH1{font-family:Arial;font-style:italic}H1,H2,H3{color:blue}H3{color:red}7CSSetcontexte•Ilestmêmepossibled’affinerlapriseencomptedespropriétésd’unbaliseenfonctionducontextedanslequelelleestutilisée.H2I{color:green}Balise_contextebalisePriseencompted’uncontexteBalise[attribut]Priseencomptesilabalisedéfinil’attributBalise[attribut=«valeur»]Priseencomptesilabalisedéfinil’attributaveclavaleurspécifiée8InsertionderèglesCSS(1/5)Ilexiste3méthodes:MéthodeglobaleMéthodeintra-ligneMéthodeimportée9InsertionderèglesCSS(2/5):méthodeglobaleInsertiondel’en-têtedelapageHTMLc-a-dentrelesbaliseshead…/headUtilisationdesbalisesstyle/style:enprécisantqu’ils’agitderèglesCSSAttributtype=’’text/css’’htmlheadstyletype=«text/css»!–RèglesCSS--/style/headbody…/body/htmlhtmlheadstyletype=«text/css»![CDATA[!–RèglesCSS--]]/style/headbody…/body/html10InsertionderèglesCSS(3/5):méthodeintra-ligneInsertiondesrèglesCSSauniveaudesbalisesquilesconcernentUtilisationdel’attribut«style»disponiblepourtouteslesbalisesHTMLh1style=«font-family:Arial;color:blue»CeciestuntitreH1/h111InsertiondesrèglesCSS(4/5)CesdeuxpremièresméthodesajoutentlesrèglesCSSàl’intérieurmêmedespagesWebPertedelanotiondeséparationentreformeetcontenuPertedel’uniformisationdespagesdusitePertedelafacilitédemaintenanceCesdeuxméthodessontdoncàproscrireEventuellementdansdescasbienprécisLorsdelaphasedetestsdesrèglesCSS12InsertiondesrèglesCSS(5/5):MéthodeimportéeInsertiondesrèglesCSSdansunfichierdédiéCefichiersera:CommunàtoutlesiteLiéàtouteslespagesWebdusiteC’estlaméthodeCSSlaplusimportantehtmlheadlinkrel=«stylesheet»type=«text/css»href=«feuille.css»/headbody…/body/html13RèglesCSS&Classes(1/4)IlpeuttoutdemêmeêtrecontraignantdedéfinirunstylecommunàtoutlesitepourunebalisedonnéeLesclassespermettentdesmodificationsponctuellesdestyle14RèglesCSS&Classes(2/4)Syntaxe:Balise.classe{nom_de_la_propriété1:«valeur1»;nom_de_la_propriété2:«valeur2»;}Où:Balise:nomdelabalisedontonsouhaitemodifierlestyleClasse:lenomassociéàlaclasse(lettre,chiffreettiret)15RèglesCSS&Classes(3/4)Utilisationdel’attribut«class»auniveaudesbalisesconcernées.H1{font-style:italic;color:blue}H1.classe1{color:red}h1ceciestuntitre/h1h1class=«classe1»idem/h116RèglesCSS&Classes(4/4):LaclasseuniverselleClassedontlabalisen’apasétéprécisée.important{color:red;font-weight:bold}h1ceciestuntitre/h1h1class=«important»ceciuntitreimportant/h1divclass=«important»ceciundivdivpclass=«important»ceciunparagraphe/pH1{font-style:italic;color:blue}17RèglesCSS&PseudoclassesEllespermettentd’affinerlestyleappliquéàcertainebalise:EnréactionàunévénementEnréactionàlapositionrelativedel’élémentContrairementauxclasses:Lesnomsdespseudo-classesdisponiblessontprédéfinisIlestimpossibled’encréerdenouvelles18Pseudoclassesdynamiques(1/2)RéactionàunévénementTypiquementc’estlecasdeslienshypertextesIlenexiste3:Hover:permetd’affecterunstylelorsdusurvoldel’élémentparlasourisActive:permetd’affecterunstyleàl’élémentlorsquel’utilisateurcliquedessus(entrelemomentoùilcliqueetlemomentouillerelâche)Focus:permetdedéfinirunstylelorsquel’élémentsélectionné19Pseudoclassesdynamiques(2/2):ExempleA:active{/*Lienactif*/color:red;background-color:yellow;}A:hover{/*Sourisaudessusdulien*/color:orange;font-style:italic;font-weight:bold;font-size:20px;}20PseudoclassesdeliensPseudoclassesspécifiquesàlabaliseaIlenexiste2:Link:lorsquelelienn’apasencoreétévisitéVisited:lorsquelelie