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

سلام و عرض ادب و احترام خدمت همه دوستان عزیز.

اگر شما به طراحی وب علاقه داشته باشید، احتمالا اسم Css را شنیده اید.

Css یک زبان برای استایل دهی به عناصر وب سایت است که از آن برای زیبا سازی وب سایت ها استفاده می شود.

در این مقاله قصد داریم Css را بررسی کرده و اطلاعات به شما بگوییم css چیست و چه کاربردی دارد

قبل از این که این مقاله را بخوانید باید یک دید کلی از زبان Html داشته باشید.

همان طور که می دانید HTML (Hyper Text Markup Language) یک زبان نشانه گذاری است که برای پیاده سازی اسکلت و ساختار کلی وب سایت استفاده می شود.

 

Css چیست؟

css چیست

CSS مخفف Cascading Style Sheets می باشد که اولین بار توسط Hakon Wium Lie در 10 اکتبر 1994 ارائه شد.

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

Css قدم دوم برای طراحی وب است و اگر بخواهید طراحی وب را یاد گرفته و در این حوزه فعالیت داشته باشید، بعد از Html باید Css را به خوبی یاد بگیرید.

 

اندکی در مورد ورژن های مختلف Css

قطعا هر زبان یا تکنولوژی که آپدیت می شود، قابلیت هایی از آن حذف شده و قابلیت های جدید و بهتری به آن اضافه می شود تا کاربران آن تکنولوژی امکانات بیشتری برای کار با آن داشته باشند.

ورژن Css 1:

ورژن اول Css به صورت رسمی در سال 1996 ارائه شد اما با توجه به ورژن های جدیدی که از Css ارائه شده است، امروزه استفاده ای از Css 1 نمی شود.

در این ورژن از Css امکانات خیلی مبتدی و کمی در اختیار طراحان وب قرار داده شد.

در ورژن 1 امکاناتی مثل رنگ بندی، حاشیه گذاری، تنظیم فونت و … ارائه شد و هیچ خبری از چند رسانه ای، انیمیشن و … نبود.

 

ورژن Css 2:

این ورژن از Css عزیز در سال 1998 ارائه شد و قابلیت های بهتر و بیشتری در اختیار طراحان وب قرار داد.

از ورژن 2 به بعد از چند رسانه ای پشتیبانی شد و طراحان وب می توانستند از عکس های External (از حافظه سیستم خود) در سایت استفاده کنند.

این ورژن از Css در دو نسخه ارائه شد که یکی Css 2.1 و دیگری Css 2.2 بود اما با ارائه آپدیت های بعدی، امروزه از این ورژن هم استفاده نمی شود.

 

ورژن Css 3:

بالاخره ورژن سوم Css در سال 1999 ارائه شد و به دلیل این که امکانات خیلی خوب و تقریبا کاملی به آن ارائه شده بود، توجه چشمگیری به آن شد.

 

ورژن Css 4:

آخرین ورژن Css ورژن 3 است که امروزه تمامی سایت ها برای استایل دهی از آن استفاده می کنند و هیچ نسخه ای از Css تحت عنوان Css 4 ارائه نشده است.

 

فرانت اند چیست؟

شما که تا اینجای مسیر را طی کردید قطعا کلمه فرانت اند (Front End) به گوشتان خورده است. کلمه Front در لغت به معنی “ظاهر، جلو، قسمتی که دیده می شود” است و به قسمتی از وب سایت گفته می شود که توسط کاربران به راحتی قابل مشاهده است.

شاید برایتان سوال باشد که مفهوم از “قابل مشاهده بودن” چیست؟ مگر می شود کاربر قسمتی از سایت رو مشاهده نکنه؟!

جواب مثبت است.

حوزه توسعه وب به دو قسمت فرانت اند و بک اند (Back End) تقسیم می شود.

فرانت اند به قسمتی از سایت گفته می شود که توسط کاربر قابل مشاهده باشد. به عنوان مثال سایت سبزلرن را در نظر بگیرید:

فرانت چیست

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

الان یک سر به صفحه Login سبزلرن می زنیم:

صفحه سوم

خب خب

اینجا قسمت لاگین سبزلرن است که از شما یک یوزرنیم و یک پسورد دریافت می کند و بعد از این که شما روی دکمه “وارد شوید” کلیک کردید، نتیجه لاگین را برای شما اعلام می کند.

شما ظاهر کار رو می بینید، پس تا این قسمت فرانت اند است؛

اما شما متوجه نمی شوید که بر چه اساس و با چه معیاری به شما اون نتیجه رو نمایش میده.

مثلا ممکن است به شما متن “همچین کاربری در سایت وجود ندارد” یا “شما با موفقیت لاگین شدید” را به عنوان نتیجه نمایش دهد.

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

این قسمت از وب سایت که شما قادر به مشاهده آن نیستید، از قسمت بک اند محسوب میشه.

 

آموزش رایگان مقدماتی css

 

Css برای طراحی سایت کافی است؟

همان طور که در پاراگراف قبلی توضیح داده شد، Css فقط برای استایل دهی به وب سایت استفاده می شود و سایتی که فقط با Html و Css ساخته شود هیچ گونه عملکرد، واکنش، ارتباط با سمت سرور و … نخواهد داشت.

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

اما نمی توانید با استفاده از Css برای سایتتان عملکرد بنویسید و برای اعمال مختلف کاربر واکنش های متناسب نشان دهید.

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

شاید الان برای شما سوال باشد که چطور باید برای یک وب سایت عملکرد تعریف کنیم.

 

کتابخانه های Css

ممکن است در مورد لایبرری (کتابخانه) های Css شنیده باشید.

قبل از این که در مورد لایبرری های Css صحبت کنیم باید با مفهوم لایبرری آشنا باشید.

در حوزه برنامه نویسی هر زبان مختلف لایبرری های مختلفی دارد.

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

Css عزیز لایبرری های مختلفی دارد. به عنوان مثال Animate Css، Aos، iHover و … که هر کدام کاربرد خودشان را دارند.

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

 

قدم بعدی چیست؟

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

بعد از این که بخش Html سایت را پیاده سازی کردید و با Css آن را استایل دهی کردید، باید وارد زبانی به اسم JavaScript بشید.

شما می توانید با استفاده از زبان جاوا اسکریپت عملکرد های مختلفی برای وب سایتتان تعریف کنید و به تمام اعمال کاربر واکنش های متناسب نشان دهید.

مثلا وقتی کاربر روی محصولی کلیک کرد، آن را به سبد خرید اضافه کنید.

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

پس تا اینجا متوجه شدید که بعد از یادگیری Css باید وارد جاوا اسکریپت شده و آن را یاد بگیرید.

عکس زیر را مشاهده کنید تا مفهوم و عملکرد این سه مورد را کامل متوجه شوید:

بازار کار css

اندکی در مورد بازار کار برای Css

شاید برایتان سوال باشد که آیا فقط با Html و Css می توان وارد بازار کار شد و کسب درآمد کرد یا نه.

جواب این سوال می تواند منفی یا مثبت باشد.

شما می توانید با همین Html و Css وارد بازار کار شده و کسب درآمد کنید، البته به شرطی که خوب مسلط باشید. مثلا می توانید در شرکت های مختلفی به عنوان Css کار استخدام شوید.

البته تعداد همچین شرکت ها بسیار کم هستند که فقط با Css شما را استخدام کنند اما به هر حال وجود دارند.

شما می توانید به صورت فریلنسری پروژه انجام بدید و همچنین می توانید قالب های مختلفی را طراحی کرده و در وب سایت های فروش قالب مثل سایت ژاکت و راستچین قرار داده و آن ها را به فروش برسانید و همچنین می توانید از طریق تدریس در زمینه Html و Css و … کسب درآمد داشته باشید.

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

شما بعد از Css باید گام های بعدی وب را نیز طی کنید تا بتوانید خودتان را در بازار کار نشان بدید و موقعیت های شغلی زیادی در اختیار داشته باشید.

شاید برایتان سوال باشد که Css جایگزین دیگری دارد یا نه.

مثلا Css یاد نگیریم و به جای آن یک زبان دیگر یاد بگیریم برای پیاده سازی ساختار سایت یاد بگیریم.

 

آموزش جامع css

 

آیا Css جایگزین دارید؟

جواب این سوال منفی است. تمام سایت های موجود در اینترنت برای استایل دهی از Css استفاده کرده اند و هیچ جایگزینی برای  Css وجود ندارد و بعد از یاد گیری Html، همین Css است که باید یاد بگیرید.

 

Css چیست و چطوری کار میکنه؟

