Seyans 5

Bòdi e aryè plan

Bòdi : pwopriyete bòdi an pèmèt ou ajoute yon bòdi nan yon eleman. Li genyen 3 sou pwopriyete posib ki se : style, color, width.

Lè wap aplike l, ou fèl nan lòd konsa: border: width style color.

Width lan se li menm ki defini epesè an (gwosè bòdi an)

Style lan se li ki defini kòman bòdi an ap parèt. Valè w ka mete nan style lan se:

• None: Li pap gen bòdi;
•  Dotted: Lap fè bòdi an, an pwentiye;
• Dashed: tirè
• Solid: Yon trè senp;
• Double: bòdi doub
• Groove: an relyèf
• Ridge: Lòt eè relyèf
• Inset: efè 3D global anfonse
• Outset: efè 3D global sirelve.

Mwen bay yon egzanp avèk solid ou menm eseye lòt yo wap wè rezilta a selon eksplikasyon yo.

Bò awondi

Border-radius: Valè ki pèmèt ou fè bò awondi. Ou kapab itilize inite mezi yo ki se (px, em, %)

N.B : Boder-radius, padding, margin, border,… yo genyen kat(4) fas oubyen kat(4) bò (a goch, a dwat, anwo, anba) sa ka rive jan w fè anwo an se pa konsa w vle fè anba a, tout fwaw vle bay chak fas yon fason, oubyen gen fas ou pap bezwen mete pou yo, wap k fèl fasil swivan egzanp ou pral jwenn anba yo.

 Si wap awondi tout kote menm gwosè wap sèlman fèl konsa : border-radius :15px ; sa pral depan de janw vle l lan li ka 15px, li ke nenpòt kantite. Se depan de gou w.

Yon awondi pa ang (anwo a goch, anwo adwat, anba a dwat, anba a goch) : border-radius : 5px 25px 15px 20px

Si tout fwa w pap bay yon kote ou ka mete 0 nan plas li. Egzanp : border-radius : 5px 25px  0 20px

Konsa tou ou ka presize kote wap bay li an konsa:

border-top-left-radius: 5px;

border-bottom-left-radius:25px ;

border-bottom-right-radius: 20px;

border-top-right-radius: 15px;

Background-color: Valè ki pèmèt ou bay yon koulè fon. Ou ka bal nenpot koulè CSS ou vle. Sou yon eleman tip bloc li pran tout lajè an, sou inline li pran lajè kontni an.

Background-image : Valè ki pèmèt ou mete yon imaj anba yon eleman, oubyen yon imaj de fon tou kout. Li kapab none oubyen url(‘non imaj la .ekstansyon imaj la’). Menm prensip ou te aprann deja a pou w te ka mete imaj lan.

Pa defo imaj lan ap repete orizontalman epi vètikalman.

Men yon egzanp avèk yon imaj nou kopye adrès li sou entènèt la.

Si tout fwa se pa yon imaj anliy wap itilize wap mete imaj ou an menm jan w te toujou konn mete imaj la, se toujou menm pratik yo.

Backgrounf-repeat: pèmèt ou defini fason imaj lan ap repete. Valè posib:

no-repeat : Imaj lan pap repete(li pap parèt plizyè fwa)

repeat-x : Imaj la ap repete orizontal

  repeat-y : Imaj la ap repete vètikal

Men yon egzanp avèk no-repeat

Tout fwa w bezwen imaj lan pran tout kontni an wap itilize background-size: cover;

Background-position: Valè ki pèmèt ou pozisyone yon imaj de fon pa rapò kwen goch anwo. Valè ki posib avèl : Valè nimerik sou aks X e Y : background-position: 15px 25px;

Valè an lèt background-position:right top(anwo a dwat)

• Top: Pou anwo
• Bottom: pou anba
• Left: a goch
• Center: nan mitan(santre)
• Right: a dwat

Background-attachment: Valè ki pa twò itilize, li pèmèt ou defini si imaj ki nan fon an defile pa rapò ak dokiman an. Valè: pa defo (si w pa presize l) se scroll. Ou kapab itilize background-attachment :fixed siw vle imaj lan rete vizib epi pou kontni scroll lan anwo.

