css چیست؟

استفاده از css در طراحی سایت

در ابتدا باید بدانید که Css مخفف چیست؟  سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.

در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.

آشنایی با css

این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است. در واقع CSS یک زبان نشانه‌ گذاری است که اجازه می‌دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ‌بندی و فونت‌ها شکل دهید. این زبان در کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب می‌آیند.

عبارت CSS که در همه جای طراحی سایت کاربرد دارد، مختصر شده از عبارت سه کلمه‌ای Cascading Style Sheets به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است.

آبشاری بودن برگه‌های CSS به این معنی است که استایل، کلاس یا هر چیزی که به یک برگه CSS داده شود، روی عناصر فرزند (Children) این برگه‌ها هم تاثیرگذار خواهد بود.

کاربرد css در طراحی سایت

CSS ابزاری است که بوسیله‌ی آن میتوانید صفحات وب خود را زیبا و چشم نواز کنید.

و حالا با استفاده از CSS میتوانید ساختار سایت خودتان را زیبا کنید، به آن رنگ اضافه کنید، اندازه‌ی آن‌ها را مشخص کنید، روش نمایش آن‌ها را تنظیم کنید و… .

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

یا مثلا یک انسان را تصور کنید

در مثالی دیگر، میتوانیم یک انسان را مثال بزنیم تا بتوانیم بهتر به سوال CSS چیست پاسخ دهیم:

اگر شما بدن یک انسان را در نظر بگیرید:

• استخوان ها و اسکلت بندی بدن انسان را میشود به HTML تشبیه کرد
• و ظاهر، لباس، مو، چهره و… را میتوان به CSS تشبیه کرد.

نحوه استفاده از css نحوه نوشتن css داخلی یا Intrnal

این روش کمتر مورد استفاده قرار می­‌گیره، چرا که نیاز به فایل CSS جداگونه نیست و ما می‌­تونیم کدهای CSS رو داخل فایل HTML خودمون نگارش کنیم. در نتیجه فایل HTML به شدت شلوغ شده و کار کدنویسی رو برای ما به شدت دشوار می­‌کنه.

1 – مزیت‌های استفاده از روش اتصال داخلی اینه که لازم نیست مدام از یک فایل ، به یک فایل دیگه برای ویرایش کدهامون بریم.

2 – مشکلات کش را ندار د، این روش توسط تمامی مرورگر‌ها خوانده می‌شود و نگران مشکلات کش در صفحهات خود چه در مرورگر‌های جدید و چه قدیمی نخواهید بود.

3 – امکان معرفی شبه عناصر یا شبه ویژگی‌ها در این روش امکان پذیر است.

نحوه نوشتن css خطی یا inline

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

نحوه نوشتن css خارجی یا Extrnal

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.

با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد

با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید

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

بطور کلی در پروژه‌های واقعی از روش inline بسیار کم استفاده می‌شود. می‌توان گفت هرجا که فقط نیاز است یک یا دو ویژگی را تنها به یک تگ خاص نسبت دهیم می‌توانیم از این روش استفاده کنیم.

زمانی که بخواهیم استایلی را به دسته‌ای از عناصر نسبت دهیم (مثلا کل تگ‌های p موجود در صفحه) روش Internal و External بهترین روش است. به دلیل اینکه در روش Inline نمی‌توان بصورت گروهی به عناصر استایل خاصی را نسبت داد.

 

اما مزیتی که روش External نسبت به روش Internal دارد این است که فایل css که در روش External ایجاد می‌شود، در کش مرورگر ذخیره شده و در بازدید‌های بعدی، وبسایت با سرعت بالاتری بارگذاری می‌شود. اما در روش Internal این امکان وجود ندارد.

 

به همین دلیل روشی که در اکثر پروژه‌های طراحی وب استفاده می‌شود، روش External است.

 

منابع آموزشی css

با توجه به پیشرفت های حاصل در عرصه وب و همین طور تکنولوژی های مورد استفاده، زبان CSS نیز به مرور شاهد تغییراتی بود که با توجه به ارائه به روزرسانی ها و بهبودهای حاصل، هم اکنون با عنوان نسخه سوم CSS یا همان CSS3 شناخته می شود. زبان CSS3 نیز با توجه به بهبودها و همین طور بروزرسانی های انجام شده، توانسته تا به کاربر کمک کند تا بتوانند رابط کاربری وب سایت های خود را به زیبایی پیاده سازی کنند.

برخی از وبسایت هایی که آموزش رایگانcss:

https://www.youtube.com

https://www.w3schools.com