آموزش کدنویسی CSS – راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل

آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (4)

فهرست مطالب

حالا که با HTML آشنا شدیم و یاد گرفتیم چطور ساختار یک صفحه وب را تعریف کنیم، نوبت به طراحی ظاهری و زیبایی آن می‌رسد. CSS یا Cascading Style Sheets، زبانی است که به ما کمک می‌کند تا ظاهر عناصر HTML را کنترل و سفارشی‌سازی کنیم. با استفاده از CSS، می‌توانیم رنگ‌ها، فونت‌ها، اندازه‌ها، چیدمان و بسیاری از ویژگی‌های ظاهری دیگر را به عناصر HTML اضافه کنیم.

آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (1)

CSS چیست و چرا باید آن را یاد بگیریم؟

CSS یک زبان سبک‌بندی است که به شما اجازه می‌دهد تا ظاهر صفحات وب را کنترل کنید. با CSS، شما می‌توانید:

  • طراحی صفحات وب جذاب: با استفاده از CSS می‌توانید طرح‌های خلاقانه و زیبایی برای صفحات وب خود ایجاد کنید.
  • سازگاری با دستگاه‌های مختلف: CSS به شما کمک می‌کند تا وب‌سایت شما در دستگاه‌های مختلف مانند دسکتاپ، موبایل و تبلت به خوبی نمایش داده شود.
  • بهبود سرعت بارگذاری: با استفاده صحیح از CSS، می‌توانید سرعت بارگذاری صفحات وب خود را بهبود بخشید.
  • کاهش حجم کد: CSS به شما اجازه می‌دهد تا سبک‌های مشترک را در یک مکان تعریف کنید و از تکرار کد جلوگیری کنید.
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (2)

چگونه CSS را به HTML اضافه کنیم؟

سه روش اصلی برای اضافه کردن CSS به یک صفحه HTML وجود دارد:

  1. Inline CSS: در داخل تگ‌های HTML
  2. Internal CSS: در بخش <head> صفحه HTML
  3. External CSS: در یک فایل جداگانه با پسوند .css
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (3)

ساختار یک قانون CSS

یک قانون CSS از سه بخش تشکیل شده است:

  1. Selector: عنصری که می‌خواهیم سبک‌بندی کنیم (مثلاً h1, p, div).
  2. Property: ویژگی‌ای که می‌خواهیم تغییر دهیم (مثلاً color, font-size, background-color).
  3. Value: مقداری که به ویژگی اختصاص می‌دهیم (مثلاً red, 16px, #f0f0f0).
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (5)

مثال:

CSS

h1 {
  color: blue;
  text-align: center;
}

در این مثال، همه عناوین سطح یک (h1) به رنگ آبی و در وسط صفحه نمایش داده می‌شوند.

مفاهیم مهم در CSS

  • Selectorها: برای انتخاب عناصر HTML
  • Properties: برای تغییر ظاهر عناصر
  • Values: برای تعیین مقدار ویژگی‌ها
  • Comments: برای توضیح کد
  • Box Model: برای درک نحوه چیدمان عناصر در صفحه
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (6)

طراحی یک بخش هدر ساده با CSS

/* تنظیمات کلی */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* سبک‌بندی هدر */
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* سبک‌بندی لوگو */
.logo {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

/* سبک‌بندی منو */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #fff;   
}

/* سبک‌بندی بخش اصلی محتوا */
main {
  padding: 20px;
}
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (7)

توضیح کد CSS:

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

جمع‌بندی

CSS یک ابزار قدرتمند برای طراحی صفحات وب است. با یادگیری CSS، می‌توانید صفحات وب زیبا و تعاملی ایجاد کنید. برای یادگیری بیشتر، می‌توانید به منابع آموزشی آنلاین مانند W3Schools، MDN Web Docs و freeCodeCamp مراجعه کنید.

آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (10)
آموزش کدنویسی CSS - راهنمای رایگان آموزش سی اس اس آسان و در زمان کم + جزوه کامل (9)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *