آموزش Css

سخن پایانی

در این سری از آموزش ها سعی نمودیم تا با زبانی ساده مفاهیم اصلی سی اس اس (CSS) را به علاقمندان منتقل نماییم و در اینجا دوره آموزش رایگان سی اس اس (CSS) در سایت نت شهر به پایان می رسد اما این بدان معنا نیست که مفاهیم سی اس اس به طور کامل بیان شده اند بلکه در این سری از آموزش ها حداقل های مورد نیاز برای شروع کار طراحی سایت آموزش داده شد.به علاقمندانی که تمایل به مطالعه بیشتر در زمینه سی اس اس (CSS) دارند پیشنهاد می شود به منابع اینترنتی زیر مراجعه نمایند: www.w3schools.com/css1www.htmldog.com/guides/css/beginnerwww.w3.org/Style/Examples/011/firstcss.en.htmlwww.html.net/tutorials/css www.developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started لازم به ذکر است که به منظور استفاده از منابع فوق الذکر آشنایی با زبان انگلیسی الزامی است. پیروز و سربلند باشیدتیم تولید محتوای نت شهر
آشنایی با Property های box-shadow و text-shadow در سی اس اس (CSS)

در سی اس اس برای افزودن سایه به عناصر قرار گرفته روی صفحه می توان از Property های box-shadow و text-shadow به ترتیب برای باکس ها و متون استفاده نمود. برای آنکه به طور عملی با این Property ها آشنا شویم، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="box1"></div> <h2>Netshahr</h2> </body> </html> همانطور که در کد فوق می بینیم یک تگ <div> با id یی تحت عنوان box1 به علاوه یک تگ <h2> حاوای عبارت "Netshahr" قرار داده ایم. در ادامه با استفاده از کدهای سی اس اس (CSS) قصد داریم تا هم به تگ <div> و هم به تگ <h2> سایه اضافه کنیم. ابتدا کدهای مرتبط با تگ <div> را به فایل سی اس اس (CSS) خود اضافه می کنیم:#box1 { width:300px; height:200px; background-color:red; box-shadow:10px 10px 15px 10px black; } همانطور که در کد فوق مشاهده می شود اندازه و رنگ پس زمینه قرمز برای این باکس در نظر گرفته شده است. در خط آخر هم با استفاده از Propertyیی تحت عنوان box-shadow سایه ای به رنگ مشکی در نظر گرفته شده است. ابتدا فایل خود را داخل مرورگر اجرا کرده سپس به تفسیر کد فوق می پردازیم: همانطور که در تصویر فوق می بینیم، سایه ای به رنگ سیاه برای باکس قرمز رنگ در نظر گرفته شده است. اگر نگاهی به Value های در نظر گرفته شده برای box-shadow بیندازیم می بینیم که ابتدا 10px نوشته شده است. این عدد مربوط به قرار گیری سایه در جهت محوری افقی است. 10px دوم مقدار مرتبط با قرارگیری سایه در جهت محور عمودی است. مقدار 15px مرتبط با میزان Blur یا "محوشدگی" سایه است. عدد چهارم که باز هم برابر با 10px است مرتبط با Spread یا میزان "اندازه" سایه است. سپس یک فاصله قرار داده و رنگی را برای سایه در نظر می گیریم که در مثال فوق رنگ black در نظر گرفته شده است (به خاطر داشته باشیم که علاوه بر کلید واژگان از پیش تعریف شده در سی اس اس می توان از مقادیر Hexadecimal و rgb هم استفاده کرد).به خاطر داشته باشیم که اگر برای box-shadow دو عدد در نظر بگیریم، این دو عدد برای اندازه سایه مورد استفاده قرار می گیرند و اگر سه عدد در نظر بگیریم، علاوه بر اندازه مقداری هم برای Blur در نظر گرفته خواهد شد. به خاطر داشته باشیم که می توانیم در صورت نیاز مقدار چهارم را حذف کرده و هیچ گونه Spreadیی برای باکس خود در نظر نگیریم (به خاطر داشته باشیم که به غیر از Blur برای دیگر بخش های ایجاد سایه از مقادیر منفی هم می توان استفاده نمود).برای آنکه بتوان نسخه های قدیمی تر فایرفاکس، گوگل کروم و سافاری اپل را هم پشتیبانی کرد می بایست کد خود را به صورت زیر تکمیل کنیم:#box1 { width:300px; height:200px; background-color:red; -moz-box-shadow:10px 10px 15px 10px black; -webkit-box-shadow:10px 10px 15px 10px black; box-shadow:10px 10px 15px 10px black; } می بینیم که برای پشتیبانی از مرورگر های نسخه قدیمی فایرفاکس از دستور moz-box-shadow- استفاده شده و برای پشتیبانی از مرورگر های قدیمی کروم و سافاری از دستور webkit-box-shadow- استفاده کرده ایم.حال فرض کنیم قصد داریم از دید زیبایی شناسی هم کمی روی سایه خود کار کنیم. برای این منظور کد فوق را به صورت زیر ویرایش می کنیم:#box1 { width:300px; height:200px; background-color:red; -moz-box-shadow:5px 5px 10px -5px black; -webkit-box-shadow:5px 5px 10px -5px black; box-shadow:5px 5px 10px -5px black; } همانطور که در کد فوق می بینیم جایگاه قرارگیری سایه را در جهت محور افقی و عمودی معادل با 5 پیکسل قرار داده سپس میزان محوشدگی سایه را برابر با 10 پیکسل قرار داده ایم و در نهایت هم میزان بزرگی سایه را برابر با منفی 5 پیکسل در نظر گرفته ایم. در حقیقت با در نظر گرفته یک عدد منفی برای اندازه سایه کاری خواهیم کرد که سایه کمی کوچکتر از باکس اصلی بوده و فقط کمی از محوشدگی آن به خارج از باکس انتقال می یابد. حال پس از ذخیره کردن فایل سی اس اس (CSS)، مرورگر خود را به روز رسانی می کنیم: می بینیم که به چه سادگی توانستیم افکت سایه جالبی برای چنین باکسی در نظر بگیریم.به خاطر داشته باشیم که برای هر تگ اچ تی ام ال (HTML) می توان بیش از یک سایه هم در نظر گرفت:#box1 { width: 300px; height: 200px; background-color: red; -moz-box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange; -webkit-box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange; box-shadow: 5px 5px 10px -5px black, 15px 15px 10px -5px orange; } همانطور که در کد فوق ملاحظه می شود پس از سایه اول یک کاما قرار داده سپس به همان ترتیب اول یک سایه دیگر اضافه می کنیم. حال مجدد مرورگر خود را به روز رسانی می کنیم: همانطور که در تصویر فوق ملاحظه می شود یک سایه نارنجی رنگ که کمی هم از سایه قبل بزرگ تر است روی باکس اعمال شده است. ایجاد سایه داخل تگ های اچ تی ام ال نیز همانند ایجاد سایه معمولی است با این تفاوت که برای ایجاد سایه داخل تگ ها اچ تی ام ال (HTML) می بایست از کلید واژه inset استفاده کرد. برای این منظور کدهای مربوط به باکس قرمز رنگ را به صورت زیر ویرایش می کنیم:#box1 { width: 300px; height: 200px; background-color: red; -moz-box-shadow: inset 5px 5px 10px -5px black; -webkit-box-shadow: inset 5px 5px 10px -5px black; box-shadow: inset 5px 5px 10px -5px black; } همانطور که در کد فوق می بینیم، پیش از مقادیر تعریف شده برای box-shadow از کلید واژه inset استفاده کرده ایم. حال مجدد مرورگر خود را به روز رسانی می کنیم: می بینیم که برای متن سایه ای در نظر گرفته شده است. با استفاده از این تکنیک به سادگی می توان افکت های جذابی برای عناصر قرار گرفته روی صفحه مثل دکمه ها ایجاد کرد. برای مثال با ویرایش کدهای فوق به صورت زیر می توان این سایه را به چهار گوشه مستطیل اعمال کرد:#box1 { width: 300px; height: 200px; background-color: red; -moz-box-shadow: inset 0 0 12px 1px black; -webkit-box-shadow: inset 0 0 12px 1px black; box-shadow: inset 0 0 10px 1px black; } همانطور که در کد فوق می بینیم برای محل قرارگیری افقی و عمودی سایه عدد صفر را وارد کرده ایم سپس برای میزان محوشدگی عدد 12 پیکسل و برای اندازه سایه هم 1 پیکسل را در نظر گرفته ایم. مجدد مرورگر فایرفاکس را به روز رسانی می کنیم: همانطور که در تصویر فوق مشاهده می شود، سایه به هر چهار گوشه باکس قرمز رنگ به طور یکسان اعمال شده است. نحوه اختصاص دادن سایه به متون هم کاملاً شبیه به اختصاص سایه به یک باکس است با این تفاوت که به جای box-shadow می بایست از text-shadow استفاده نموده و همچنین عدد آخر که مربوط به Spread است می بایست حذف شود. برای روشن شدن این مطلب با ویرایش کردن کدهای سی اس اس (CSS) قصد داریم تا به عبارت داخل تگ <h2> یک سایه اضافه کنیم:h2 { text-shadow: 4px 4px 12px black; } همانطور که در کد فوق می بینیم مقدار 4 پیکسل را برای جایگاه افقی و عمودی سایه متن در نظر گرفته و همچنین عدد 12 پیکسل را برای میزان Blur یا محوشدگی سایه در نظر گرفته ایم. پس از ذخیره کردن، فایل را داخل مرورگر به روز رسانی می کنیم: می بینیم برای متنی که داخل تگ <h2> در نظر گرفته بودیم سایه ای ایجاد شده است.
آشنایی با Property یی تحت عنوان opacity در سی اس اس (CSS)

