Seyans 3
CSS : Cascading Style Sheets
• Itilize pou dekore youn ou divès paj HTML, pèmèt paj html yo bèl, ba yo fòm, ba yo stil.
• Pèmèt ou jenere prezantasyon yon paj HTML : separe strikti HTML lan avèk prezantasyon CSS lan
• Ansanb de règ stilistik aplikab ak youn,ou divès dokiman HTML
• Fasilite modifikasyon grafik, favorize aksesibilite
Yon ti kras istwa de CSS
• CSS pran nesans li nan lane 1996 pa yon mesye yo rele Håkon Wium Lie avèk soutyen Dave Raggett.
• Avan, yo te konn itilize baliz prezantasyon yo dirèkteman nan HTML la
CSS1, CSS2, CSS2.1 te konn itilize avan, men jounen jodi an nap itilize CSS3
Itilizasyon CSS nan baliz html
Atribi Style =”………”
Mwen vle pou tit mwen yo an vèt epi pou soutit mwen yo an ble.
Kounya a kesyon pou w poze tèt ou, ki pwoblèm sa ka koze lèw aplike CSS lan dirèkteman nan HTML la?
Sa a vin koze yon pwoblèm de mentnabilite. Sa vle di, lèm gen poum modifye yon bagay, lap vin difisil nan menm, bagay poum ta fè nan 2 segond, m ka menm pran inèdtan menm plis ke sa selon travay map fè an.
• Si m vle aplike yon stil nan tout tit mwen genyen yo?
• Sim vle chanje koulè tout tit mwen yo ?
CSS « Entèn » nan antèt HTML lan
Byen avan, yo te konn itilize CSS lan nan menm paj HTML lan, nan antèt lan a travè baliz <style> anndan baliz <head> lan. Sa ki toujou pa yon bon pratik paske lap toujou koze pwoblèm lèw gen plizyè paj ew ta vle modifye yo an menm tan.
Nap pran menm egzanp avan an, men nap aplike stil lan yon lòt fason, ann al gade anba a.
N.B: Lèw aplike CSS lan konsa avantaj li genyen sèke ou gen posiblite aplike yon règ, yon stil sou tout eleman ki menm yo nan paj HTML ou an (dokiman an). Enkonvenyan an si w ta gen menm eleman sa yo nan diferan paj HTML ou pap ka aplike règ lan sou tout ansanm, fòk ou modifye l nan tout paj yo. Pa egzanp siw gen 20 paj html, nan tout 20 paj lan fòw al mete menm bagay la nan chak.
CSS ekstèn (css andeyò de paj html lan)
Pwemyeman wap kreye yon paj css kòm egzanp “style.css” si lèw tap kreye yon paj html, ou te mete index.html, ebyen pou CSS lan lap pote ekstansyon “.css” lan tou.
Lèw fin kreye paj css lan kounya a, pou w ka relyel ak html lan, ou pral anndan baliz <head> lan epi wap fèl konsa:
style.css: se non paj css ou kreye an, si w rele paw la yon lòt jan, wap sèlman mete non an “.css” janw t kreyel lan.
Remak : Yon sèl paj css lan, mwen aplike yon sèl koulè epil aplike sou chak paj yo pou mwen, menm sim ta gen 50 paj depim relye paj yo ak paj css lan chak m modifye youn, tout sak gen rapò avèl ap modifye nan chak paj, sa a se meyè fason ou ka itilize pou w dekore paj html ou yo, wap travay pi pwòp epi, wap ka modifye byen rapid lè sa mande.
Men èske se konsa sèlman m ka relye yon paj html ak yon paj css?
Repons lan se non, plen lòt fason, pa egzanp anndan foldè map travay lan, m ka kreye yon lòt fòldè anndan l epim mete paj css map itilize yo.
Ebyen pou w fè sa wap kreye fòldè an anndan kote wap travay la, sa vle di yon sou fòldè.
Pa egzanp mwen kreye yon sou fòldè map rele “css” anndanl map mete fichye style.css mwen an epi pou w relyel ak paj html lan wap fèl konsa :Ou pral anndan baliz <head> lan epi wap fèl konsa:
Sentaks de baz
Sentaks de baz lan konpoze de 3 eleman ki se :
• Sektè an: Ki se eleman kote w aplike pwopryete yo tankou (id, class, div, body, elatriye.)
• Pwopryete an: Ki se efè w pral bay lan egzanp (koulè tèks, pozisyonnman, koulè fon yo sa nou rele background an anglè an, elatriye.)
• Valè an: Ki se pwopryete CSS lan egzanp (5px, blue, inline-flex, elatriye.) Px= piksèl
Sektè
{
Pwopryete : Valè ;
Pwopryete : Valè ;
Pwopryete : Valè ;
………. ;
}
Deklarasyon nan CSS
Yon deklarasyon se tout pwopryte + valè. Ou kapab genyen divès kategori pou yon menm eleman, chak fwa w fini wap mete yon pwen vigil menm jan egzanp piwo an montre li an.
Kòmantè nan CSS
Kòmantè jwe yon gwo wòl nan nenpòt langaj pwogramasyon oubyen o nivo kodaj, wòl yon kòmantè se pou w ka idantifye chak bagay wap itilize pou menm siw ta fè pil tan pa manyen travay ou an lèw tounen sou li pou w pa bliye sa chak bagay te fè oubyen siw ta fin travay ou vle bay yon lòt moun kontinye, lèl vin sou travay lan pou l ka konprann wòl chak bagay. Yon bon pwogramè ak yon bon kodè toujou itilize kòman lè yap travay.
Pou kreye yon kòmantè CSS ou itilize /* ou ekri kòmantè an, pou w fini ou mete */. Si tout fwa w pavle fèl konsa ou fin ekri kòmantè an, ou seleksyonel epi w prese touch Ctrl + touch ? an.
Kòmantè an pap vizib sou navigatè an, se sèlman moun ki gen aksè ak kòd sous yo kap wèl.
Selektè izyèl de yon eleman HTML
Ou kapab seleksyone nenpòt eleman HTML pou w bay yon stil CSS. A note ke, yon pwopryete w aplike sou yon eleman HTML, pa defo lap aplike sou tout eleman ki menm avèl yo nan paj HTML lan (yo).
Pa egzanp, si w gen baliz <span> ki repete anpil kote nan HTML lan, epi w vin nan CSS lan ou fè span{ background: blue; color: white;
}
Tout kote l jwenn ki gen baliz span lap bayo fon ble epi koulè tèks lan ap blan.
Eske si m pata vle pou tout pran l konsa m paka bay pati m vle an li sèlman ?
Repons wi, ou mèt poze san w map montre w kòman w ka fèl.
Yerachi e jeneyaloji
Nosyon anfan e desandans
Konside menm chema yerachi e jeneyaloji an
- h1, p, h2 yo se anfan (pitit) div lan
- span, h3, img yo se anfan (pitit) h2
- span, h3, img yo se desandan div lan
Kesyon wap poze tèt ou, wap di ki enpòtans sa a genyen ?
Mwen konprann ou, ou gen rezon di sa men, kite m diw sa a gen anpil anpil enpòtans sitou lèw nan CSS.
Eksplikasyon : Si nan youn oubyen nan plizyè paj ou gen plizyè baliz h1, p, h2, span, h3, img elatriye, epi w bezwen aplike yon stil (pwopriyete CSS) sou youn inikman san w pa bay tout, ebyen se nosyon anfan oubyen desandans lan kap ede w.
Gen lòt mwayen wi pa egzanp pou w bay chak yon id oubyen yon class diferan men ann di si w gen 25 h3 oubyen 25 p ou wè valè class oubyen id ou pral bezwen bay? m panse sa a ap trè fatigan. Nosyon anfan ak depans lan ap ede w pibyen, se sak fè m di w li trè trè enpòtan.
Men èske se ak baliz yo sèlman ou ka gen anfan ak desandan an?
Non, ou ka genyen l ak id epi class tou, men pa bliye pou w bay yon class oubyen yon id se ap toujou anndan yon baliz. Mwen te deja montre nou kòman pou n bay ni class ni id m kwè nou te metrize yo pibyen pase m.
Men yon egzanp nan tout sa m sot ap eksplike la a.
Remak 1: Puiske m mete div h1, li aplike pwopriyete css lan sou h1 ki anndan div lan, li pa pranl sou sak deyò. an.
Remak 2: Puiske m mete p m pa presize ki kote pou l aplike l si se sou sa anndan an oubyen sou sa deyò div lan, li aplike pwopriyete css lan tout kote l jwenn p nan paj html lan.
Remak 3: Puiske m mete div img li aplike pwopriyete css lan sou imaj ki anndan div lan sèlman.
Remak 4: Mwen genyen 2 h2 ki genyen span, img, h3 ladan youn anndan div lan lòt lan deyò, pou m aplike pwopriyete an sou span anndan div lan, m oblije mete div h2 span.
NB: demach sa yo valab ni pou class ni pou id se menm lojik lan, youn ka antre nan lòt, li pa enpòtan pou se class sèlman, id sèlman oubyen baliz sèlman. Youn ka antre nan lòt. Egzanp: #nonId .nonClass baliz.
NB 2: Aprè chak baliz, class, id avan mete yon lòt ou dwe fè yon espas, evite kole yo.
Selektè klas yo
class=” ” : Se yon atribi ou kapab mete nan nenpòt baliz. Li pèmèt ou sible de manyè pi espesifik yon seri de eleman. Egzanp : <p class= ‘‘ paragraf ’’> Tèks sa a se yon paragraf </p >.
Ou kapab aplike kèlkeswa pwopriyete sou klas sa, menm si te gen yon enfinite baliz <p> nan dokiman HTML ou an, lap aplike espesifikman pwopriyete yo sou class paragraf lan.
Klas miltip
Li posib pou w gen plizyè klas sou yon eleman(baliz), w ap sèlman separe yo pa yon espas.
Egzanp: <p class= ‘‘paragraf remak’’> Tèks sa a se yon paragraf </p >.
Ki enpòtans sa genyen lèw ap itilize klass miltip?
Nan yon paj HTML, ou ka genyen plizyè eleman ou bay menm class (sa vle di class yo gen menm non) epi wap bay tout menm koulè, menm stil sa ka rive gen youn ladan yo tay lan ap
pi gwo, ebyen si tay lan ap pi gwo ou paka aplike l menm kote ak lòt yo, pavre ? lè sa a ou oblije vin itilize yon lòt non anplis , wap aplike pwopriyete ki diferan an sou klas ou ajoute an. Ann swiv egzanp anba a.
Remak: Non sèlman paragraf 4 lan gen menm koulè wouj menm jan ak lòt yo, nap remake nou wè li pi gwo epi li gen yon fon nwa. Tout sa m bay pou paragraf tout 7 paragraf lan ap pran l tandiske, pou remak lan, sèlman paragraf 4 la kap genyen l.
Sible yon bali HTM avèk yon klas
Pou sible yon eleman(baliz) de yon klas nan CSS ou fè apèl lan konsa (li pa dwe genyen espas, swiv egzanp lan)
L’id (idantifyan)
Li gen menm wòl avèk yon klas, men li dwe inik sou paj lan kontrèman ak class lan ou paka gen miltip id (li toujou mwens itilize nan yon paj).
Yon sèl atribi id ou ka bay nan yon baliz.
Ou metel konsa nan baliz wap mete l lan <p id = ‘‘myId ’’> ….. </p>
Ou rele l nan CSS avèk #myId {pwopriyete css;}
Ou kapab melanje baliz, id, class, sa nou te wè nan yerachi an deja p#myId.myClass{} Souvan sa vin fè CSS lan twò espesifik, donk bon pratik lan se lè w mwens espesifik posib
Espas ou san espas ?
Lè pagen espas savle di tout kondisyon yo dwe vrè. Egzanp : p.sible : sible tout paragraf epi ki gen yon class ki rele « sible». <p class = ‘‘sible’’> kontni </p>
Règ(prensip) pou w nome yon class ou yon id
Yon non klas oubyen yon non ID pa dwe genyen aksan oubyen karaktè espesyal sof onndèskò (_ ).
Toujou evite mete tout an majiskil. Si non wap mete an, konpoze an plizyè lòt non, aprè chak non ou ka separe yo avèk yon _. Egzanp: my_class oubyen w ka mete yon majiskil nan kòmansman sa kap vin apre an. Egzanp: myClass.
Yon non id pa dwe janm gen espas
Yon non klas pa dwe gen espas, siw mete espas lap konsidel pou plizyè non, chak kotel jwenn espas, se tankou yon lòt non ou bay.
Psedo-klas sou lyen yo
Selektè a: link endike lyen ipètèks ki poko vizite (lyen yo poko klike sou li).
Selektè a: visited endike lyen ipètèks ki deja vizite (lyen yo gentan klike sou li).
Selektè a: hover endike lyen sivole (Yon efè ou mete pou parèt lèw klike sou li).
Selektè a: active endike lyen klike.
Pou retni lòd: Love Hate: link, visited, hover, active.
Demonstrasyon avèk: hover sou yon bouton.
Eksplikasyon:
Pati HTML: nou kreye yon div nou bal yon “class” ki rele “container” anndanl nou kreye lyen an ak baliz “a”
Pati CSS: nou rele “class container” kite nan html lan, epi nou aplike pwopriyete sa yo
Width: 100% ki vle di lap pran tout lajè ekran an, san pou san lajè ekran an
Height: 400px ki define wotè an, an piksèl(px=pixel)
Display: flex (pwopriyete flex lan se yon rakousi ki define kapasite yon eleman fleksib pou modifye dimansyon l kap pèmèt ou ranpli espas disponib konntenè li ye an.
Background: #001253 ki define koulè ble maren ki aplike nan fon an.
Kapab aplike sou lòt eleman ki pa yon lyen.
Ou kapab fè pa egzanp: p: hover epiw aplike pwopriyete CSS ou vle bay lan.
Note byen: swa klas wap aplike hover an, swa id an oubyen baliz wap aplikel lan,2 pwen (:) an dwe kole ak yo.
Kòm efè yo anpil, sa a se te sèlman yon egzanp, men ou ka kreye pwòp efè pa w nan gou w, selon jan w vle l
Pou fini nou pral fè yon demonstrasyon ak : focus lan sou yon baliz input
Padding :15px (li fè yon espas anndan input lan nan chak kote, agoch, a dwat, anwo, anba. Yo rele sa maj enteryè. Ou ka bay maj sa a janw vle si tout fwa w pata vle bay tout kote menm gwosè, epi si gen kote w ka pa chwazi bay. Sa ke nap gen pou n wè pi devan)
Color: white (ki defini koulè tèks yo ap genyen. Ou kapab mete non koulè an konsa w ka mete kòd koulè an nap wè sa yo pi devan)
border-radius: 5px (Li menm li pèmèt ou awondi bò input lan, menm jan ak padding lan. A goch, a dwat, anwo, anba. Ou bay li janw vle, selon saw vle fè an. La a lap aplikel tout 4 kote an a 5piksèl(px)).
Ann gade input lan san aksyon focus lan
Kounya a ann gade jan input lan ye lèw aplike focus lan
