د سایټ کارولو لپاره د سی ایس ایس کارول د ویب پاڼې د ښي خوا ته
نن ورځ تقریبا هره پاڼه وګورئ او تاسو به د دغو پاڼو ډیری برخه کې د متن او انځورونو یو ترکیب وګورئ. دا یو پاڼه ته متن او انځورونه ډیر آسان دي. متن د معیاري HTML ټګټونو لکه پیراگرافونو، لیستونو، او سرونو کارولو سره کارول کیږي، پداسې حال کې چې انځورونه د عنصر کاروي .
د دې متن جوړولو او دا انځورونه سره یوځای کار کوي هغه څه چې غوره ویب پایلیکرونه یې جلا کوي! تاسو نه غواړئ خپل متن او انځورونه د یو بل څخه وروسته راټول کړئ، دا پدې معنی ده چې دا د بلاک کچې کچې به څرنګه په اصلي بڼه ترتیب شي. نه، تاسو ځینې کنترول غواړئ چې متن او انځورونه یوځای شي چې په پای کې به ستاسو د ویب پاڼې لید لیدل کیږي.
د هغه انځور درلودل چې د یوې پاڼې د ښي خوا ته راټول شوي وي پداسې حال کې چې د هغه متن متن په شاوخوا کې وهل کیږي د چاپ شوي ډیزاین لپاره او د ویب پاڼو لپاره د عام ډیزاین درملنه ده. په ویب شرایطو کې، دا اغیز د انځور انځور په نامه پیژندل کیږي . دا روش د "فلوټ" لپاره د CSS شتمنیو سره ترلاسه شوی دی. دا ملکیت د متن د ښي خوا ته د ښي خوا ته د ښي خوا ته د فلش لپاره متن ته اجازه ورکوي. (یا د ښی ښیګړی عکس په ښی خوا کې ته.) راځئ چې دا بصری اغیزه څنګه ترلاسه کړو.
د HTML سره پیل کړئ
لومړنی شی چې تاسو ته اړتیا لرئ د کار کولو لپاره ځینې HTML لرئ. زموږ د مثال لپاره، موږ به د متن پراګراف وليکئ او د پراګراف په پیل کې (انځور له مخکې، مګر د پرانستلو <ٹیګ وروسته) یو انځور اضافه کړئ. دلته هغه څه دي چې د HTML نښه یې ښکاري لکه:
په ډیفالټ کې، زموږ ویب پاڼه به د متن سره پورته متن سره ښکاره شي. دا ځکه چې انځورونه په HTML کې د بلاک کچې کچې عناصر دي. دا د دې معنا لري چې لټونګر د انځور عنصر له مخکې له مخکې او د هغې وروسته وروسته قطع ماتوي. موږ به دا د ډیزاین نظر بدل کړو چې CSS ته ورسوئ. لومړی، موږ به زموږ د انځور عنصر ته د ټولګي ارزښت اضافه کړو . دا ټولګی به د "هاک" په توګه کار وکړي چې موږ به یې زموږ CSS کې کاروئ.
په یاد ولرئ چې د "بائیں" دا ټولګي په خپل ځان هیڅ شی نلري! زموږ لپاره زموږ غوښتل شوي انداز ترلاسه کولو لپاره، موږ اړتیا لرو چې راتلونکې سی ایس ایس کاروئ.
د سي ایس ایس ډولونه
زموږ د HTML سره په ځای کې، د "بائیں" د زموږ د کلاس خاصیت په شمول، موږ اوس کولی شو CSS ته ورسوو. موږ به زموږ د شاليد لپاره يو قاعده اضافه کړو چې دا به هغه انځور راولي او د هغې په څنګ کې به لږ کمډونه اضافه کړي، نو هغه متن چې په پای کې به د انځور شاوخوا ګرځي، د هغې په وړاندې به د هغې په وړاندې نده راځي. دلته سی ایس ایس دی چې تاسو یې لیکلی شئ:
لرې ډډنگ: 0 20px 20px 0؛ }دا ډول سایټ ښيي چې ښي لور ته عکس ورکوي او لږ کوچني کول (د ځینې سی ایس ایس شارټ کارولو څخه کار اخلي) د انځور ښي او لاندې ته.
که تاسو هغه پاڼه بیاکتنه کړې چې په یو برنامه کې دا HTML لري، دا تصویر به اوس د ښي خوا سره سمون ولري او د پراګراف متن به د دوی حق ته د دواړو تر مینځ د مناسب فاصله سره راښکاره شي. د "بائیں" د ټولګي ارزښت یاد کړئ چې موږ یې کارول پخپل سري دی. موږ کولی شو چې دا څه ووایم ځکه چې "بائیں" اصطالح په خپله هیڅ شی نلري. دا اړتیا لري په HTML کې د کلاس ځانګړتیا ولري چې د اصلي CSS سټایل سره کار کوي کوم چې د لیدلو بدلونونه چې تاسو یې په لټه کې یاست ترتیب کړئ.
د دغو ډولونو د لاسته راوړلو لپاره بدیل الرې
د عکس عنصر د انځور عنصر د ټولګي ځانګړتیاوې او وروسته بیا د عمومي CSS سټایل کارولو سره کار کوي چې عنصر یوازې یو داسې لاره ده چې تاسو یې "د وتلی انځور" انځور وګورئ. تاسو کولی شئ د انځور او انداز څخه ټولګي ارزښت واخلئ چې دا د سی ایس ایس سره د یو ځانګړي ځانګړي انتخاب کونکي لیکلو له لارې. د مثال په توګه، راځئ یو مثال وګورئ چیرې چې دا انځور د ویشلو دننه دننه د "اصلي محتوا" سره د ټولګي ارزښت لري.
د دې عکس د اندازې لپاره، تاسو کولی شئ دا سی ایس ایس ولیکئ:
.main-content img {float: left؛ ډډنگ: 0 20px 20px 0؛ }په دې سیساریو کې، زموږ انځور به د ښي خوا سره سمون ولري، د هغې په شاوخوا کې د متن متن سره سره، مګر موږ اړتیا نه درلوده چې اضافي اضافه ارزښت زمونږ مارک اپ ته اضافه کړو. پدې پیمانه کول کولی شي د کوچني HTML فایل رامنځته کولو کې مرسته وکړي، کوم چې به د اداره کولو لپاره اسانه وي او د فعالیت د ښه کولو کې هم مرسته کولی شي.
په پاى کې، تاسو حتی په مستقيم ډول په خپل HTML مارک اپ کې اضافه کولی شئ، لکه:
دا طریقه د " انلاین ډولونه " په نامه یادېږي. دا د مشورې وړ نده ځکه چې دا د یو عنصر طرز ډول په ساختماني نښه نښه کولو سره په واضح ډول سره راټولوي. د ویب غوره عملونه داسې انګیرل چې د پاڼې طرز او جوړښت باید جلا وي. دا په ځانګړي ډول سره مرسته کوي کله چې ستاسو پاڼه خپل ترتیب بدل کړي او د مختلف سکرین اسباب او وسایلو ته د ځواب ورکوونکي ویب پاڼې سره وګوري . د دې پاڼې طرزالعمل چې په HTML کې شامل وي به د لیکوال رسنیو پوښتنو ته نور هم ستونزمن کړي چې ستاسو د سټارټ نظر ته اړتیا لري لکه څنګه چې د دغو مختلف اسڪرينونو لپاره اړتیا وي.
اصلي جینفر جینیفر کرینین. په 4/3/17 باندی جریمی Girard لخوا تصویب شوی.