گاهی اوقات نیاز داریم تا عناصر قرار گرفته روی یکدیگر را تا حدودی شفاف سازیم تا چیزی که در زیر قرار گرفته است نیز نمایان گردد. برای این منظور به سادگی با استفاده از Property یی تحت عنوان opacity می توان این کار را در سی اس اس (CSS) انجام داد. برای روشن شدن این مطلب ابتدا کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> همانطور که در کد فوق می بینیم اقدام به استفاده از دو تگ <div> کرده ایم و id هایی تحت عناوین box1 و box2 به آن ها اختصاص داده ایم و این در حالی است که هر دو تگ حاوی هیچ محتوایی نمی باشند. در ادامه کدهای سی اس اس (CSS) مرتبط با این تگ ها را به صورت زیر وارد فایل مربوط به کدهای سی اس اس (CSS) می کنیم:#box1 { position:absolute; left:0px; top:0px; width:300px; height:200px; background-color:red; } #box2 { left:0px; top:0px; position:absolute; width:100px; height:100px; background-color:blue; } همانطور که در کد فوق می بینیم خصوصیات متفاوتی را برای هر دو تگ <div> در نظر گرفته ایم. برای مشاهده خروجی کدهای اچ تی ام ال و سی اس اس، فایل اچ تی ام ال را داخل مرورگر باز می کنیم: می بینیم که هر دو باکس روی یکدیگر قرار گرفته اند. حال فرض کنیم قصد داریم تا میزان شفافیت فاکس آبی رنگ را کاهش دهیم تا باکس قرمز رنگ از زیر آن مشخص باشد. برای این منظور کدهای سی اس اس (CSS) خود را به صورت زیر تکمیل می کنیم: #box1 { position:absolute; left:0px; top:0px; width:300px; height:200px; background-color:red; } #box2 { left:0px; top:0px; position:absolute; width:100px; height:100px; background-color:blue; opacity:0.3; } در کد فوق برای box2 از Propertyیی تحت عنوان opacity استفاده کرده ایم و مقدار آن را برابر با 0.3 قرار داده ایم. پس از ذخیره کردن فایل، مرورگر خود را به روز رسانی می کنیم: می بینیم که با اعمال تغییرات فوق باکس آبی شفاف شده است به طوری که از زیر آن باکس قرمز رنگ مشاهده می شود. به خاطر داشته باشیم که همواره برای opacity مقداری مابین مقادیر 0 و 1 می توان در نظر گرفت (لازم به ذکر است مقادیری همچون 0.1 و 0.9 و ... مابین این دو عدد قرار می گیرند). علاوه بر این opacity تاثیری روی border نخواهد گذاشت و صرفاً بر پس زمینه اعمال می شود.
آشنایی با Attribute یی تحت عنوان clear در سی اس اس (CSS)