Li posib pou konbine tout pwopriyete yo ansanm sou menm liy. Egzanp :

background:#7AAAAF url(“imgages/imagebg.png”) no-repeat center left;

Dimansyon padding e margin

Yon ti rapèl sou padding e margin

San alterasyon CSS, tout eleman tip bloc yo pran tout lajè paran yo, e yo pase nan liy ki vin aprè an(retounen nan liy ki swiv lan) egzanp tip bloc(body,div,h1,h2,p, elatriye). Tout eleman tip inline yo pran lajè kontni an e yo pa pase nan liy swivan an egzanp tip inline(span, a, strong,img elatriye.)

Lajè epi wotè yon eleman : width epi height

Width(lajè) epi height(wotè) pa konpatib ke sou eleman ti bloc. Valè posib auto(pa defo, tout tay paran an), vale nimerik an px, % oubyen em.

Max e Min

Ou kapab itilize max epi min pou detèmine tay maksimòm epi tay minimum (li pa fonksyone sou IE6). Valè: nimerik, Li pèmèt ou pa egzanp, jere yon debòdman yon imaj: img{max-width:100%;} savle di imaj lan limite a tay paran an(kontni kotel plase an).

Maj: Genyen 2 tip maj:  maj enteryè(anndan) ki se padding epi maj eksteryè (deyò) ki se margin

Menm jan li te eksplike avan an margin,padding,border,border-radius, … yo genyen kat (4) maj (anwo, anba, a goch, a dwat). Ou ka mete l jan w vle. Valè posib pou padding

• Padding-top : espas enteryè anwo
• Padding-bottom : espas enteryè anba
• Padding-right : espas enteryè a dwat
• Padding-left : espas enteryè a goch

Margin

Pwopriyete margin detèmine espas ant bò eleman an epi eleman ki kole avèl la. Pa defo lèw mete margin oubyen padding li aplike 4 kote. Valè posib: auto, vale inite mezi yo, pozitif oubyen negatif.

• Ou kapab aplike chak apa tankou
• Margin-top: espas anwo
• Margin-bottom: espas anba
• Margin-right: espas a dwat
• Margin-left:espas a goch

Konsa ou ka mete yo sou yon sèl liy. Margin: 10px 15px 14px 20px. Lòd lan se : anwo, a dwat, anba, a goch). Siw paka sonje pozisyon yo byen ou ka kenbe sig sa a ki se : TRBL avèk T=top, R=right, B=bottom, L=left.

Box-sizing:border-box

Pou fè ansòt ke padding nan e bòdi an kalkile anndan bwat la(anndan kontni an) ou kapab chanje modèl kalkil la atravè box-sizing:border-box;

Overflow: Pou evite depasman

Li posib pou yon kontni tèks depase eleman li twouvel lan, sitou si w itilize yo wotè fiks, sa vle di yon wotè an px. Egzanp(height:150px;)

Overflow:hidden: kache sak depase yo

Li pèmè ou kache tout sa ki depase espas li ye an, si nap gade nan imaj anwo an, nap wè gen yon pati nan tèks lan ki vin tonbe sou nwa a paske wotè nou te defini an te twò piti. Lèw itilize hidden nan lap kache sak depase yo sa kap koz ou pap ka wè yo.

Overflow:auto (Afich yon ba defilman(yon asansè))

Overflow: auto; Lap kreye yon ba defilman kap pèmèt ou wè tèks yo lè sa nesesè.

Eleman flotan epi flu

Pwopriyete float: vale ki pèmèt ou ekstrè (retire) eleman yo nan flu nan paj ou an, sa vle di rès kontni an koule otou l.

Valè posib pou float lan se : left, right, …

Avèk float

Clear : bloke depasman flotan yo

Pwopriyete clear lan se valè ki pèmèt yon eleman anpeche kontounman eleman flotan yo. Li pozisyonel sou eleman flotan ki vin aprè an tankou tout sak te rete nan flu an.

Valè posib :

clear :

left Pèmèt ou anpeche kontounman blòk flotan yo nan bò goch

right Pèmèt ou anpeche kontounman blòk flotan yo nan bò dwat

both Pèmèt ou anpeche kontounman blòk flotan yo nan bò goch e nan bò dwat