CSS یکی از سه هسته اصلی طراحی وب سایت است که برای حل مشکلات موجود در زبان HTML به وجود آمد. اگر HTML را اسکلت وب‌سایت در نظر بگیریم، CSS زیباسازی ظاهری وب‌سایت را انجام می‌دهد. در این مقاله قصد داریم به تفصیل به مباحث مربوط به زبان برنامه‌نویسی CSS بپردازیم.
CSS چیست؟
CSS Cascade Style Sheets)) به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. علت این نام‌گذاری این است که اعمال هر تغییر روی قسمتی از صفحات CSS، این تغییر روی سایر بخش‌‌های صفحه نیز اعمال می‌شود.
CSS یک زبان نشانه گذاریاست که برای ایجاد زیبایی‌‌های ظاهری و بهتر شدن طراحی وب سایت استفاده می‌شود. تمام چیزی که به ظاهر متن و محتوای ایجاد شده با HTML مربوط است مانند رنگ، اندازه، محل قرارگیری و سایر ویژگی‌‌ها به CSS ارتباط دارد. قبلا در مقاله HTML چیست و چه کاربردی دارد به طور کامل در مورد HTML توضیح داده ایم. در واقع CSS مرحله بعد از HTML را تشکیل می‌دهد.
مشاهده و ثبت نام دوره های طراحی سایت
مروری بر تاریخچه CSS
در سال 1994 شرکت‌‌ها و افراد مختلف به معرفی زبان‌‌های برنامه‌نویسی گوناگونی پرداختند که به استایل وب سایت مربوط می‌شد. در همین سال Hakon Wium Lie به همراه تیم برنرز لی زبان برنامه‌نویسی CSS را معرفی کرد. در نهایت از بین تمام این زبان‌‌ها در سال 1996 به صورت رسمی‌زبان برنامه‌نویسی CSS به عنوان زبان برتر در این زمینه معرفی شد.
اجرای کدهای CSS
نوشتن کد با زبان برنامه‌نویسی CSS نیاز به نرم افزار خاصی ندارد و می‌توانید با یک نوت پد کدنویسی کنید و با انواع مرورگرها از جمله فایرفاکس، کروم و ... کدهای نوشته شده را اجرا کنید.
CSS یک زبان برنامه‌نویسی نیست!
شاید به اصطلاح عام CSS را بتوانیم یک زبان برنامه‌نویسی بدانیم اما با جلو رفتن و حرفه ای‌تر شدن در می‌یابید که نباید CSS را در زمره زبان‌‌های برنامه‌نویسی قرار داد. یک زبان برنامه‌نویسی شامل متغیر‌‌ها، توابع، شرط‌‌ها، حلقه‌‌ها و… است اما چنین چیزهایی در CSS دیده نمی‌شود. در واقع CSS یک ابزار برای تکمیل کردن زبان‌‌های برنامه‌نویسی است که بر پایه XTML می‌باشند، که معروف‌ترین و کاربردی‌ترین آن HTML است.
ساختار کدهای CSS
همان‌طور که گفته شد، کدنویسی با CSS به منظور ایجاد تغییرات بر روی ظاهر خروجی‌‌های کدهای نوشته شده با HTML است. بنابراین باید این دو را با یکدیگر‌ترکیب کنیم تا بتوانیم تغییرات را اعمال کنیم.
به دو صورت می‌توان این‌ترکیب را انجام داد. روش اول به صورت inline است که با این روش استایل مورد نظر را تنها به تگ مورد نظر خود در HTML اعمال می‌کنید. برای مثال در کد زیر رنگ قرمز را تنها برای جمله « این عنوان قرمز است» انتخاب کرده ایم.
این عنوان قرمز است
روش دوم، ترکیب کردن CSS و HTML، روش internal CSS نام دارد. در این حالت استایل یا تغییرات مورد نظر بر روی یک صفحه از HTML اعمال می‌شود. کد زیر نمونه ای از این روش است.
کافی است کدهای بالا را در یک نوت‌پد کپی کنید، هنگام ذخیره سازی Encoding را به UTF-8 تغییر داده و فایل را با پسوند .HTML ذخیره کنید. و با مرورگر باز کنید. برای سایر مثال‌‌ها نیز همین کار را انجام دهید.
روش سوم روش External است. این روش استایل مورد نظر شما را بر روی چند صفحه HTML یا کل وب سایت اعمال می‌کند. فایل CSS که در این روش به صورت جداگانه ذخیره می‌شود پسوند .CSS دارد. اگر بخواهید یک صفحه از HTML را به وسیله فایل CSS زیباسازی کنید باید در HTML Head سایت خود با استفاده از تگ این کار را انجام بدهید. به بیان بهتر در این روش استایل‌ها در یک فایل CSS جداگانه نوشته شده، در اینترنت آپلود کرده و لینک آن در header صفحه قرار داده می‌شود. این روش بهترین روش برای ارتباط بین CSS و HTML است.
نمونه ای از کد CSS که می‌توانید با پسوند .CSS در ویرایشگر متن خود ذخیره کنید .
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
برای توضیحات بیشتر می توانید اینجا را ببینید.
جمع بندی
همان‌طور که گفته شد ابزار اجرای CSS مرورگرها هستند. امروزه اکثر مرورگرها قابلیت خواندن و اجرای کدهای CSS را دارند. بهتر است پیش از یادگیری CSS ابتدا زبان برنامه‌نویسی HTML را بیاموزید. این دو بدون یکدیگر کاربرد چندانی ندارند و بهتر است برای طراحی سایت هر دو را بیاموزید. با استفاده از CSS و HTML به یک سایت استاتیک می‌رسید بهتر است بعد از آن زبان برنامه‌نویسی جاوااسکریپت را یاد بگیرید تا سایت را به یک سایت پویا تبدیل کنید. برای اطلاعات بیشتر پیرامون جاوااسکریپت می‌توانید به مقاله جاوااسکریپت چیست و چه کاربردی دارد مراجعه کنید.
منابع:
نظر دهید
با استفاده از فرم نظردهی زیر به بهبود خدمات کمک کنید.