Attribute یی تحت عنوان clear با float به کار گرفته می شود. همانطور که پیش از این گفتیم تگ های اچ تی ام ال (HTML) به صورت پیش فرض یکی پس از دیگری قرار می گیرند و زمانیکه یکی از آن ها را به سمت راست یا چپ float کنیم، تگ بعدی جای آن قرار خواهد گرفت.گاهی اوقات در طراحی صفحات وب برای ما پیش می آید که نیاز داریم پس از آنکه تگی را float کردیم، تگ های بعدی جایگاه تگ float شده را نگیرند. برای این منظور می بایست از تگی تحت عنوان clear استفاده کنیم. برای روشن شدن این موضوع کدهای اچ تی ام ال (HTML) خود را وارد ویرایشگر کد می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="header">Header</div> <div id="body">Body</div> <div id="menu">Menu</div> <div id="footer">Footer</div> </body> </html> همانطور که می بینیم از چهار تگ <div> برای ایجاد Header، Body، Menu و Footer استفاده کرده ایم و اسامی مرتبطی هم برای آن ها انتخاب کرده ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) در فایل مربوطه می کنیم:#header { width:500px; height:100px; background-color:gray; } #body { width:400px; height:400px; background-color:yellow; } #menu { width:100px; height:200px; background-color:red; } #footer { width:500px; height:50px; background-color:gray; } همانطور که می بینیم برای هر کدام از تگ ها ابعاد و رنگ خاصی در نظر گرفته ایم. حال فایل خود را دخل مرورگر اجرا می کنیم: می بینیم که تگ ها یکی پس از دیگری به همان ترتیبی که نوشته شده اند به نمایش درآمده اند. حال قصد داریم تا Body را به سمت راست float کرده و menu را به سمت چپ. برای این منظور کدهای سی اس اس (CSS) خود را به صورت زیر بازنویسی می کنیم:#header { width:500px; height:100px; background-color:gray; } #body { width:400px; height:400px; background-color:yellow; float:right; } #menu { width:100px; height:200px; background-color:red; float:left; } #footer { width:500px; height:50px; background-color:gray; } برای مشاهده تاثیر این تغییرات، پس از ذخیره کردن فایل سی اس اس (CSS)، مرورگر را به روز رسانی می کنیم: می بینیم که Body به سمت راست انتقال داده شده، Menu به سمت چپ و این در حالی است که Footer که بایستی جایگاه آن در پایین صفحه باشد، زیر Header قرار گرفته است. برای رفع این مشکل، کد سی اس اس (CSS) خود را به صورت زیر تکمیل می کنیم:#header { width:500px; height:100px; background-color:gray; } #body { width:400px; height:400px; background-color:yellow; float:right; } #menu { width:100px; height:200px; background-color:red; float:left; } #footer { width:500px; height:50px; background-color:gray; clear:both; } همانطور که می بینیم برای تگ footer از Attribute تحت عنوان clear استفاده کرده و مقدار آن را برابر با both قرار داده ایم. لازم به ذکر است که این Attribute می تواند مقادیر right، left، both، none و inherit را داشته باشد.مجدد مرورگر را به روز رسانی می کنیم: همانطور که از نام clear به معنی "پاک کردن" بر می آید، زمانیکه مقدار both را در نظر می گیریم، هر دو طرف تگی که برای آن clear را در نظر گرفته ایم پاک شده بنابراین آن تگ در کنار هیچ تگ دیگری قرار نخواهد گرفت. زمانیکه مقدار right را برای آن در نظر بگیریم تگ دیگری در سمت راست تگ مد نظر قرار نخواهد گرفت و زمانیکه مقدار left را برای آن در نظر بگیریم هیچ تگ دیگری در سمت چپ تگ مد نظر قرار نخواهد گرفت.
آشنایی با Property یی تحت عنوان float در سی اس اس (CSS)

