آموزش CSSآموزش طراحی سایت

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

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

معنی CSS

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

CSS چیست؟

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

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

یا مثلا به متن ساده زیر توجه کنین:

متن سمت چپ، با کمک کدهای CSS نوشته شده. اما در متن سمت راست، کدهای HTML بدون کد CSS رو مشاهده می‌کنیم.

چرا CSS؟

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

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

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

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

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

پیش‌نیازهای CSS

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

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

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

امیدواریم که تا اینجا تونسته باشیم مفهوم مناسب و اولیه­‌ای از CSS رو شرح داده باشیم.

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

مدیر محتوا: علی اسمعیلی

برچسب ها

پاسخی بگذارید

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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر