CSS: design miiska. tusaale u ah diiwaangelinta

Samaynta miisaska la CSS - casharka xiiso leh oo mas'uul ah. Hab ganacsi this u baahan tahay inaad hawlkarnimo leh, aqoon oo dhan Hababka ay suurtagal tahay. Intaa waxaa dheer, waxaa lagama maarmaan ah inaad hantidaan dareen quruxda si aan loo cabsi galin off martida hal-abuurka ay.

looxyadiina wuxuu beddeli karaa wax kasta. design Beautiful ku lug leedahay isticmaalka xuduudaha loox CSS design, asalka miiska, asalka cell, farqiga iyaga iyo dheeraad ah ee u dhexeeya. Tixgeli ugu aasaasiga ah.

xadka miiska

CSS design style miiska had iyo jeer ku lug ciyaar iyo soohdinta a (Carsaka). All loox default ma aha contours jir. In uu yahay, waa loo siman yahay si 0 pixels. Laakiin tan la sixi karaa by xadka hantida.

Waxaad cayimi kartaa jir dibadda miis oo dhan:

miiska {xadka: 3px adag madow; }

Thanks to this line at dhan miisaskii on goobta in uu isticmaalaa style this waa jir madow. Ogsoonow in kaliya soohdinta on geesaha, laakiin miiska ma gudaha. Waayo, khadadka cell iyo jir si kale lagu qeexay.

th, Td {xadka: madow adag 3px;}

The dhumucda iyo midabka, waxaad cayimi kartaa kasta. Maskaxda ku hay in xuduudaha la labanlaab marka splicing unugyada.

Eraygii tusinaysaa a diiwaan joogto adag. Waxaad cayimi kartaa qiimaha kale.

waxaa inta badan loo isticmaalaa jir adag, sida waxa ay u muuqataa dheeraad ah oo soo jiidasho leh oo aan ka jeedin dareenka ka content ugu weyn ee goobta.

hantida xadka ayaa sidoo kale lagu qeexay karaa guddiga. oo soohdintu waxay kaliya ayaa lagu wadaa kartaa hogaanka horyaalka, hoose, dhinaca midig ka tagay ama. Maxaa yeelay, mararka qaarkood ma aha doorasho macquul ah oo leh xiddaayad ee miiska oo dhan hal mar.

miiska {soohdinta-top: 1px adag cas, }

Si aad u dhigay kartaa jir ee hogaanka horyaalka kaliya. Sidoo kale in ay wax xisbiyada kale, halkii ay u qortaa oo kaliya top: midig, bidix ama hoose.

madax miiska

madax Table la cayimay karaa iyadoo la isticmaalayo tag ah . tag Tani waxay noqon kartaa in CSS in ay iska diiwaan gelin badan oo guryaha loogu talagalay ganaax-daafigaw. design miiska CSS waa wanaagsan yahay, sababtoo ah waxaa suurto gal ah in ay wadaan xubno ka ah sida aad u rabto.

magacan waxa loo soo bandhigay si la mid ah sida caadiga ah a buugaagta (sida "Table 1").

Waxaad kala dooran kartaa meesha uu horyaalka iyo hantida caption-dhinac (top ama hoose). Simaya bidix ama midig waxaa lagu qeexaa by hantida text-align.

miisaska asalka

Background miiska noqon kartaa midabka ama naqshad. Color dhigaya a hantida background-color. Magacyada guryaha ayaa si buuxda u waafaqsan tahay isticmaalka hadalka. Waxaa fududaysa kaydinta marar badan.

Midabka la cayimay karaa sida magaca, iyo fartu kala duwan. Intaa waxaa dheer, waxaad cayimi kartaa waxyaabaha soo socda:

• Transparent - hufan.
• Dhaxli - color waa isku mid sida in element waalidka.
• Xarafka - default.

Xulashada leh hufnaan waxaa loo isticmaali karaa in mararka meesha oo dhan looxyadiina waxaan ku dhex qoraalka ee file CSS loo sameeyo mid ka mid ah midabka, laakiin ay dhacdo in this aan loo baahnayn.

Intaa waxaa dheer, asalka waxaa laga yaabaa in image ah. Si arrintan loo sameeyo, in style qoray hantida background image-ka. Jidka waa sidan:

url ( 'URL')

Jidka si faylka noqon karaa qof qaraabo ah ama buuxda.

dheregtaan More adag la samayn karo Wehliyaha ah:

• toosan-Wehliyaha ();
• radial-Wehliyaha ();
• soo noqnoqda-toosan-Wehliyaha () iyo ku cel-celinta-radial-Wehliyaha () - Wehliyaha soo noqnoqda.

cell asalka

Waxa intaa dheer in asalka ah ee guud, waxaad cayimi kartaa jeeda xariijimo in tiirar ama saf. Waayo, diiwaangelinta hantida waxaa loo isticmaalaa marar aad u badan, maxaa yeelay, isa-soociddiisa oo muuqaal ah khadadka u fududahay in ay akhriyaan macluumaadka.

Waxa intaa dheer in iskhilaafka, oo waxaad cayimi kartaa tirada column gaar ah ama isku xigta. Tusaale ahaan sidan oo kale:

• TR: nth-ilmaha (xitaa) {...} - sheeg isdhaafsan;
• TR: nth-ilmaha (1) {...} - calaamad u ah sifooyinka isku xigta gaar ah;
• Td: nth-ilmaha (xitaa) {...} - calaamad u yihiin talantaalli ah tiirarkii;
• Td: nth-ilmaha (1) {...} - calaamad u tahay oo ka mid ah sifooyinka column gaar ah.

Ka sokow xigxiga iyo lambarada la cayimay karaa - ugu horeysay (Td: marka hore-ilmo) ama la soo dhaafay (Td: ugu dambeysay ee ilmahaaga).

farqiga u dhexeeya unugyada

In CSS, design miiska kuu ogolaanayaa inaad si loo soo saaro meelaha u dhexeeya unugyada. By default ay yihiin. Tusaale ahaan, haddii aad dhigay jir ah in miiska aan dejinta masaafada u dhaxaysa xuduudaha, waxaa halkaan joogi doonaa natiijada.

Heshii, ma u muuqataa mid aad u fiican oo ma aha habboon in la akhriyo. Users waxay yeelan doonaan Cabidkariin indhaha taas aawadeed in. Ka saar ka dhimman u noqon karaan qoraal kaliya line a in style miiska sida:

xadka-burburkii: burburkii

Laakiin waxaa kale oo dhici karta in masaafada u, on lid ku ah, waa in la kordhiyaa. Waxaa intaa dheer, size ee ka dhimman la cayimay karaa sida u dhexeeya tiirar iyo inta u dhaxaysa khadadka ka. Si ay u muujiyaan in qiimaha a (halkii burburto):

xadka-burburkii: oo kala duwan

Laakiin sida ficil tilmaami doonaa in ay lagama maarmaan tahay in la kala saaro unugyada. Maadaama ay ahayd qaybtoodii, tilmaamay hanti dheeraad ah:

xadka-dheereynta: 20px.

Haddii aad rabto in aad sheeg meel fog kala duwan oo u dhexeeya saf oo tiirar, waxay muujinaysaa laba waxyaabood:

xadka-dheereynta: 10px20px.

Farqiga in daalacashada

Maskaxda ku hay in CSS miisaskii design eegto laga yaabaa kala duwan, iyada oo ku xiran browser ah. Gaar ahaan xun yahay kiiska la versions ka weyn, in tabo cusub ee CSS aan la taageeray.

kor ku xusan waa tusaale ka mid ah thicknesses jir qiyamka digital.

Tusaale ahaan this, dhumucda Click here for geysid ah.

Hababka xadka ayaa sidoo kale si weyn u kala duwan yihiin.

Sidaa darteed, horumarinta had iyo jeer arki natiijada in daalacashada kala duwan.

In CSS loox design talinayaa si loo hubiyo nooca browser. Gaar ahaan dhibaato weyn loo isticmaalaa in ay si users la versions ka weyn ee Internet Explorer.

horumarinta Aad u horumarsan karaa, iyadoo ku xiran browser ah in ay ku xidhmaan files CSS aad u kala duwan. Oo qof ka dhigaysa jeeg kasta ama style qaar ka mid ah si gaar ah (class).

dhibaatooyinka ugu kici ka hoosku.

CSS: Tusaale ahaan Format Table

Diiwaangelinta lagu xad kala duwanaayeen karo. Waxaa oo dhan waxay ku xiran tahay goobta oo dhan iyo design. All waa in la isku daro iyo midabkiinaba, qaxay halkaas. Sidoo kale waxa ay taasi doorka iyo dhadhan sameeysa weyn. Sense of quruxduna waa dhan kala duwan.

Waxaan ku siin tusaalayaal qaar ka mid ah miisaska kala duwan. tiradaasi kor ku xusan ayaa muujinaya isticmaalka Janjeeri iyo midabka asalka ah oo soohdintu ciyaaro.

Dad badan oo waxay noqon doontaa tusaale xiiso of design nidaamsan u qurux badan in aan la baabbi'in doonaa dadka isticmaala isha. muuqashadii Tani waa ku haboon in ku dhow kasta oo xaaladda.

geesaha waxaa lagu sameyn karaa fekrado. Waxa ay u muuqataa jiidasho fiican.

gunaanad

Sida aad arki karto, waayo, muuqaalka kore ee looxyadiina waxaan ku dhex CSS waxaa jira qalab badan. Halbeegga kasta sidoo kale waa tiro aad u badan oo ah fursadaha qiimaha. Haddii aad ku wada isticmaalaan hal mar, waxaad samayn kartaa masterpieces. Gaar ahaan haddii aad design-qabsiga ee dhammaan daalacashada.

Waxa ugu weyn ee in design ah - ha u badin la saamaynta. Wax walba waa in la sameeyaa si dhexdhexaad ah. Marka ugu horeysa, khariidad jecel yihiin in ay tijaabiyaan oo ay isticmaalaan aqoon oo dhan ay isla markiiba. Sidaas darteed of miiska yihiin guryaha oversaturated. Isku day si looga fogaado khaladaadka kuwan.

Waxaa intaa dheer, oo xuduudaheedu qaar ka mid ah waxaa laga yaabaa in midba midka kale faragelin. Tusaale ahaan, ma jiraan wax u baahan in la qeexo midabka asalka ah ee horyaalka, halka haddii ay jiraan weli image asalka, taas oo daboolaa doonaa midabka qeexan dhigay.