برای آنکه بتوانیم جایگاه عناصر قرار گرفته روی صفحه را به راست یا چپ منتقل کنیم، می بایست از Attribute یی تحت عنوان float استفاده کنیم. برای این Attribute مقادیری همچون right، left، none و inherit می توان استفاده کرد.همانطور که پیش از این اشاره شد، تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته شوند روی مرورگر به نمایش در خواهند آمد. برای درک این موضوع کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="square1"></div> <div id="square2"></div> <div id="square3"></div> </body> </html> به طور خلاصه سه تگ از جنس <div> تحت عناوین square2، square1 و square3 ایجاد کرده ایم. در ادامه با نوشتن کدهای سی اس اس (CSS) قصد داریم تا مفهوم float را توضیح دهیم:#square1 { width:100px; height:100px; background-color:black; } #square2 { width:100px; height:100px; background-color:orange; } #square3 { width:100px; height:100px; background-color:gray; } همانطور که مشخص است برای هر یک از تگ ها ابعاد و یک رنگ مجزا در نظر گرفته ایم. حال فایل خود را داخل مرورگر اجرا می کنیم: می بینیم که تگ ها به همان ترتیبی که نوشته شده اند به نمایش در آمده اند. حال کدهای سی اس اس (CSS) را به صورت زیر بازنویسی می کنیم:#square1 { width:100px; height:100px; background-color:black; } #square2 { width:100px; height:100px; background-color:orange; float:right; } #square3 { width:100px; height:100px; background-color:gray; } همانطور که در کد فوق می بینیم، برای square2 یک Attribute تحت عنوان float در نظر گرفته و مقدار آن را برابر با right در نظر گرفته ایم. از این پس این تگ تا جاییکه بتواند به سمت راست خواهد رفت. از آنجا که پس از انتقال این تگ به سمت راست جای آن خالی می شود، تگ square3 جای آن قرار خواهد گرفت. برای مشاهده نتیجه، مجدد مرورگر را به روز رسانی می کنیم: مجدد کدهای سی اس اس (CSS) را به صورت زیر بازنویسی می کنیم:#square1 { width:100px; height:100px; background-color:black; float:right; } #square2 { width:100px; height:100px; background-color:orange; float:right; } #square3 { width:100px; height:100px; background-color:gray; float:right; } همانطور که در کد فوق می بینیم، دستور float را برای هر سه تگ در نظر گرفته ایم و مقدار آن را هم برابر با right قرار می دهیم. حال مجدد مرورگر را به روز رسانی می کنیم: می بینیم که کلیه تگ های به سمت راست انتقال پیدا کرده و درکنار یکدیگر قرار می گیرند. یکی از تکنیک هایی که از آن طریق می توان اقدام به ساخت منو کرد همین روش است به این صورت که تعدادی تگ را کنار یکدیگر قرار داده و کلیه آنها را به سمت راست یا چپ float می کنیم.
آشنایی با fixed در طراحی Layout با سی اس اس (CSS)

