آموزش‌های ابتدایی CSS

آگاهی‌های ضروری

قبل از ادامه، شما باید از اطلاعات زیر آگاه باشید:

  • HTML
  • XHTML

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

مطالعه شبکه‌های استایل
  • CSS به معنای شبکه‌های استایل (Cascading Style Sheets)
  • تعریف استایلچگونه نمایش داده شوند عناصر HTML
  • استایل‌ها معمولاً درشبکه‌های استایلدر
  • استایل‌ها را به HTML 4.0 اضافه کردند تامشکل جدا کردن محتوا از نمایش را حل کنند
  • استایل‌های خارجیمی‌توانند به طور قابل توجهی بهره‌وری را افزایش دهند
  • استایل‌های خارجی معمولاً در فایل‌های CSSدر
  • تعریف استایل‌های چندگانه می‌توانلایهبرای یک

استایل‌ها یک مشکل عمومی را حل می‌کنند.

تگ‌های HTML در ابتدا برای تعریف محتوای مستند طراحی شده‌اند. با استفاده از تگ‌هایی مانند <h1>, <p>, <table>، HTML در ابتدا برای بیان اطلاعات مانند

به دلیل اینکه دو مرورگر اصلی (Netscape و Internet Explorer) به طور مداوم تگ‌های جدید HTML و ویژگی‌ها (مانند تگ‌های فونت و ویژگی‌های رنگی) را به استاندارد HTML اضافه می‌کنند، بنابراین ایجاد وب‌سایت‌هایی که محتوای آن‌ها به طور واضحی مستقل از لایه نمایش آن‌ها است، دشوارتر شده است.

برای حل این مشکل، اتحادیه وب جهانی (W3C)، این اتحادیه غیرانتفاعی استانداردسازی، وظیفه استانداردسازی HTML را بر عهده گرفت و خارج از HTML 4.0، STYLES (استایل) را ایجاد کرد.

همه مرورگرهای اصلی پشتیبانی از شبکه‌های استایل را دارند.

شبکه‌های استایل به طور قابل توجهی بهره‌وری را افزایش می‌دهند.

شبکه‌های استایل تعیین می‌کنند که چگونه عناصر HTML نمایش داده شوند، مانند تگ‌های فونت و ویژگی‌های رنگی در استایل‌های HTML 3.2 که معمولاً در فایل‌های خارجی .css ذخیره می‌شوند. با تنها ویرایش یک مستند CSS ساده، استایل‌های خارجی شما قادر خواهند بود به طور همزمان ظاهر تمامی طرح‌های وب‌سایت شما را تغییر دهند.

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

استایل‌های چندگانه به یک لایه‌بندی می‌شوند

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

ترتیب لایه‌بندی

وقتی یک عنصر HTML توسط چندین استایل تعریف شده است، از کدام استایل استفاده می‌شود؟

به طور کلی، همه استایل‌ها بر اساس قوانین زیر در یک جدول استایل مجازی جدید طبقه‌بندی می‌شوند، در حالی که عدد 4 بالاترین اولویت را دارد.

  1. تنظیمات پیش‌فرض مرورگر
  2. استایل‌های خارجی
  3. استایل‌های داخلی (محل‌گذاری شده در داخل برچسب <head>)
  4. استایل‌های درون‌محتوایی (در داخل عناصر HTML)

بنابراین، استایل‌های درون‌محتوایی (در داخل عناصر HTML) بالاترین اولویت را دارند، این بدان معناست که آن‌ها از استایل‌های زیر فراتر می‌روند: استایل‌های در برچسب <head>، استایل‌های در فایل‌های استایل خارجی، یا استایل‌های پیش‌فرض مرورگر.