Isticmaalidda qoraallada qoraalka ah ee "CSS"

01 ee 10

Samee Qoraalka CSS Style

Sidii aan u abuuray faylka qoraalka gaarka ah ee HTML, waxaad abuuri doontaa faylka qoraalka CSS. Haddii aad ubaahan tahay aragti habraacan fadlan fiiri barashada koowaad. Waa kuwan tallaabooyinka lagu abuurayo warqadda qaabka CSS ee qoraalka Notepad:

1. Dooro File> New in Notepad si aad u hesho daaqad madhan
2. Keydso faylka CSS adoo gujinaya Faylka 'Save As ...
3. Waxaad u raacdaa faylka my_website ee dariiqa adag
4. Beddel "Badbaadada Nooca": "Dhamaan Dhamaan Faylasha"
5. Magacaaga faylka "styles.css" (ka tag jaraa'idka) oo guji Save

02 of 10

Isku xir bogga CSS Style ee HTML

Markaad heshay warqad qaabka loogu talagalay boggaaga internetka, waxaad u baahan doontaa inaad u sharixo bogga bogga laftiisa. Si aad tan u samayso waxaad isticmaashaa bogga xidhiidhinta. Ku dheji cinwaanka hoos ku xusan meel kasta oo ka mid ah dariiqyada ee warqadahaaga pets.htm:

03 of 10

Xaqiijinta boggaga

Markaad qoraysid XHTML for daalacayaasha kala duwan, hal wax aad baran doonto waa in dhammaantood ay u muuqdaan inay leeyihiin kala duwanaansho iyo xeerar ku saabsan sida ay wax u muujiyaan. Habka ugu wanaagsan ee lagu hubsan karo in boggaagu u muuqdo mid isku mid ah dookhiyeyaashu waa inaanay u ogolaan waxyaabaha sida margins in ay u doorbidaan xulashada baraha.

Waxaan doorbidaa inaan boggeyga ku bilaabo geeska bidix ee sare, oo aan lahayn foorar dheeraad ah ama marin ku xeeran qoraalka. Xitaa haddii aan doonayo in aan ka soo baxo waxyaabaha, waxaan u dhigayaa marginsyada si eber ah si aan u bilaabo isla hal-faaruq ah. Si tan loo sameeyo, ku dar waxyaabahan soo socda ee dokumentigaaga styles.css:

html, body {
margin: 0px;
caarada: 0px;
xadka: 0px;
bidix: 0px;
top: 0px;
}

04 of 10

Beddelidda Qoraalka bogga

Qoraalka badanaa waa waxa ugu horreeya ee aad rabto inaad bedesho bogga internetka. Qoraalka asalka ah ee bogga internetka wuxuu noqon karaa mid fool xun, dhab ahaanna waa inuu yahay shabakadda internetka, sidaas darteed haddii aadan ku qeexin xarfaha, dhab ahaantii ma ogaan kartid waxa boggaaga u eg yahay.

Caadi ahaan, waxaad bedeli doontaa fontka ku jira cutubka, ama marmarka qaarkood dukumiintiga laftiisa oo dhan. Boggan waxaan ku qeexi doonaa xarafka ku yaal cinwaanka iyo heerka cutubka. Ku dar waxyaalahan soo socda dokumentigaaga styles.css:

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}

Waxaan bilaabay 1em sida cabbirka aasaasiga ah ee cutubyada iyo liistada sheyga, ka dibna waxay u adeegsadeen in lagu cabbiro xajmiga cinwaanada. Ma filayo inaan isticmaalo cinwaanka hoose oo ka badan h4, laakiin haddii aad qorshaynayso inaad sidoo kale rabto inaad ku sharaxdo sidoo kale.

05 ee 10

Samaynta Xiriirintaada Waxyaabo badan oo xiiso leh

Midabada caadiga ah ee xirmooyinka waa buluug iyo guduud si aan loo arag iyo booqasho xiriiriye ah. Inkastoo tani ay tahay mid caadi ah, waxa laga yaabaa inaanay ku haboonayn nidaamka midabkaaga ee bogaggaaga, markaa aynu bedelno. Faylkaaga styles.css, ku dar waxyaalahan soo socda:

a: link link {
font-family: Arial, Helvetica, sans-serif;
midabka: # FF9900;
qoraalka-qurxinta: hoosta;
}
a: booqday {
midabka: # FFCC66;
}
a: hover {
asalka: #FFFFCC;
miisaanka-miisaanka: mugdi;
}

Waxaan sameeyay seddex nooc oo isku xiran, a: link oo ah midda ugu horeysa, oo ah: booqasho marka la booqday, waxaan bedelayaa midabka, iyo: hover. Iyada oo: a: Hover waxaan haystaa link ayaa helaya midabtakoor dabiicad ah oo aad u adkaysato si aad u xoojiso in ay tahay isku xirnaanta in la riixo.