مقدار fixed به نوعی همانند absolute است با این تفاوت که جایگاه آن همواره در صفحه ثابت خواهد بود. برای روشن شدن این موضوع کدهای زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <div id="square1"></div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p>End</p> </body> </html> در کد فوق تگی از جنس <div> تحت عنوان square1 ایجاد کرده ایم. حال برای آنکه صفحه ای طولانی داشته باشیم از تگ </br> استفاده کرده ایم تا از قصد کاری کنیم که صفحه رو به پایین اسکرول شود و در انتها هم یک تگ پاراگراف حاوی عبارت End به معنی "پایان" قرار داده ایم.در ادامه اقدام به ویراش کدهای سی اس اس می کنیم: #square1 { width:100px; height:100px; background-color:orange; position:fixed; top:30px; left:244px; } ابعاد این تگ 100 * 100 پیکسل خواهد بود و رنگ پس زمینه نارنجی هم برای آن در نظر گرفته شده است. مقدار مرتبط با position برابر با fixed است و این در حالی است ک این تگ از بالا به میزان 30 پیکسل و از سمت چپ به میزان 244 پیکسل فاصله دارد. برای مشاهده خروجی، فایل اچ تی ام ال خود را در مرورگر اجرا می کنیم: می بینیم که این تگ همانند تگی که مقدار absolute برای position آن در نظر گرفته شده روی صفحه قرار گرفته در حالیکه از بالا به میزان 30 پیکسل و از سمت چپ به میزان 244 پیکسل فاصله گرفته است. همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است، این صفحه ادامه دارد و با اسکرول کردن رو به پایین به ادامه صفحه خواهیم رسید. برای این منظور به پایین صفحه اسکرول می کنیم: می بینیم که پس از اسکرول کردن رو به پایین، عبارت End که در انتهای صفحه قرار گرفته است به نمایش در آمده اما نکته جالب اینجا است که مربع نارنجی رنگ جایگاه خود را حفظ کرده و به هیچ وجه با اسکرول کردن رو به پایین به خارج از صفحه انتقال داده نشده است.
آشنایی با absolute در طراحی Layout با سی اس اس (CSS)

در این ماژول قصد داریم تا با Value دیگری تحت عنوان absolute به معنی "مطلق" در طراحی Layout با سی اس اس (CSS) آشنا شویم. absolute بر خلاف relative این امکان را به طراح می دهد تا ترتیب پیش فرض نمایش تگ های اچ تی ام ال (HTML) را دنبال نکرده و هر تگی را در هر کجای صفحه که خواست نمایش دهد. برای درک بهتر نحوه عملکرد absolute کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <p id="square1">مربع شماره یک</p> <p id="square2">مربع شماره دو</p> </body> </html> همانطور که در کد فوق می بینیم دو پاراگراف ایجاد کرده و برای هر یک id یی در نظر گرفته ایم. حال اقدام به تکمیل کدهای سی اس اس (CSS) می کنیم:#square1 { width:100px; height:100px; background-color:yellow; position:relative; top:20px; left:222px; } #square2 { width:100px; height:100px; background-color:violet; position:relative; top:20px; left:20px; } پس از تنظیم ابعداد هر یک از مربع ها از طریق Propertyهای width و height و همچنین انتخاب رنگی برای پس زمینه آن ها، position هر دو مربع را برابر با relative قرار داده ایم. سپس مقدار top را برای هر دو مربع معادل با 20 پیکسل قرار داده ایم. در نهایت مقدار left را برای مربع اول معادل با 222 پیکسل و برای مربع دوم معادل با 20 پیکسل قرار داده ایم. اکنون می توانیم فایل خود را داخل مروگر اجرا کنیم: در ادامه قصد داریم تا مقدار position مرتبط با مربع اول را از relative به absolute تغییر دهیم:#square1 { width:100px; height:100px; background-color:yellow; position:absolute; top:20px; left:222px; } #square2 { width:100px; height:100px; background-color:violet; position:relative; top:20px; left:20px; } ابتدا فایل خود را داخل مرورگر به روز رسانی کرده و سپس به توضیح بیشتر پیرامون نحوه عملکرد absolute می پردازیم: می بینیم که مربع شماره دو به بالا انتقال یافت. در حقیقت زمانی که Value مرتبط با position یک تگ را برابر با absolute قرار می دهیم، دیگر مرورگر آن تگ را به ترتیبی که کدهای اچ تی ام ال نوشته شده اند نشان نخواهد داد گویی از کدهای اچ تی ام ال (HTML) حذف شده است. از آنجا که به طور فرضی این تگ از تگ های اچ تی ام ال حذف شده است، تگ هایی که بعد از آن نوشته شده اند به جای آن انتقال پیدا می کنند بنابراین به همین دلیل است که مربع بنفش رنگ به بالا و جای مربع زرد رنگ انتقال یافت.نکته ای که در ارتباط با absolute وجود دارد این است که اگر تگ یی که مقدار absolute برای آن در نظر گرفته شده است داخل تگ <body> قرار داشته باشد، اندازه های top، right، bottom و left نسبت به تگ <body> یا به عبارت دیگر لبه های مرورگر مد نظر قرار داده می شوند (همانطور که در تصویر فوق می بینیم، مربع زرد رنگ نسبت به لبه صفحه مرورگر 20 پیکسل از بالا و 222 پیکسل از پایین گرفته است.اما اگر یک تگ اچ تی ام ال حاوی absolute باشد و این تگ داخل تگ دیگری که خود نسبت به تگ <body> دارای فاصله است قرار گیرد، آنوقت تگ اول جایگاه خود را نسبت به تگ دوم مشخص می سازد نه تگ <body>. برای روش شدن این مطلب کدهای اچ تی ام ال (HTML) فوق را به صورت زیر بازنویسی می کنیم: <body> <div id="square1"> <div id="square2"></div> </div> </body> همانطور که در کد فوق می بینیم، ابتدا یک تگ <div> ایجاد کرده ایم تحت عنوان square1 سپس یک تگ <div> دیگر داخل آن ایجاد کرده ایم تحت عنوان square2. اکنون به فایل سی اس اس (CSS) رجوع کرده و اقدام به کدنویسی برای این دو تگ می نماییم (به خاطر داشته باشیم که از این پس square1 به عنوان تگ اصلی یا parent شناخته می شود و square2 به عنوان تگ زیرشاخه یا child مد نظر قرار داده خواهد شد):#square1 { width:300px; height:400px; background-color:yellow; position:relative; top:30px; left:44px; } #square2 { width:100px; height:100px; background-color:violet; position:absolute; top:120px; left:0; } کاری که کرده ایم این است که پس از در نظر گرفتن مقادیری برای ابعاد و همچنین رنگ square1، مقدار position آن را برابر با relative قرار داده ایم. به عبارت دیگر این تگ به همان ترتیبی که در کدهای اچ تی ام ال (HTML) نوشته شده است به نمایش در خواهد آمد با این تفاوت که فواصل این تگ را از چهار جهت می توان تنظیم کرد. از این رو این تگ از بالا به میزان 30 پیکسل و از سمت چپ به میزان 44 پیکسل فاصله گرفته است. مقدار position تگ square2 برابر با absolute قرار گرفته است اما از آنجا که این تگ داخل تگ square1 قرار دارد، هر فاصله ای که برای top و left این تگ در نظر بگیریم، نسبت به تگ square1 محاسبه خواهد شد. برای مشاهده خروجی برنامه، فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم: همانطور که می بینیم جایگاه square2 که بنفش رنگ است نسبت به square1 که زرد رنگ است مشخص شده است.
آشنایی با مفاهیم طراحی Layout از طریق سی اس اس (CSS)