شما با Css عناصر Html را انتخاب کرده و استایل های مورد نظرتان را به آن ها اعمال کنید.

مثلا فرض کنید در صفحه Html یک تگ p ایجاد کردید و میخواهید یک رنگ به آن نسبت دهید. باید به شکل زیر عمل کنید:

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

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

همان طور که می دانید فایل های ویدئویی می توانند فرمتی مثل Mp4, Avi و …، فایل های موزیک می توانند فرمتی مثل Mp3, ogg و … داشته باشند، فایل های Css نیز دارای فرمت Css هستند؛ به عنوان مثال style.css.

شاید برایتان سوال باشد که تمامی استایل صفحه های یک سایت فقط داخل یک فایل Css پیاده سازی می شوند؟

 

یکی برای همه؟ یا همه برای یکی؟

جواب این سوال به نحوه طراحی و وب سایت شما بستگی دارد.
اما در کل کار بهینه ای نیست که استایل های تمام صفحات سایت را در یک فایل Css بنویسیم.
شما فرض کنید مثلا صفحه اصلی سایتتان 200 خط و صفحه تماس با ما 100 خط کد Css دارد. آیا کار بهینه ای است که 200 خط کد صفحه اصلی در صفحه تماس با ما هم تکرار شوند؟ قطعا نه.
 

هر صفحه Css از مجموعه ای از سلکتور (انتخابگر) ها و ویژگی (Property) ها تشکیل شده است

شاید برایتان سوال باشد که سلکتور و پروپرتی در css چیست!

 

سلکتور (Selector) و پروپرتی (Property) چیست؟

هر فایل Css از چندین Selector، Property و Value ها تشکیل شده است و همین ها هستند که استایل های متناسب را به سایت شما اعمال می کنند.
برای هر نوع استایل از Property خاصی استفاده می شود. مثلا برای اعمال رنگ از color، برای اعمال طول و عرض از height و width و … استفاده می شود.

با عکس زیر بهتر متوجه می شوید:

همان طور که در عکس مشاهده می کنید، تمام تگ های p را انتخاب کرده و رنگ همه آن ها را به قرمز تغییر داده ایم.

پشتیبانی از css

 

آیا همه مرورگر ها از Css پشتیبانی می کنند؟

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

بعد ها در سال 2008 برای اولین بار مرورگر IE پشتیبانی از Css را آغاز کرد و امروزه خوشبختانه تقریبا همه مرورگر ها از Css پشتیبانی تقریبا کاملی دارند.

علاوه بر این صحبت ها وب سایتی تحت عنوان CanIUse.com وجود دارد که شما می توانید در این وب سایت مشاهده کنید که کدام یک از Property های Css در کدام مرورگر ها پشتیبانی می شوند.

 

روش های استفاده از Css

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

گفتیم Css برای استایل دهی به المنت های Html و زیبا سازی وب سایت مورد استفاده قرار می گیرد.

برای استفاده از Css سه روش Inline (خطی)، Internal (داخلی) و External (خارجی) وجود دارنسد که در ادامه به این 3 روش می پردازیم.

روش Inline:

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

 

<h1 style=”color: red;”>SabzLearn.ir</h1>

 

همان طور که در کد بالا مشاهده می کنید داخل خود تگ h1 توسط اتربیوت style استایل مورد نظرمان را برای این تگ اعمال کردیم. به این روش استفاده از Css روش Inline گفته می شود.

 

روش Internal:

در این روش تمام استایل های هر صفحه را در همان صفحه می نویسیم اما نه داخل هر تگ.

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

برای درک بهتر به کد زیر دقت کنید:

 

    <style>

        h1 {

            color: red;

        }

    </style>

</head>

<body>

    <h1 style="color: red;">SabzLearn.ir</h1>

</body>

 

 

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

 

روش External:

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

به کد زیر دقت کنید:

 

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

    <title>Document</title>

</head>

<body>

    <h1 style="color: red;">SabzLearn.ir</h1>


</body>

 

 

همان طور که مشاهده می کنید داخل صفحه Html هیچ خبری از کد Css نیست. یک صفحه Css تحت عنوان style.css ایجاد کرده و داخل آن استایل های لازم را نوشته و به کمک تگ link به صفحه Html لینک کردیم. به این ترتیب استایل های موجود در صفحه style.css به المنت های همین صفحه Html نسبت داده می شوند.

