آشنایی با CSS

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

CSS چیست؟

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

این آموزش CSS توضیح می دهد که CSS زبانی برای کنترل طرح بندی عناصر HTML و شکل ظاهری آن هاست. با این حال ، تغییر رنگ ، عرض و ارتفاع و فاصله بین عناصر تنها چند نمونه از موارد استفاده CSS است. همچنین برای ساختن وب سایت های پاسخگو و سازگار با موبایل کاربرد دارد. CSS به شما امکان می‌دهد تا ظاهر صفحات وب خود را به طور کامل تغییر دهید. از جمله:

• کنترل چیدمان: می‌توانید عناصر صفحه را در کنار هم قرار دهید، حاشیه‌ها و فاصله‌ها را تنظیم کنید و به طور کلی چیدمان صفحه را به دلخواه خود تغییر دهید.
• کنترل رنگ: می‌توانید رنگ متن، پس‌زمینه، عناوین و سایر عناصر را تغییر دهید.
• کنترل فونت: می‌توانید نوع فونت، اندازه فونت، ضخامت فونت و سایر ویژگی‌های فونت را تغییر دهید.
• اضافه کردن جلوه‌های بصری: می‌توانید سایه، انیمیشن و سایر جلوه‌های بصری را به عناصر صفحه اضافه کنید.

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

• زیبا سازی صفحات وب: CSS به شما امکان می‌دهد صفحات وب خود را به طور کامل زیبا سازی کنید و به آنها ظاهری حرفه‌ای و جذاب ببخشید.
• بهبود تجربه کاربری: صفحات وب با طراحی زیبا و کاربرپسند، تجربه کاربری بهتری را برای کاربران فراهم می‌کنند.
• کاهش زمان بارگذاری: استفاده از CSS می‌تواند به کاهش زمان بارگذاری صفحات وب کمک کند.
• سازگاری با دستگاه‌های مختلف: صفحات وب طراحی شده با CSS به طور خودکار با دستگاه‌های مختلف مانند رایانه، لپ‌تاپ، تبلت و تلفن همراه سازگار می‌شوند.

نسخه‌های CSS

• CSS 1: CSS 1 اولین نسخه از Cascading Style Sheets است که در سال 1996 توسط W3C (کنسرسیوم بین‌المللی شبکه جهانی وب) منتشر شد. این نسخه پایه و اساس استایل‌دهی به صفحات وب را بنا نهاد و انقلابی در طراحی وب ایجاد کرد. با وجود اینکه CSS 1 نسخه‌های جدیدتر و پیشرفته‌تری مانند CSS 2 و CSS 3 دارد، اما هنوز هم پایه و اساس استایل‌دهی به صفحات وب را تشکیل می‌دهد. بسیاری از ویژگی‌های CSS 1 در نسخه‌های جدیدتر نیز حفظ شده‌اند.
• CSS 2: CSS 2 دومین نسخه از Cascading Style Sheets است که در سال 1998 توسط W3C (کنسرسیوم بین‌المللی شبکه جهانی وب) منتشر شد. این نسخه قابلیت‌های جدیدی را به CSS 1 اضافه کرد و انعطاف‌پذیری و قدرت طراحان وب را افزایش داد.
• CSS 3: این نسخه در سال 1999 منتشر شد و تحول بزرگی در CSS محسوب می‌شود. CSS 3 دارای ساختاری ماژول‌بندی شده است و امکانات جدیدی مانند انیمیشن، سایه و گرادیان را به CSS اضافه کرد.

همچنین می‌توانید css3 چیست؟ را مطالعه کنید و اطلاعات کامل‌تری را درباره آن به دست بیاورید.

تفاوت های اصلی CSS در مقابل HTML:

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

HTML یک زبان برای ایجاد محتوایی مانند پاراگراف ها ، تصاویر ، جداول ، لیست ها و غیره است. در حالی که HTML جز اصلی یک وب سایت است ، زبان CSS استایل دهی می‌کند.

زبان CSS پس زمینه ها ، padding ها ، رنگ ها و بسیاری از خصوصیات دیگر را برای عناصر HTML تنظیم می کند. می‌توانید از CSS برای ایجاد انیمیشن و سایر ویژگی‌های جالب توجه مانند گالری تصاویر استفاده کنید.

به یاد داشته باشید ساده ترین روش توضیح CSS در مقابل HTML بیان این است که آنها مکمل یکدیگر هستند. HTML محتوای وب سایت را ایجاد می کند و CSS آن را زیباتر و استایل دهی می‌کند.

نحوه استفاده از CSS

ابتدا باید کد HTML خود را بنویسید و ساختار صفحات وب خود را تعریف کنید. سپس باید یک فایل CSS با پسوند .css ایجاد کنید. در داخل فایل CSS، باید selector های خود را بنویسید. selector ها برای انتخاب عناصر HTML مورد نظر شما برای استایل‌دهی استفاده می‌شوند. بعد از انتخاب عناصر HTML، باید ویژگی‌های CSS مورد نظر خود را بنویسید. هر ویژگی CSS یک نام و یک مقدار دارد. در نهایت، باید فایل CSS خود را به HTML خود پیوند دهید. این کار را می‌توانید با استفاده از تگ <link> در HTML خود انجام دهید.

<html>
<head> 
    <title>عنوان صفحه</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <h1>عنوان صفحه</h1> 
    <p>این یک پاراگراف است</p> 
</body> 
</html>

استایل دهی در css :

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

h1{ 
    color: red; font-size: 24px; 
} 
p{ 
    color: blue; font-size: 16px; 
}