Samee liistada jiifka ah adigu naftaada

Tusaalaha udubdhexaadka ah wuxuu ku yaalaa meel kasta oo ka mid ah - tani waa qayb muhiim ah, maadaama ay awood u leedahay inay soo jiidato ama, liddi ku ah, dadka cabsi geliya muuqaalkooda iyo roonaanta. Aan baranno sida loo abuuro astaamaha hoose ee hoose: Waxaan ka dhigi doonaa "qalfoof" on HTML, waxaan ku guuleysan doonaa xirfadaha aasaasiga ah ee abuurista. Adiga, dabcan, waxaad heli kartaa liiska diyaar ah, laakiin waa wax aad ufiican oo aad ku baran karto sida aad u kobcin lahayd naftaada. Tani waa wax aad u xiiso badan.

Barashada si aad u sameyso liiska

Waxaan isku dayi doonaa inaanan ka dhicin calaamadaha, taas oo raacaysa maadada qaabka qaabeynta. Ugu horreyn waxaan u baahannahay inaan ka dhigo "qalfoof" liiskayaga bogga HTML, si aan u barto xirfadaha aasaasiga ah si aan si madaxbannaan u sameysanno astaan cad. Ka dibna qurxin adigoo isticmaalaya xaashida qaabka. U oggolow liistada yari inay ku jiraan 5 alaab. Qodobka koowaad waxaa loo wareejin doonaa bogga ugu muhiimsan. Sheyga labaad waa "About Us". Saddexaad waa Abaalmarintayada. Afaraad - "Waa wax xiiso leh." Tan shanaad waa "Contact Us".

Xeerka HTML wuxuu u egyahay sidan:

Yaa aan ogayn, tag ul waxaa loo isticmaalaa ah rasaas, xubno ay bilaabaysaa li ah. Xayeysiisyada waxay dhaxlaan qaababka ku habboon ul.

Ul waa qayb ka mid ah darajada liiska, waxaa lagu fidin doonaa ballaca bogga. Li ayaa sidoo kale xayiraya.

Sidaas, abuurto index.html. Waxaan garaacnay koodhkayaga. Waqtigan xaadirka ah, browserku wuxuu soo bandhigi doonaa liiska khafiifka ah, ma aha halbeeg. Laakiin waxaan leenahay hadafka - si aad u sameyso qori cadi ah goobta. Tani waxay u baahan tahay CSS.

Waa maxay sababta CSS?

Haddii aad wali kaliya higsanayso horumarinta goobaha, markaa waxaad u baahan tahay inaad barato fikradda ah qaababka qaabaynta qaababka cascading. Dhab ahaan, kuwani waa qawaaniinta qaabaynta, ka shaqeynta, oo khuseeya waxyaabo kala duwan oo ku yaal boggaga internetka. Haddii aad sharaxdid sifooyinka waxyaabaha ku jira HTML caadiga ah, ka dibna waa inaad ku celcelisid si isdabajoog ah, waxaad isku koobi doontaa qaybaha isku midka ah. Waqtiga bogga culus ee kombiyuutarka isticmaalaha ayaa kori doona. Si tan looga fogaado, waxaa jira CSS. Waa ku filan inaad ku sharraxdo keliya hal mar goor, kadibna kaliya u sheeg meesha ay isticmaali karaan sifooyinka qaabka gaarka ah. Waad samayn kartaa sharrax keliya oo aan ahayn qoraalka bogga laftiisa, laakiin sidoo kale fayl kale. Tani waxay kuu ogolaaneysaa inaad codsato sharraxaad noocyada kala duwan ee bogga kasta ee goobta. Waxaa sidoo kale ku haboon inaad bedesho bogag dhowr ah adoo saxaya faylka CSS. Xaashadaha qaabka ayaa kuu oggolaanaya inaad ka shaqeysid faylalka heerar ka fiican HTML, ka caawinta inaad ka fogaato bogagga culus ee goobta ku leh shaxanka.

Isticmaalida xaashiyadaha qaabka loogu talagalay horumarinta menu

CSS liiska:

1. # My_1menu {liistada liiska: midna; Sare: 6; Jid: 800px; Margin: auto;}
2. # My_1menu li {float: left; Font: italic 18px Arial;}
3. # My_1menu a {color: # 756; Muuqaal: block; Dhererka: 55px; Dhererka safka: 55px; Hooska: 0px 15px 0px 15px; Taariikh: #dfc; Qoraal-qurxinta: midna;}
4. # My_1menu a: hover {color: #foa; Hore: # 788;}

Haatan waxaynu eegaynaa soo-saarka CSS ee soo-saarka.

# My_1menu - tani waa sida qaabka loo xilsaaray walaxda UL oo leh id = my_1menu, qaabka liiska: midna waa amarka laga saaro calaamadaha dhinaca bidixda liiska.

Jaantus: 800px - width of our menu waa 800 pixels.

Suufka: 0 - kani wuxuu ka saaraa gudaha indents.

Margin: baabuur - isku xirnaanta alaabta soo horjeeda ee bartamaha boggayaga.

# My_1menu li - dejinta qaabab u eg-walxo.

Dhererka: 55px - heerka sare ee menu.

# My_1menu a: hover - udub dhexaad ah a-alaabta marka cirifka lagu hayo.

Ma faahfaahin doonno xariiq kasta si faahfaahsan, maaddaama uu horumariye kasta samayn karo xuduudihiisa halkan. Tani waa saldhigga codsiyada noocyada ku yaala bogga. Waxaad ku siin kartaa muuqaal buuxa oo qurux badan adoo adeegsanaya sawirro. Tixraac Element, tusaale ahaan, asalka: url (img1.png) ku cel-x. Aan haysano asalka: url (img2.png) ku celin-x ee: hover.

Isticmaal ra'yigaaga, doorbidinta hal-abuurka. Ka dib, iyada oo ku saleysan aqoonta sida loo abuuro astaamaha ugu fudud ee goobta, waxaad ku kobcin kartaa bogaga leh naqshad gaar ah.