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

css چیست؟

css مخفف Cascading Style Sheets یک زبان طراحی سایت است. از این زبان کد نویسی که مانند برادر کوچکتر html می باشد ، برای استایل دهی ، رنگ آمیزی و طراحی سایت استفاده می شود.

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

کاربرد css

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

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

اتصال فایل html به css

برای جداسازی فایل مد های استایل و کد های اصلی سایت کافیست دو فایل جدا ایجاد کنید. یک فایل با پسوند .html برای کد های اصلی وب سایت و دیگری با پسوند .css برای کد های سی اس اس وب سایت. سپس با قرار دادن قطعه کد زیر در تگ head فایل html می توانیم آنرا به فایل .css متصل کنیم :

<link rel="stylesheet" href="styles.css">

استفاده از css درون خطی

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

برای استفاده از css درون خطی کافیست در فایل html و در بدنه تگ ها کد های css خودرا بنویسیم. برای این کار از مقدار style استفاده می کنیم و در این مقدار کد های css را قرار می دهیم. برای درک بهتر سی اس اس درون خطی به مثال زیر توجه کنید:

انواع css

شما می توانید به 3 روش با استفاده از کد های css وب سایت خودرا طراحی کنید. این سه روش هرسه به یک شکل عمل می کنند و در نتیجه و کد نویسی آنها فرقی وجود ندارد.

انواع روش های استفاده از css

1. Inline – استایل درون خطی
2. External – در فایل جدا
3. Internal – کد نویسی با تگ style

استفاده از css در فایل جدا

استفاده از این روش بسیار کاربردی است. برنامه نویسان حرفه ای سطح جهان اکثرا از این روش استفاده می کنند. زیرا این روش باعث کاهش حجم کد ها می شود. همانطور که بالاتر خواندید با استفاده از یک خط کد دو فایل html و css را به هم متصل می کنیم. حالا کافیست استایل های مد نظر را در فایل .css پروژه خود بنویسیم تا اجرا شود.

See the Pen
external css by pishkarweb (@pishkarweb)
on CodePen.

استفاده از تگ style

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

See the Pen
Untitled by pishkarweb (@pishkarweb)
on CodePen.

مفهوم class در css

کلاس یا class در زبان برنامه نویسی css برای انتخاب کردن چند تگ و استایل کردن یک شکل تمامی آنها است. کلاس مانند شناسه ( فامیلی ) می باشد. شما به تگ خود کلاس دلخواه می دهید و با استفاده از آن کلاس در فایل .css که مخصوص استایل است آنرا طراحی می کنید. شما هیچ محدودیتی از نظر تعداد دفعات استفاده شدن کلاس ها ندارید.

See the Pen
Untitled by pishkarweb (@pishkarweb)
on CodePen.

مفهوم آیدی (id) در css

آیدی همان کلاس است اما به عنوان شناسه دوم استفاده می شود. برای مثال شما به 5 تا پاراگراف کلاس یک سان می دهید ؛ به یکی از پاراگراف ها که می خواهید مانند سایرین باشد با یک فرق کوچک یک آیدی (ID) می دهید. با اینکار هردو استایل ها روی آن پاراگراف پیاده می شوند.

See the Pencss id by pishkarweb (@pishkarweb)
on CodePen.

جمع بندی

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