css چیست
03
ژانویه

css چیست و چه کاربردهایی دارد ؟

اگر یک طراح وب سایت هستید و یا به تازگی وارد این حرفه شده اید قطعا زیاد با css سروکار داشته اید . یا اگر علاقه مند برنامه نویسی هستید قطعا این سوال در ذهن شما ایجاد شده است که css چیست ؟

زبان css در واقع در کنار html معنی و مفهوم پیدا می کند و دیده می شود به این معنا که اگر شما کد html در سایت خود نداشته باشید کد نویسی css به هیچ عنوان مفید فایده نخواهد بود و تاثیری روی سایت شما ایجاد نخواهد کرد .

مفهوم css چیست

css به چه معناست ؟

css که مخفف عبارت Cascading Style Sheets است یعنی برگه های آبشاری این مفهوم را منتقل می کند که هر چیز در لایه ی بالاتر به لایه ی پایین تر خود تاثیرگذار است . مثلا اگر در لایه ی بالا یک تگ div شما رنگ نوشته ها را قرمز رنگ کنید قطعا لایه های پایین تر مانند تگ های p که در زیر لایه ی آن داشته باشد رنگ متن ها قرمز خواهد بود .

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

چرا باید از کد های css در طراحی سایت استفاده کنیم ؟

برای پاسخ به این سوال اجازه دهید با یک مثال به شما پاسخ دهیم به دو تصویر زیر نگاه کنید

تفاوت html و css چیست

در تصویر سمت چپ فقط استخوان بندی را می بیند که هیچ زیبایی ندارد و صرفا در علوم پزشکی استفاده می شود و می توان این تصویر را به html تشبیه کرد شما در کد های html فقط اسکلت سایت خود را می سازید .

برای آشنایی بیشتر با html مقاله html چیست را مطالعه کنید .

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

css چگونه کار می کند ؟

تا اینجا متوجه شدیم که کدهای css دقیقا چگونه عمل می کنند و چه کاربردی دارند ، حالا می خواهیم با یک مثال توضیحی راجب ساختار کدهای css داشته باشیم تا با ساختار این کد ها نیز آشنا شوید .

کدهای css

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

عملکرد کدهای css چیست ؟

همانطور که گفتیم کدهای css بدون تگ های html کاربردی ندارند و تغییراتی را روی سایت اعمال نمی کنند . شما وقتی یه قطعه کد html را می نویسید حالا می توانید این تگ را با استایل های css جذاب و زیباتر کنید .

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

اگر علاقه مند یادگیری کد نویسی css هستید حتما به سایت w3school سر بزنید و دوره های آموزشی این سایت را فرابگیرید .

روش های مختلف کد نویسی css چیست ؟

به 3 روش مختلف می توان از استایل های css در برنامه نویسی سایت استفاده کرد :

  • استفاده به روش inline
  • استفاده به روش html header
  • کد نویسی در فایل با فرمت css

کد نویسی css به روش inline :

در این روش شما کدهای css را به صورت درون خط و در تگ های html می نویسید و به هر تگ استایل دلخواهد خود را می دهید . نمونه ای از کد نویسی css درون خطی را در تصویر زیر می توانید مشاهده کنید .

css درون خط

با دقت به تصویر بالا مشاهده می کنید داخل تگ p با نوشتن style موقعیت متن را به صورت راست نویس تنظیم کرده ایم و کد css درون خطی خود را لحاظ کرده ایم .

کد نویسی css به روش html header :

در این روش شما کدهای css خود را در تگ style قرار می دهید و استایل دهی دلخواهد خود را به تگ های html موجود در این صفحه انجام می دهید . نمونه ای از این روش کد نویسی css را در تصویر زیر میتوانید مشاهده کنید .

کدنویسی html header

کد نویسی در فایل با فرمت css :

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

مهم ترین بخش آموزش این مقاله

اصول کد نویسی css چیست ؟

برای پاسخ به این سوال بهتر است از افراد باتجربه کمک گرفت . برنامه نویسان و طراحان سایت در اولین قدم فایلی با نام style.css ایجاد می کنند و تمام کدهای css خود را درون این فایل قرار می دهند . و صفحات html را که قالب بندی کرده اند و تگ های مورد نظر خود را کلاس بندی کرده اند را ایجاد می کنند و پوشه style.css را در این صفحات لود می کنند و قالب کلی سایت خود و همچنین بخش های ظاهری سایت رو ایجاد می کنند .

پس از این که قالب کلی سایت به لحاظ ظاهری تکمیل شد حالا ممکن است بخواهید بعضی صفحات ساختار متفاوتی داشته باشند برای این مورد بهتر است از کد نویسی css به روش html header که کدهای css خود را در صفحه دلخواهد خود می نویسید استفاده کنید .

استاتیک و دینامیک بودن سایت

وقتی سایتی با کدهای html و css نوشته می شود صرفا یک سایت استاتیک طراحی شده است . اما چرا می گوییم استاتیک ؟ سایتهایی که فقط یکسری اطلاعات به کاربر نمایش می دهند تعاملی با کاربر ندارند صرفا یک سایت استاتیک در نظر گرفته می شوند .

سایتهایی که با کابر در تعامل هستند مثلا فرمی دارند که باید از سمت کاربر تکمیل شود یا سایتهایی که به شما پنل کاربری ارائه می کنند این سایتها دینامیک هستند . برای اینکه سایتی دینامیک داشته باشیم لازم است از زبان های سمت سرور استفاده کنیم مانند زبان php . اگر تمایل دارید با زبان php آشنا شوید به لینک php چیست ؟ مراجعه کنید .