Seyans 4
Koulè e inite CSS
Notasyon egzadesimal: #ffffff (koulè blan)
Notasyon egzadesimal kout #fff (ki senplifye 6 fff lan ki toujou bay koulè blan an). Menm jan sim te gen #000000 ki se koulè nwa, m te ka senplifyel an #000.
Notasyon RGB: rgb (255,255,255) / rgba (255,255,255,1)
Notasyon HSL: hsl (0,0%,100%); / hsla (0,0%,100%,1)
Koulè CSS yo
Koulè an se yon pwopriyete ou itilize sou :
- Color
- Background
- Border
- …
Kòman ekri koulè CSS yo?
Kèlkeswa pwopriyete koulè CSS (color, border-color, background-color), tout fòma CSS yo jere yon sèl fason, savle di menm jan. Genyen plizyè fason pou espesifye yon koulè nan CSS:
- Mete non koulè an (koulè nome)
- Mete kòd egzadesimal koulè an
- Itilize fòma rgb (an anglè, r = red, g = green, b = blue), ki vle di an fransè (rvb, r = rouge, v = vert, b = blueu)
- Itilize fòma rgba (rvba pou fransè, nouvote ki pran an kont vè 2010 avèk a ki se alfa)
- Itilize fòma hsl e hsla (fransè hsl, nouvote kite pran an kont vè 2010)
Mete non koulè an (koulè nome)
Kòman ekri yon koulè CSS nome?
Yon koulè nome nan CSS, se yon non ke w bay yon koulè byen presize ki pap janm chanje swivan navigatè yo.
Genyen 216 koulè predefini, ou kapab itilize yo selon dezi w.
Koulè egzadesimal yo
Kòman ekri koulè egzadesimal yo?
Ou kapab espesifye yon koulè nan CSS pandan wap mete vale koulè sa a an egzadesimal:
Egzanp pou w ekri yon koulè an egzadesimal
Konsève menm egzanp HTML nou te genyen deja a.
N.B : Lè valè nan yon koup (#aabbdd) aa epi bb epi dd yo egal, savle di yo idantik, ou kapab senplifye yo pandan wap mete yon grenn nan chak tankou a, b, d.
Si nou ta gen yon kòd koulè ki se #cc4444 nou kapab senplifye l an #c44 se toujou menm bagay la. #aabbdd pral bay tou #abd.
Egzanp yon koulè senplifye
Nenpòt nan sa yo ou itilize lap baw menm rezilta ak sa a, eseye tou 2 sou laptop ou apre waw è sal bay.
Koulè CSS avèk RGB
Kòmanw ka ekri yon koulè CSS RGB ?
Fòma koulè rgb an se abreviyasyon de “red, green, blue” an fransè ki se “rouge, vert, blueu”. Fòma koulè CSS rgb an, li aksepte 3 valè antye ki ant 0 e 255 oubyen 3 valè antye an pousantaj. Valè antye 255 kòresponn a 100%. Ou pa kapab melanje inite yo kontrèman ak egzadesimal lan ki melanje.
Men egzanp pou ekri yon koulè avèk fòma rgb (san w pa mete pousantaj epi lèw mete pousantaj) :
Remak : lèw pa mete pousantaj li soti nan 0 pou rive nan 255, epi avèk pousantaj li soti nan 0% poul rive nan 100%.
Koulè CSS an RGBA
Kòman ekri yon koulè CSS rgba?
Fòma koulè rgba CSS la se abreviyasyon de « red, green, blue, alpha » an fransè ki se « rouge, vert, blueu, transparans ».
Se yon nouvo fòma ki kòmanse entèprete vè 2012 yo. Koulè rgba aksepte 3 valè antye ant 0 e 255 oubyen 3 valè antye an pousantaj epi valè ant 0 e 1 ki fè koulè an opak. Lè valè a = 0 lè sa a koulè an vin transparan, lèl a = 1 koulè an vin opak menm jan w t genyen rgb tou kout. Ou menm, ou ka jwe ak valè sa a pou w jere transparans ou jan w vlel la tankou 0.1, 0.2, 0.9 pou rive nan 1. A note ke si wap itilize pousantaj lap soti de 0% pou rive 100%, sinon lap soti de 0 pou rive nan 255.
Men yon egzanp pou ekri koulè rgba.
Remak: 255,255,255 bay koulè blan, men avèk a ki vin ajoute an nou bal vale 0.6 ki vin fè efè transparans lan, si nap gade nap wè koulè tèks lan pa blan a san pou san.
Koulè CSS an hsl e hlsa
Kòman ekri yon koulè hsl ou hsla?
Koulè CSS hsl se abreviyasyon « Hue, Saturation, Lightness » an fransè « Teinte, Saturation, Luminosité ».
Koulè CSS hsla se abreviyasyon « Hue, Saturation, Lightness, Alpha » an fransè « Teinte, Saturation, Luminosité, Transparence ».
Fòma koulè CSS hsl e hsla se nouvo fòma ki kòmanse entèprete vè lane 2010.
Hsl aksepte 3 valè antye, men valè sa yo nan lòd anba :
- Yon valè antye ki twouve ant 0 e 360, inite an se degre, ki reprezante « Teinte » lan.
- Yon valè antye ki twouve ant 0 e 100, inite an se pousataj, ki reprezante « Saturation » an
- Yon valè ki twouve ant 0 e 100, inite an se pousantaj, ki reprezante « Luminosité » an.
Hsla aksepte menm 3 valè nou sot site la epi yon valè ki twouve ant 0 ki se total transparans lan epi 1 ki se total opak lan.
Men yon egzanp de yon koulè hsl e hsla:
Pixel nan CSS (pixel = px)
Pixel (px) se yon inite fiks, depandans avèk rezolisyon yon periferik epi valè final « konpile » nan CSS
Kadraten – em
Kadraten (em) se yon inite ki itilize pou polis ekriti yo savle di tay ekri yo.
Egzanp piksèl avèk kadraten
Remak: lè w itilize kadraten li 2 fwa pi gran ke piksèl lan. Ann swiv rezilta anba a
Pousantaj: %
Inite flwid ki relativ a tay paran an: % pwopòsyon relativ avèk dimansyon eleman paran an oubyen tay polis lan selon pwopriyete an.
Kèlke inite ki itilize nan Web
- “px” pou eksprime yon dimansyon fiks (endepandan de tay polis la).
- “em” pou atribiye tay polis yo an fonksyon polis paran an.
- “% ” pou atribiye dimansyon pwopòsyone avèk dimansyon eleman paran an.
Pwopriyete tipografi, polis e pus
Font-family: endike polis wap itilize an.
Nan css genyen 5 tip font-family jenerik: Serif, Sans-serif, Monospace, Cursive, Fantasy men konsa ou kapab aplike lòt tip de font-family tankou (Arial, roboto, poppins, …).
Men yon egzanp font-family:
Konsa tou ou ka mete plizyè font-family ansanm, men lap aplike polis lan nan lòd soti a goch pou ale a dwat. S’il pa jwenn pwemye an lap aplike l sou dezyèm nan, s’il pa jwenn dezyèm nan lap aplike l sou twazyèm nan, lap fèl nan lòd soti a goch pou ale adwat.
Remak: font ki pa vini ak css yo, li toujou enpòtan pou w mete l nan senp kot. ‘ ‘
Font-size
Font-size : Valè an inite ki pèmèt ou defini tay polis ekriti an.
Nou kapab itilize inite sa yo swa (px, em, elatriye.)
Mete yon tèks an gra (font-weight)
Pou mete yon tèks an gra nap itilize pwopriyete font-weight: bold;
Font-weight : valè ki pèmèt ou detèmine epesè polis lan. Prensipalman valè ki posib pou font-weight lan se (normal, bold). Normal lè sa a li nòmal bold lè sa a li an gra.
Font-style
Font-style: pèmèt ou defini estil polis lan. Italic pa egzanp.
Font-style : valè ki pèmèt ou presize estil polis itilize an. Prensipal valè posib : normal, italic, oblique.
Line-height
Line-height: Line-height pèmèt ou ogmante espas ant liy yo (entèliy)
Line-height: Valè ki chanje entèliy yo. Valè ki posib se valè nimerik nan inite mezi yo (px, em, %) men, li mye pou w pa mete inite ditou pou w gade fleksiblite an.
Color
Color: Pwopriyete color itilize pou kapab bay yon tèks koulè.
Text-align
Text-align : Valè ki pèmèt ou alinye yon tèks a goch, a dwat epi nan mitan. Valè ki posib pou text-align se : left, right, center, justify. Alinyeman an fèt sou kontni baliz ki de tip bloc tankou paragraf, tit, div, elatriye.
Text-transform
Text-transform: Pèmèt ou transfòme yon tèks an majiskil, an miniskil. Valè ke w ka plike sou li se : none, capitalize, uppercase, lowercase.
- None: Lap rete jan w mete l lan
- Capitalize: lap mete chak pwemye lèt an majiskil nan chak mo
- Uppercase: lap transfòme tout lèt yo an majiskil
- Lowercase: Lap transfòme tout lèt yo an miniskil.
Font-variant
Font-variant : Valè ki pèmèt ou chanje kas polis yo. Prensipal valè w ka itilize pou li se : normal, small-caps
Text-decoration
Text-decoration : pèmèt ou chanje diferant valè dekorasyon. Valè posib ou ka aplike sou li se : none, overline, underline, line-through.
- None: pèmèt ou anpeche eritaj pwopriyete an e pi patikilyèman siprime ba ki soulinye nan yon lyen.
- Overline: pèmèt ou pase yon trè sou tèt tèks lan.
- Underline : pèmèt ou pase yon trè anba tèks lan.
- line-through: Pèmèt ou bare tèks lan, lap pase ba a sou tèks lan.
Text-indent
Text-indent: Valè negatif ou pozitif ki pèmèt ou espesifye yon dekalaj apati pwemye liy yon tèks. Valè : inite mezire polis negatif oubyen pozitif. Li pa fonksyone sou eleman tip bloc oubyen inline-block.
Lis kigen pus :
List-style-type
List-style-type : pèmèt ou espesifye tip pus ou nimewotasyon ki aplikab sou baliz ul ou ol. Valè ou kapab aplike sou li. None, disc, circle, square.
None : sa vle di pagen pus.
Lis òdone
Lis òdone: Valè posib ou ka aplike ladan l: decimal, decimal-leading-zero, lower-roman, upper-roman, upper-hexadecimal, upper-alpha, elatriye.
