جلسه ۰۱ – CSS چیست و پیش نیاز های آن

sina hub sina hub sina hub · 1400/06/21 08:09 · خواندن 5 دقیقه
جلسه ۰۱ – CSS چیست و پیش نیاز های آن

وقتی اسم طراحی وب سایت میاد، اولین صحبتی که میاد تو ذهن فرد عادی اینه HTML – CSS باید بلد باشی… خب این CSS که میگیم یعنی چی؟ چه کاری می‌تونیم باهاش انجام بدیم؟ به کمک CSS، چه کار‌هایی می‌تونیم در HTML انجام بدیم؟ در این مقاله در رابطه با این موضوعات صحبت می‌کنیم

 

 

معنی CSS

همونطور که در مقدمه خوندیم، کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست. حالا چرا آبشاری؟ چون دستورات CSS اعمال شده به هرعنصر، بر فرزندان اون عنصر هم تاثیر دارن. این مسئله رو تو مقاله‌های آینده، بیشتر متوجه می‌شیم!

چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟

می‌شه گفت که تنها پیش‌نیاز برای یادگیری مفاهیم CSS، تسلط مناسبی به HTML هست. مباحث زیر در بدو شروع، مهم‌ترین مباحث مورد نیاز شما برای یادگیری CSS هستن:

تسلط به مبحث فرزند – پدر (parent-child)تسلط به مفهوم عنصر و صفت (element, attribute)

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

اگر درباره HTML اطلاعاتی ندارین مقاله html چیست و چه کاربردی دارد رو بخونین

یک صفحه وب از اجزای زیر تشکیل شده:

Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.Behavior (رفتار) این بخش وب به وسیله  JavaScript ایجاد می‌شه. 

CSS چیست؟

کدهای CSS دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم. بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می‌کنین و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید!

برای مثال، اگه یک طوطی رو، به عنوان صفحه وب‌سایت در نظر بگیریم، کدهای HTML و CSS اون به فرم زیر تعریف می‌شن!

css vs html

چرا باید از کدهای CSS استفاده کنیم؟

کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.

خوبه که بدونین گوگل در رتبه بندی وب‌سایت‌ها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.

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

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

همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.

ساختار نحوی کدهای CSS

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

style

Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.


    برای رفتن به ادامه مطلب اینجا کلید کنید