شاید بتوان گفت یکی از دشوار ترین بخش های فراگیری زبان سی اس اس (CSS) نحوه ایجاد یک Layout از طریق آن باشد. در این ماژول قصد داریم تا با چیزی تحت عنوان Normal Flow آشنا شویم.به طور کلی تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته می شوند روی صفحه نمایش داده می شوند که به چنین چیزی Normal Flow گفته می شود. برای روشن شدن این مسئله کدهای زیر را وارد ویراشگر کد خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <h1>آشنایی با نحوه ساخت لی اوت با سی اس اس</h1> <p>کدهای اچ تی ام ال به همان ترتیبی که نوشته می شوند نمایش هم داده می شوند</p> <p>چنین حالتی اصطلاحاً نرمال فلو گفته می شود</p> </body> </html> همانطور که در کد فوق می بینیم، ابتدا یک تگ <h1> نوشته سپس از دو تگ <p> استفاده کرده ایم و داخل هر کدام از آن ها عبارتی را نوشته ایم. حال این فایل را داخل مرورگر خود اجرا می کنیم: همانطور که در تصویر فوق می بینیم، تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته شده اند به نمایش در آمده اند.برای آنکه بتوانیم روی نحوه نمایش تگ های اچ تی ام ال تسلط بیشتری داشته باشیم، می بایست از دستورات سی اس اس (CSS) استفاده کنیم. Attribute یی تحت عنوان position این امکان را به طراح می دهد تا با استفاده از مقادیر مختلفی که برایش در نظر گفته شده است، جایگاه تگ های اچ تی ام ال (HTML) را روی صفحه مشخص سازد. این Attribute یکی از پنج گزینه static، relative، absolute، fixed و inherit را می تواند داشته باشد.منظور از مقدار static همان حالت پیش فرض است که تگ های اچ تی ام ال به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در می آیند. برای مشخص شدن تاثیر این Value کد زیر را وارد فایل سی اس اس (CSS) خود می کنیم: h1, p{ position:static; } همانطور که در کد فوق می بینیم، برای تگ های h1 و p از Attribute یی تحت عنوان position استفاده کرده و Value آن را برابر با static قرار داده ایم. حال مرورگر را به روز رسانی می کنیم: می بینیم که عناصر قرار گرفته روی صفحه هیچ تغییری نکردند.Value دیگری که در ارتباط با position می خواهیم مد نظر قرار دهیم relative به معنی "نسبی" است. زمانیکه از این Value استفاده می کنیم، تگ های اچ تی ام ال (HTML) باز هم به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در می آیند با این تفاوت که می توان فاصله ای برای هر چهار جهت بالا، راست، پایین و چپ تگ خود مد نظر قرار دهیم. برای روشن شدن این موضوع کد اچ تی ام ال (HTML) فوق را به صورت زیر بازنویسی می کنیم: <body> <p id="square1">مربع شماره یک</p> <p id="square2">مربع شماره دو</p> <p id="square3">مربع شماره سه</p> </body> همانطور که در کد فوق می بینیم سه پاراگراف ایجاد کرده ایم و برای هر یک از آن ها هم یک id در نظر گرفته ایم. اکنون اقدام به تکمیل فایل سی اس اس (CSS) خود می کنیم: #square1 { width:100px; background-color:blue; position:relative; top:20px; left:32px; } #square2 { width:100px; background-color:green; position:relative; top:40px; left:200px; } #square3 { width:100px; background-color:red; position:relative; top:100px; left:10px; } همانطور که در کد فوق مشاهده می شود، برای هر یک از پاراگراف ها اندازه ای معادل با 100 پیسکل در نظر گرفته سپس رنگی برای پس زمینه آن ها انتخاب کرده ایم. پس از انتخاب relative برای position هر یک از آن ها، حال نوبت به تنظیم فاصله آن ها از سمت بالا و چپ می رسد. برای این منظور از Attribute های top و left استفاده کرده ایم (به خاطر داشته باشیم که برای سمت راست و پایین هم به ترتیب از right و bottom می توان استفاده کرد).برای مربع اول فاصله از بالا را 20 پیکسل و فاصله از سمت چپ را 32 پیکسل در نظر گرفته ایم. برای مربع دوم فاصله از بالا را 40 پیکسل و فاصله از سمت چپ را 200 پیکسل در نظر گرفته ایم. به خاطر داشته باشیم که در ارتباط با مربع اول 20 پیکسل از لبه مرورگر حساب می شود اما این در حالی است که در ارتباط با مربع دوم این 40 پیکسل نسبت به تگ قبلی یا همان مربع اول محاسبه می شود. به عبارت دیگر مربع شماره دو از مربع شما یک 40 پیکسل فاصله دارد. در نهایت مربع شماره سه از بالا 100 پیکسل و از سمت چپ 10 پیکسل فاصله دارد. حال فایل خود را مجدد داخل مرورگر به روز رسانی می کنیم: می بینیم که مربع ها به همان ترتیبی که در کدهای اچ تی ام ال (HTML) نوشته شده بودند به نمایش در آمده با این تفاوت که از سمت بالا و سمت چپ دارای فواصل مختلفی هستند.
نحوه خلاصه نویسی کدهای مرتبط با background در سی اس اس (CSS)

