د 10 څخه 10
د سي ایس ایس شاليد پاڼه جوړه کړئ
همدا ډول چې موږ د HTML لپاره جلا متن فایل جوړ کړی، تاسو به د سي ایس ایس لپاره د متن فایل جوړ کړئ. که تاسو د دې پروسې لپاره لیدونو ته اړتیا لرئ نو مهرباني وکړئ لومړی سبق وګورئ. دلته نوټ پیډونه کې ستاسو د سی ایس ایس طرزالعمل جوړولو ګامونه دي:
- دوتنه غوره کړه> خالي نوښت ترلاسه کولو لپاره نو نوپپیډ کې نوی
- د فایل فایل په توګه د فایل
- ستاسو په هارډ ډرائیو کې my_website فولډر ته ولیږئ
- "د ډول ډول خوندي کړئ:" "ټول ټولې فایلونو" ته بدلون ورکړئ
- خپل فایل نوم "styles.css" (د ټیټونو څخه لرې کړئ) او د خوندي کولو کلیک وکړئ
د 02 څخه 10
د سی ایس ایس شاليد پاڼه خپل HTML ته لینک کړئ
یو ځل چې تاسو د خپلې ویب پاڼې لپاره یو سټینټ پاڼه ترلاسه کړئ، نو تاسو به یې د ویب پاڼې ځان سره شریک کړئ. د دې کولو لپاره تاسو د لینک ټکي کاروي. لاندې لینک د ځای په ځای کې ولیکئ <سر> د خپلو پالتو ټایګونو سندونو کې دننه کړئ:
03 د 10
د پاڼې مارجې سمه کړئ
کله چې تاسو XHTML د بېالبېلو براؤزرونو لپاره لیکئ، یو شی چې تاسو زده کړه دا ده چې دوی ټول داسې ښکاري او قواعد لري چې دوی څنګه شیان ښکاره کوي. د دې ډاډ تر لاسه کولو لپاره غوره لاره چې ستاسو سایټ په ډیرو لټونونو کې ورته ورته ښکاري، دا د دې لپاره نه دي چې د برنامو غوره کولو لپاره شیان د پښې په څیر شیانو ته اجازه ورکړي.
زه غواړم خپل مخونه په پورتنیو کڅوړو کې پیل کړم، د اضافي اضافه کولو یا متن متن ته نږدې ندی. حتی که زه د محتوا پیډ کولو ته لاړ شم، ما واټن صفر ته ورکړ ترڅو زه د یو خالی سلیټ سره پیل کوم. د دې کولو لپاره، لاندې د خپل سټیلونو.css سند ته اضافه کړئ:
html، body {
margin: 0px؛
ډډنگ: 0px؛
سرحد: 0px؛
پرېښودل: 0px؛
پورته: 0px؛
}
د 10 څخه 10
په پاڼه کې د رنګ بدلول
فونټ اکثرا لومړی شی دی چې تاسو غواړئ په ویب پاڼې کې بدلون راولی. په ویب پاڼه کې اصلي بڼه د بدمرغۍ وړ وي، او په حقیقت کې پخپله ویب براؤزر کې دی، نو که تاسو لیکنه ونه پیژني، تاسو به هیڅکله نه پوهیږئ چې ستاسو پاڼه به څه شی وي.
په عموما توګه، تاسو به د پیراګراف پر مخ، یا ځینې وختونه په ټول سند کې بدل کړئ. د دې سایټ لپاره موږ په سر او پراګراف کچه لیکي. لاندې د خپل سټیلونو.css سند ته اضافه کړئ:
p، li {
ليکنه: 1em ايريډ، هيليوټيتکا، سنس سيرف؛
}
h1 {
ليکنه: 2em ايريډ، هيليوټيتکا، سنس سيرف؛
}
h2 {
فونټ: 1.5em ایریډ، هیلیوټیکا، سنس سیرف؛
}
h3 {
فونټ: 1.25em ایریډ، هیلیوټیکا، سنس سیرف؛
}
ما د 1em سره د پیراګرافونو او لیستونو لپاره زما د بیس انداز په توګه پیل کړی، او بیا زما د سرلیکونو لپاره د انداز اندازه کولو لپاره کارول کیده. زه تمه نه لرم چې د H4 په پرتله ژوره سرلیک استعمال کړم، مګر که تاسو پالن لرئ تاسو به دا هم وغواړئ.
د 05 څخه 10
ستاسو لینکونه نور خورا زړه پورې
د اړیکو لپاره اصلي بڼې دي په ترتیب سره نیل او جامنی د ناظر شوي او لیدل شویو اړیکو لپاره په ترتیب سره. پداسې حال کې چې دا معیاري ده، دا ممکن ستاسو د پاڼو رنګ پلان سره سمون ونلري، نو اجازه راکړئ بدلون ومومي. ستاسو په سټیلونو.css فایل کې، لاندې اضافه کړئ:
a: link {
فونټ-کورنۍ: ایریډ، هیلیوټیکا، سنس سیرف؛
رنګ: # FF9900؛
د متن جوړونې: الندې لیکنه؛
}
a: لیدنه {
رنګ: # FFCC66؛
}
a: hover {
شاليد: #FFFFCC؛
د لیک وزن - بولی؛
}
ما د درې لینک طرزالعملونه، یو:: د ډیزاین په توګه لینک، A: کله چې لیدل کیده لیدل شوي، زه رنګ بدلوم، او: حور. د یو سره سره: هور ما لینک یو پس منظر رنګ ترلاسه کړ او بډر ته یې ټینګار وکړ ترڅو ټینګار وکړي چې دا یو لینک د کلک کولو لپاره دی.
د 06 څخه 10
د نیویګیشن برخې سټیټ کول
له دې چې موږ په HTML کې لومړنۍ نیویارک (id = "nav") برخه برخه کوو، اجازه راکړئ دا لومړی ځل وټاکئ. موږ ته اړتیا لرو چې دا څومره پراخه وي او په ښی خوا پراخه پراخه حاصله وکړو ترڅو اصلي متن د هغې په مقابل کې پاته نشي. ما د هغې په شاوخوا کې پوله هم وکړه.
د سټیلیټ.css سند ته لاندې سی ایس ایس اضافه کړئ:
#nav {
چوکۍ: 225px؛
margin-right: 15px؛
سرحد: منځنۍ خواړه 0000000000؛
}
#nav li {
د لیست طرزالعمل: هیڅ نه
}
.footer {
د لیک اندازه - .75em؛
واضح کړئ: دواړه؛
چوکۍ: 100٪؛
متن - نښه: مرکز؛
}
د لیست طرزالعمل د نیویګ نیټی برخې دننه لیست جوړوي چې هیڅ ګولۍ یا شمیرې نلري، او د کاپی طرزالعملونه د کاپی کولو برخې کوچنۍ وي او په برخه کې یې مرکې.
د 10 څخه 10
د اصلي برخې ځای پرځای کول
ستاسو د اصلي برخې سره د مطلق پوزیشن سره د ځای کولو په واسطه تاسو ډاډه یاست چې دا به په سمه توګه پاتې وي چیرې چې تاسو غواړئ دا په خپل ویب پاڼه کې پاتې شئ. ما 800px پراخه کړی ترڅو لوی لوی څارونکي ځای ونیسي، مګر که تاسو کوچنۍ څارنه ولرئ، ممکن تاسو دا تنگ کړی.
لاندې د خپل سټیلیټ.css سند کې ځای ورکړئ:
#main {
سورې: 800px؛
پورته: 0px؛
موقف: مطلق؛
پاتې شوی: 250px؛
}
د 08 08
ستاسو پیراګراف سټینګ کول
له هغه ځایه چې ما د مخه پورته پیراګراف فونټ ټاکلی دی، زه غواړم چې هرې پراګراف ته لږ اضافي "کک" ورکړم ترڅو دا غوره کړم. ما دا کار وکړ چې په سرحد باندې د پولې په اچولو سره یې یوازې یوازې د عکس څخه ډیر پیراګراف روښانه کړ.
لاندې د خپل سټیلیټ.css سند کې ځای ورکړئ:
.topline {
سرحدي پوله: ګرمه جامد # FFCC00؛
}
ما پریکړه وکړه چې دا د ټولګي پراخو پیژندلو پرځای، د ټولګي په توګه "ټوله کرښه" په نامه یو ټولګی په توګه ترسره کړي. په دې توګه، که زه پریکړه وکړم غواړم یو پیراګراف پرته د لوړ زرو کرښې ولري، زه په ساده ډول د پراګراف ٹیګ کې ټولګي = "سرلیک" پریښودل کیږم او دا به لوړ سرحد نه وي.
د 09 څخه 10
د انځورونو انځورول
انځورونه عموما د دوی په شاوخوا کې پوله لري، دا تل تل تر هغه وخته پورې نه ښکاري چې عکس په اړیکه کې وي، مګر زه غواړم چې زما د CSS سیسټم پاڼې کې یو ټولګی ولرئ چې سرحد ته په اتوماتیک ډول لیږدول کیږي. د دې شاليد پاڼې لپاره، ما د "noborder" کلاس جوړ کړ، او د سند ډیری انځورونه د دې ټولګي برخه ده.
د دغو انځورونو بل ځانګړې برخه په پاڼه کې د دوی موقعیت دی. زه غواړم هغه د پراګراف یوه برخه شم چې دوی د جدولونو سره د سمون لپاره پرته و. د دې کار کولو تر ټولو آسانه لاره د فلاټ سی ایس ایس ملکیت کارول دي.
لاندې د خپل سټیلیټ.css سند کې ځای ورکړئ:
# ایمیل ایمیل {
لوټ
margin-right: 5px؛
margin-bottom: 15px؛
}
.noborder {
سرحد: 0px هیڅ نه
}
لکه څنګه چې تاسو لیدلی شئ، د انځورونو په اړه هم توپیر لرونکي شتمنۍ هم شتون لري، تر څو ډاډ ترلاسه کړئ چې دوی د فرعي متن په مقابل کې نه دي راځي چې په دویم پراګراف کې دي.
10 10
اوس ستاسو بشپړ پاڼه وګورئ
یوځل چې تاسو خپل سی ایس ایس ژغورلی شئ تاسو کولی شئ د حیواناتو دوسیه بیرته خپل ویب پاڼه کې خپل ویب پاڼه کې واخلئ. ستاسو پاڼه باید ورته هغه انځور ته ورته وي چې په دې انځور کې ښودل شوي، د انځورونو ترتیب او نیویارک سره د پاڼې د ښي خوا په سمه توګه ښی شوي.
د دې سایټ لپاره د ټولو داخلي مخونو لپاره ورته ګامونه تعقیب کړئ. تاسو غواړئ چې د هر مخ لپاره یوه پاڼه ستاسو په نیویارک کې ولرئ.