92 Views
2018 Mar 03Trainingtechnology
img

سلام خدمت دوستان و همراهان همیشگی ای دانش ،با سری آموزش های CSS همراه شما عزیزان هستیم.در این جلسه قصد داریم به نحوه ی استفاده از دستورات CSS در صفحات وب بپردازیم.همانطور که در جلسه قبل گفته شد CSS  در لایه دوم وب یا همان نمایش کار می کند و بدون لایه ی محتوا که توسط HTML ساخته می شود معنی ندارد.یعنی دستورات CSS به تنهایی نمی توانند در صفحات وب کاربردی داشته باشند.


نحوه ی استفاده از دستورات CSS در صفحات وب

به 3 روش می توانیم از دستورات CSS در صفحات وب استفاده کنیم.در زیر به هر یک از آن ها اشاره شده است:

1- استایل خارجی:

به این معنا که دستورات css را درون فایل جداگانه ای نوشته و ذخیره می کنیم و بعد با استفاده از link به صفحه ی HTML اضافه می کنیم.در این روش دستورات CSS ابتدا در یک فایل نوشته شده و به بافرمت CSS. ذخیره می کنیم.سپس در سند HTML به کمک تگ لینک 2 فایل را به هم متصل می کنیم.به مثال زیر توجه کنید:

در مثال بالا فایل style.css را با کمک تگ link به سند HTML متصل کرده ایم.توجه داشته باشید که مقدار href آدرس فایل css است.

2- استایل داخلی:

در این روش نیاز به فایل جداگانه ای نیست و تمام دستورات css را در درون تگ <style> قرار می دهیم. بهتر است این تگ داخل تگ head قرار گرفته باشد.به مثال زیر توجه کنید:

همانطور که مشاهده می کنید استایل مورد نیاز خود را درون یک تگ style قرار دادیم.البته نحوه نوشتار استایل ها مربوط به درس این جلسه نیست و در جلسات بعدی به طور کامل به توضیح آن ها خواهیم پرداخت.

3-استایل خطی:

در این روش دستورات CSS را درون خود عناصر HTML به کار می بریم.در این جا از صفت style درون عناصر استفاده می شود.به مثال توجه کنید:

در مثال بالا درون تگ div از صفت style استفاده کرده و دستورات css خود را در آن جا نوشتیم.

نکته:گاهی اوقات اتفاق می افتد که دستورات CSS یک صفحه وب به صورت خارجی نوشته شده است ، اما شما به فایل آن دسترسی ندارید و می خواهید تغییراتی را درون دستورات اعمال کنید.در این جا شما به راحتی می توانید دستور مورد نظر خود را به صورت استایل داخلی بنویسید و در انتهای آن ها تنها important! را اضافه کنید.مانند مثال زیر:


در مثال بالا استایلی که به صورت داخلی نوشته شده است بر استایل خارجی که توسط تگ لینک به صفحه متصل شده است ارجحیت دارد.

خب تا به اینجا با نحوه ی استفاده از دستورات CSS در صفحات وب آشنا شدیم در ادامه به موضوع توضیحات در دستورات CSS می پردازیم.


اضافه کردن توضیحات در CSS

برای اضافه کردن توضیحات در دستورات CSS باید متن توضیحات را درون */ و /* قرار داد.به صورت زیر:

این توضیحات کاربرد بسیاری دارد.از جمله اینکه هر قسمت از دستورات را می توان با این توضیحات به دیگران شناساند.به طور مثال شما قالبی طراحی می کنید و قرار است آن را در اختیار شخص دیگری قرار دهید ، به همین دلیل از توضیحات در دستورات CSS استفاده می کنید تا شخص دیگر به راحتی متوجه کدها شود.


خب دوستان به انتهای این جلسه از سری آموزش های CSS رسیدیم ، امیدوارم مورد استفاده دوستان قرار گرفته باشد.

css

آموزش css

آموزش طراحی وب

طراحی قالب

قالب بندی سایت

استایل نویسی قالب