06 of 10

Isticmaalida Qaybta Gundhigga

Tan iyo markii aan u gudbineyno (id = "nav") marka ugu horeysa ee HTML ah, aynu hore u sharaxno. Waxaan u baahannahay inaan sheegno sida ballaaran ee ay tahay inay u ahaato oo ay ku dhigto dhinac ballaaran oo dhinaca midig ah si aan qoraalku ugu weyneynin. Waxaan sidoo kale xuddun u hareeraysan.

Ku dar CSS-da soo socda qoraalkaaga styles.css:

#nav {
width: 225px;
margin-xaq: 15px;
xadka: dhexdhexaad ah # 000000;
}
#nav li {
qaabka liiska: midna;
}
.footer {
font-size: .75em;
caddayn: labadaba;
width: 100%;
text-align: center;
}

Hantida liistada liistada liistada ayaa ku jirta liistada gudaha qaybta wareegga si aysan u helin rasaas ama nambaro, qaababka fiilada ah ee qaybta xuquuqda lahaanshaha waa qayb yar oo dhexdhexaad ah.

07/10

Meeleynta qaybta ugu muhiimsan

Adiga oo meeleynaya qaybtaada weyn ee aad ujirto waxa aad hubsan kartaa in ay joogi doonto meesha aad rabto in aad ku sii jirto boggaaga internetka. Waxaan sameeyey 800px ballaaran si ay ula socdaan kormeerayaasha waaweyn, laakiin haddii aad leedahay kormeer yar, waxaa laga yaabaa inaad rabto in aad ka dhigto mid culus.

Ku dheji dukumiintigaaga styles.css:

#main {
width: 800px;
top: 0px;
Goobta: gebi ahaanba;
bidix: 250px;
}

08/10

Isticmaalidda Sheygaaga

Tan iyo markii aan horey u dhigay cutubka kor ku xusan, waxaan rabay in aan ku siino jumlad kasta oo ah "laad" wax yar oo dheeri ah si uu uga dhigo mid ka sii fiican. Tani waxaan sameenay iyada oo xuduudda sare ku dhejineysa calaamadaha kor ku xusan ka badan kaliya sawirka kaliya.

Ku dheji dukumiintigaaga styles.css:

.topline {
xudduudaha sare: adag oo adag # FFCC00;
}

Waxaan go'aansaday in aan u sameeyo sida fasalka loo yaqaan "topline" halkii aan ku qeexayno dhammaan cutubyada sidaasi ah. Habkani, haddii aan go'aansado in aan rabo in aan haysto cutub aan lahayn khadka sare ee jaalaha ah, waxaan si fudud uga bixi karaa fasalka = "ku dhufo" ee ku jirta darajada qoraalka mana lahaan doonto xadka sare.

09 ka mid ah 10

Isticmaalida Sawirada

Sawiradu sida caadiga ah waxay leeyihiin xuduud iyaga ku wareegsan, tani mar walba lama arki karo haddii sawirku yahay xiriir, laakiin waxaan jeclahay in aan fasal ku yeesho qaabka CSS-da ee si toos ah u soo jiidaya xadka. Fikradaha noocan ah, waxaan abuuray fasal aan "qadarin", intooda badanna sawirada dukumiintigu waxay qayb ka yihiin fasalka.

Qaybta kale ee gaarka ah ee sawiradu waa meesha ay ku taal bogga. Waxaan rabay inay ka mid noqdaan cutubka ay ku jireen iyagoo aan isticmaalin jadwal si ay ula jaanqaadaan. Habka ugu fudud ee tan loo sameeyo waa inaad isticmaashid hantida CSS.

Ku dheji dukumiintigaaga styles.css:

#main img {
float: bidix;
margin-xaq: 5px;
margin-hoose: 15px;
}
.noborder {
xuduudda: 0px none;
}

Sida aad u arki karto, waxaa sidoo kale jira waxyaabo marin ah oo ku yaal sawirrada, si loo hubiyo in aan la burburin qoraalka dabaqan ee ku yaala cutubyada.

10 of 10

Hadda fiiri boggaaga dhameystiran

Markaad kaydiso CSS-ga waxaad dib u cusbooneysiin kartaa bogga pets.htm ee shabakada internetka. Boggaagu waa inuu u egyahay mid la mid ah kan sawirkan lagu muujiyay, oo leh sawirro la isku habeeyey oo ujeedadu waxay si sax ah u dhigtay dhinaca bidix ee bogga.

Raac tallaabooyinka isku mid ah dhammaan boggaga gudaha ee boggan. Waxaad dooneysaa in aad hal bog ku qorto bog kasta oo ku yaal boggaaga.