همه چیز درباره زبان برنامه نویسی css و ترفندهای آن

همه چیز درباره زبان برنامه نویسی css و ترفندهای آن

آشنایی با CSS و ترفندهای آن

قبل اینکه بخواهیم Css رو تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم ، یه صفحه وب شامل متن ، صوت ، تصویر و … هست.

برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم ، با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.

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

تعریف و مفهوم CSS

Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد.

شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.

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

همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم

مزایای استفاده از CSS

طراحی ظاهر صفحات بدون استفاده از دستورات HTML

جلوگیری از تکرار دستورات

سرعت بارگذاری بیشتر برای صفحات

استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که مایل هستیم

دلیل استفاده و کاربرد CSS

در اینجا با اشاره به یک موضوع کلی ، دلیل استفاده از CSS همه چیز درباره زبان برنامه نویسی css و ترفندهای آن  را بیان می کنیم :

همانطور که می دانید صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غیره تشکیل شده اند .

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

فرض کنید که ما در صفحات یک وب سایت ، یکسری عنوان ها ، پارگراف ها و جداول داریم که این عناصر در بیشتر صفحات تکرار شده و دارای ویژگی های یکسانی هستند.

به طور مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :

۱- در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :

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

۲- ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم.

سپس در یک فایل Style بیرونی و یا در تگ Style در بخش Head صفحه ، خواص و ویژگی های مشترک را در یکجا برای همه آن گروه ها تعریف کرده و سپس هر یک از عناصر را به گروه مورد نظر ارتباط می دهیم

انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :

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

همه چیز درباره زبان برنامه نویسی css و ترفندهای آن

۱- کد های CSS خود را سازماندهی کنید

در هر جنبه‌ای از زندگی، سازماندهی به امور بسیار کمک کننده است و می‌تواند به کاهش استرس و رسیدگی ساده‌تر به کارها کمک کند. در مورد کدهای CSS هم دقیقا همینطور است.

در اولین مورد از ترفندهای CSS به سازماندهی کدها باید بپردازیم، به جای نوشتن کدها به ترتیبی که به ذهنتان می‌رسد، بهتر است کدها را در آرایشی سازماندهی شده بنویسید.

ابتدا مواردی که اهمیت کمتری دارند را نوشته و سپس به ترتیب به موارد مهم‌تر بپردازید. این کار باعث ایجاد یک ساختار منطقی می‌شود که کار ویرایش CSS را بسیار ساده‌تر می‌سازد.

استفاده از یک آرایش و ساختار ساده نه تنها برای ویرایش‌های بعدی مفید است، بلکه به برنامه نویسانی که بعدا با کد شما سر و کار خواهند داشت هم کار را ساده‌تر می‌سازد

۲- از inline CSS اجتناب کنید

این مورد یکی از مهترین ترفندهای CSS است که نقش مهمی در امتیازدهی سئو دارد. گرچه inline css هم کاربردهای خودش را دارد اما بنا به دلایلی باید از استفاده زیاد از آن اجتناب کرد.

یکی از مهم‌ترین دلایل این است که استایل‌های inline، محتوا را از طرح جدا نمی‌کنند. این ویژگی می‌تواند کار برنامه نویسی و طراحی را با دشواری‌هایی رو به‌ رو کند.

دلیل دیگر این است که نگهداری از این استایل بسیار دشوار است. در نهایت، این که inline css به راحتی قابل دسترسی نبوده و صفحات وب سایت را سنگین می‌کند.

۳- محتوا را از طراحی جدا کنید

یکی از مهم‌ترین دلایل برای استفاده از CSS جدا سازی کدهای طراحی از HTML و نگهداری آن‌ها در مکانی دیگر است تا طراح به راحتی بتواند به آن‌ها دسترسی پیدا کند. این ایده بسیار مفید است چون طراح یک وب سایت لزوما نباید برنامه نویس محتوا هم باشد.

۴- تاریخ زدن، انتخاب عنوان و امضا در CSS

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

همچنین، یک ترفند خوب دیگر افزودن کد HTML برای رنگ‌های نمونه در بالای کدها است.

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

۵- یک کتابخانه از قالب های CSS داشته باشید

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

در انتها با چندین مورد از بهترین ترفندهای CSS آشنا شدید، امیدواریم در آموزش های بعدی شما را با مفاهیم کاربردی CSS بیشتر آشنا کنیم.