حالا یک سر به محتوای فایل style.css بزنیم:

h1 {

    color: red;

}

 

 

همان طور که مشاهده می کنید، کافی است استایل های مد نظرتان را بدون در فایل style.css بنویسید تا به المنت های Html وب سایتتان اعمال شوند.

 

 

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

زیبا سازی صفحات وب:

شما با استفاده از Css میتوانید به صفحات Html وب سایتتان استایل های مورد نظر خودتان را اعمال کنید.

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

 

صرفه جویی در زمان:

Css باعث صرفه جویی در در زمان شما می شود. می توانید یک بار یک کد CSS را بنویسید و سپس از همان کد برای استایل دهی چندین المنت Html استفاده کنید و حتی می توانید از همان کد در چندین صفحه HTML استفاده مجدد کنید.

 

صفحات سریعتر بارگیری می شوند:

به هنگام استفاده از Css هیچ نیازی نیست که برای هر المنت Html در همان صفحه Html استایل اعمال کنید. شما می توانید صفحه Css خود را که شامل کد های Css و استایل های لازم برای وب سایتتان است، به صفحه Html خود لینک کنید.

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

به همان طور که بالاتر گفته شد، به این روش External (خارجی) گفته می شود.

زمانی که شما به روش External از Css استفاده می کنید، موقع وارد شدن کاربر به سایت شما تمام استایل های سایت شما برای کاربر دانلود شده و در مرورگر کاربر ذخیره می شود.

به این ترتیب دفعات بعدی که کاربر وارد سایت شما می شود، نیازی به دانلود دوباره فایل Css نیست و استایل های شما از مرورگر کاربر لود می شوند.

این امر در سرعت لود وب سایت شما تاثیر بسزایی دارد.

 

حجم کد ها:

زمانی که از Css استفاده می کنید، نیازی نیست هر عنصر از Html را جداگانه انتخاب و استایل دهی کنید. می توانید عناصر را به صورت دسته جمعی انتخاب کرده و استایل های دلخواهتان را اعمال کنید.

ریسپانسیو سازی صفحات وب:

برای درک این قسمت از کاربرد های Css ابتدا باید مفهوم کلمه “ریسپانسیو” را بلد باشید.

اگر شما سایتی را که در لپتاپ خود طراحی کرده اید در یک گوشی یا تبلت که نمایشگر کوچک تری نسبت به لپتاپ شما دارد اجرا کنید، استایل های سایتتان به هم ریخته و سایتتان ظاهر زشتی به خود می گیرد.

اما اگر سایت شما ریسپانسیو باشد، در تمامی دیوایس هایی مثل لپتاپ، گوشی، تبلت و … ظاهر خود را حفظ می کند و به هم نمی ریزد. پس به وب سایتی که تقریبا در تمامی دیوایس های کاربران ظاهر خود را حفظ کرده و خراب نشود، ریسپانسیو گفته می شود.

امروزه کاربران با دیوایس های مختلفی وارد وب سایت ها می شوند و اگر سایت شما ریسپانسیو نباشد، تعداد بسیار زیادی از کاربرانتان را از دست خواهید داد.
شما می توانید به کمک Css وب سایت هایتان را ریسپانسیو کنین تا تمامی کاربران با هر دیوایسی بتوانند از سایت شما استفاده کنند.

 

سخن پایانی

در این مقاله سعی کردم یک دید کلی در مورد زبان Css به شما ارائه دهم و به پاسخ برای سوال css چیست بپردازم

یکی از مشکلاتی که بسیاری از طراحان وب با ان دست و پنجه نرم می کنند و آن را تجربه کردند این است که بدون مسلط شدن بر Css وارد جاوا اسکریپت می شوند.

خیلی از دوستانی که به تازگی وارد این حوزه شده اند Css را سهل می گیرند و توجه چندانی به آن نمی کنند و همین که چند Property از آن گرفتند و هیچ پروژه ای با Css پیاده سازی نکردند، وارد جاوا اسکریپت می شوند که این یکی از عوامل شکست در برنامه نویسی وب است.

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

اگر سوال، انتقاد یا پیشنهادی داشتید، حتما در قسمت کامنت های مقاله برامون بنویسید.
تا مقاله بعدی خدانگهدار.

محمدامین سعیدی راد

دیدگاهتان را بنویسید