یکی از روش های کدنویسی بهینه، استفاده از رویکردی است که اصطلاحاً Shorthand یا "خلاصه نویسی" نامیده می شود. به عبارت دیگر به جای استفاده از چندین Property مرتبط با background-image, background-color و background-position به سادگی می توان از background استفاده کرد و مقادیر مرتبط با Property های فوق را یکی پس از دیگری برای background در نظر گرفت.برای توضیح نحوه خلاصه نویسی کدهای سی اس اس مرتبط با background, کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <p>Background Shorthand Coding in CSS</p> </body> </html> حال اقدام به نوشتن کدهای سی اس اس مرتبط با تگ <p> می کنیم: p { width: 450px; height: 450px; background: #ffdeff url(../images/bird.jpg) no-repeat left top; } پس از اختصاص ابعاد 450 در 450 پیکسل برای width و height، کلید واژه background را نوشته و به عنوان Value مرتبط با آن ابتدا ffdeff# را که مرتبط با رنگ پس زمینه تگ ما است را می نویسیم سپس یک فاصله قرار داده و url مرتبط با مسیر عکس مد نظر را می نویسیم (به خاطر داشته باشیم که مابین Value ها حتماً می بایست از یک فاصله استفاده کرد و به هیچ وجه از کاما نمی بایست استفاده نمود). مجدد یک فاصله دیگر قرار داده و Value مرتبط با تکرار عکس پس زمینه که no-repeat است را می نویسیم و در نهایت مقادیر مرتبط با جایگاه عکس پس زمینه را می نویسیم که left برای مشخص سازی جایگاه تصویر در جهت محور افقی و top برای تنظیم جای تصویر در جهت محور عمودی است. پس از ذخیره کردن فایل ها، فایل اچ تی ام ال (HTML) را در مرورگر اجرا می کنیم: در حقیقت از آنجا که ابعاد تصویر فوق با ابعاد در نظر گرفته شده برای Property های width و height یکی می باشد از اینرو اختصاص و عدم اختصاص مقادیر left و top در جایگاه تصویر تاثیری نخواهد گذاشت.نکته ای که در اینجا از اهمیت بسزایی برخوردار است این است که اگر برای background یک تصویر در نظر بگیریم، جایگاه قرار دادن Value مرتبط با رنگ هیچ تاثیری در خروجی فایل نخواهد داشت اما اگر بیش از یک تصویر داشته باشیم قضیه فرق خواهد کرد. برای روشن شدن این موضوع کدهای سی اس اس (CSS) زیر را در نظر می گیریم: p { width: 460px; height: 460px; background: url(../images/facebookIcon.png) no-repeat left center, url(../images/bird.jpg) no-repeat left top ,#ffdeff; } همانطور که در کد فوق می بینیم ابتدا ابعداد 460 در 460 را برای این Selector در نظر می گیریم. سپس url مربوط به آیکان فیسبوک را قرار داده و پس از اختصاص دیگر دستورات مرتبط با این تصویر یک کاما قرار می دهیم و url مربوط به تصویر زیرین یا همان تصویر طوطی را وارد می کنیم و مجدد کدهای مرتبط با این تصویر را می نویسیم. در نهایت مجدد یک کاما قرار داده و یک کد رنگ را وارد می کنیم. حال فایل اچ تی ام ال (HTML) خود را در مرورگر باز می کنیم: می بینیم که رنگی مایل به صورتی برای پس زمینه عکس طوطی در نظر گرفته شده است.
نحوه به کارگیری چندین تصویر پس زمینه در سی اس اس (CSS)

یکی از قابلیت های بسیار کاربردی در سی اس اس امکان اختصاص بیش از یک تصویر برای background-image است. در واقع با استفاده از این قابلیت می توان چیزهای جذابی من جمله بنرهایی که از چندین عکس تشکیل شده اند طراحی نمود.برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> <link type="text/css" rel="stylesheet" href="css/main.css"> </head> <body> <p>Multiple Background Image</p> </body> </html> همانطور که در کد فوق می بینیم، داخل تگ <body> یک تگ پاراگراف حاوی عبارت Multiple Background Image ایجاد کرده ایم. حال با استفاده از کدهای سی اس اس علاوه بر اختصاص اندازه و رنگ به این تگ، قصد داریم تا دو عکس هم روی آن قرار دهیم. برای این منظور، کدهای سی اس اس زیر را وارد ویرایشگر متن خود می کنیم:p { width: 450px; height: 450px; background-color: #9cf; background-image: url(../images/facebookIcon.png),url(../images/bird.jpg); background-repeat:no-repeat; } همانطور که در کد فوق می بینیم، برای background-image دو url در نظر گرفته ایم که بوسیله یک کاما از یکدیگر جدا شده اند. به خاطر داشته باشیم که url یی که اول نوشته شود به منزله تصویری خواهد بود که روی تصویر زیرین نمایش داده خواهد شد. همانطور که مشخص است url دوم هم مربوطه به عکسی است که زیر عکس بالایی قرار می گیرد. می بینیم که فایل اول فایلی با پسوند png است که مربوط به آیکان فیسبوک است و فایل دوم که در پس زمینه عکس قبل قرار خواهد گرفت یک عکس با پسوند jpg است تحت عنوان bird که مربوط به عکس یک طوطی می باشد. حال پس از ذخیره کردن هر دو فایل سی اس اس (CSS) و اچ تی ام ال (HTML) اقدام به اجرای صفحه در یک مرورگر می کنیم: همانطور که در تصویر فوق می بینیم، عکس مربوط به طوطی در پس زمینه قرار گرفته و عکس مربوط به فیسبوک هم روی آن قرار گرفته است. حال فرض کنیم که با استفاده از دستور background-repeat قصد داریم تا عکس مربوط به فیسبوک را در جهت محور افقی تکرار کنیم. برای این منظور کدهای فوق را به صورت زیر بازنویسی می کنیم:p { width: 450px; height: 450px; background-color: #9cf; background-image: url(../images/facebookIcon.png),url(../images/bird.jpg); background-repeat:repeat-x,no-repeat; } همانطور که می بینیم برای background-repeat دو مقدار در نظر گرفته ایم که مقدار یا Value اول مربوط به تصویر اول یا همان لوگوی فیسبوک بوده و مقدار دوم هم برای تصویر مربوط به طوطی می باشد. حال مجدد مرورگر خود را به روز رسانی می کنیم: همانطور که در تصویر فوق مشاهده می شود، لوگوی فیسبوک در جهت محور افقی تکرار شده است. همواره به خاطر داشته باشیم که اگر فقط یک Value برای Background-repeat در نظر بگیریم، این Value به هر دو عکس و یا هر تعداد عکسی که در نظر گرفته باشیم اختصاص می یابد.علاوه بر این می توان از دستور background-position هم استفاده کرد به طوری که با تغییر کد فوق به صورت زیر می توان جایگاه تصاویر را نیز روی یکدیگر تنظیم نمود:p { width: 450px; height: 450px; background-color: #9cf; background-image: url(../images/facebookIcon.png), url(../images/bird.jpg); background-repeat: no-repeat; background-position: left center, 0 0; } همانطور که در کد فوق می بینیم به عنوان Value مرتبط با background-position ابتدا left center را در نظر گرفته که مربوط به تصویر لوگوی فیسبوک است سپس یک کاما قرار داده و این بار برای مشخص سازی جایگاه تصویر مربوط به طوطی از عدد استفاده می کنیم و از آنجا که می خواهیم این تصویر به صورت پیش فرض باشد اعداد 0 0 را در نظر می گیریم و از آنجا که در سی اس اس برای مقدار صفر نیازی به نوشتن px یا em و غیره نیست، کد را به بدون نوشتن px به اتمام می رسانیم.