CSS چیست؟

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

اگر یک صفحه وب را به سه بخش تقسیم کنیم که شامل: محتوا، نحوه ارایه و رفتار آن باشد، CSS را میتوان نحوه‌ی ارایه یک وب‌سایت در نظر بگیریم. بیایید مطلب را کمی بیشتر و عمیق‌تر بررسی کنیم.

اسکلت یک ساختمان را در نظر بگیرید که از این به بعد آن را  HTML خواهیم خواند، نمای همان ساختمان را در نظر بگیرید که به مصداق CSS خواهد بود و کاربری آن ساختمان را هم JavaScript تعیین خواهد کرد.

محتوا یا همان اسکلت یک صفحه وب شامل کدهایی است که هیچ تزیین خاصی ندارند و صرفن میتوان انها را به صورت یک متن و یا عکس و یا ویدئو در مرورگر مشاهده کرد. در همین صفحه که الان مشاهده می‌کنید و در حال خواندن متن هستید، میتوانید ببینید که وب سایت در سه ستون طراحی شده است و چیزی که الان شما در حال مطالعه هستید از جنس متن است پس چه چیز این وب سایت را زیباتر کرده و تمامی ستون‌ها و قسمت‌های مختلف وب سایت را در کنار هم قرار داده و نظم خاصی به وب‌سایت داده است؟

جواب ما CSS است. کلمه CSS مخفف عبارت Cascading Style Sheets است و تاکنون در زبان فارسی معنی مناسبی برای این عبارت پیدا نشده است اما “الگوهای آبشاری” چیزی است که به آن اتلاق می‌شود. CSS یک زبان استایل دهی به کدهای نشانه گزاری (XHTML) است. شما می‌توانید به هر المانی که در HTML وجود دارد یک کلاس (Class) یا آی‌دی (ID) تعریف کنید و با استفاده از آن class و یا id چند خط css برای آن قمست بنویسید یا به اصطلاح المان‌های صفحه وب خود را استایل دهی کنید.

میتوان از کدهای CSS در سه حالت بهره برد. یکی از این راه‌ها این است که هنگام نوشتن کد در HTML کدهای CSS را به صورت مستقیم وارد کنید، که به این حالت می‌گوییم InLine CSS . مانند نمونه زیر :

در کد بالا شما به المان H1 در کدتان ویژگی رنگ قرمز را به پشت زمینه آن اضافه کرده‌اید یا به زبان خودمان آنرا استایل دهی کردید. در این حالت شما بدون تعریف class و یا id به المان خود استایل دادهاید و می‌توانید همین روال را ادامه دهید اما تصور کنید پروژه شما کمی بزرگتر شده است و کنترل این همه کد به صورت Inline وقت شما را تلف می‌کند و کد را کثیف‌تر می‌کند، پس باید راه حلی باشد، و اینگونه هم هست. در قسمت Head کد HTML خود می‌توانید تمامی المان‌ها استایل دهی کنید و تنها کار شما این است که آنها در المان‌های موجود فراخوانی کنید مانند نمونه زیر:

این روش هم مزیت‌های خودش را دارد ولی اگر پروژه ما به یک پروژه خیلی بزرگ تبدیل شود دیگر این روش هم کارایی خودش رو از دست میده و شما باید بلد باشید با Classها و idها و در مجموع CSSهای خارجی دست و پنجه نرم کنید. به نمونه کد زیر دقت کنید. در ضمن در یاد داشته باشید که برای تعریف کلاس در css از نقطه (.) استفاده میشود و برای تعریف id از هشتگ (#) استفاده می‌شود. در ادامه در مورد class و id بیشتر بحث می‌کنیم.

من کلاسی به نام .colorOfElements در یک فایل فرضی CSS قرار داده‌ام. اسم فایل استایل را هم style.css گذاشته‌ام تنها کاری که لازم است انجام دهم فراخوانی فایل استایل به صفحه HTML است.

style.css

test.html

همانگونه که میبینید من فایل استایل را به صفحه وب خود الحاق کردم سپس تنها کاری که باید انجام دهم چسباندن همان کلاس به یک المان HTML  است. مانند نمونه زیر:

خوب تا این جای کار ایده‌ی کلی از اینکه CSS چگونه کار می‌کند و به طور کلی معنای CSS چیست گرفته‌اید و می‌توانید از ان در پروژه‌های خود استفاده کنید. در مطالب آتی وارد مباحث پیشرفته‌تری در همین موضوع خواهیم شد. روز خوبی داشته باشید. 🙂

امین ضیا

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

همچنین ممکن است دوست داشته باشید ...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *