مقدمه CSS

مهارت‌های مورد نیاز

قبل از ادامه، شما نیاز به دانش پایه زیر دارید:

  • HTML
  • XHTML

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

مقدمه CSS

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

استایل‌ها یک مشکل رایج را حل می‌کنند

تگ‌های HTML ابتدا برای تعریف محتوای مستند طراحی شده‌اند. با استفاده از تگ‌هایی مانند <h1>، <p>، <table>، هدف اصلی HTML این بود که اطلاعات مانند “این یک عنوان است”، “این یک پاراگراف است”، “این یک جدول است” را بیان کند. همچنین، چیدمان مستند توسط مرورگرها انجام می‌شود و از هیچ تگ فرمتی استفاده نمی‌شود.

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

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

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

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

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

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

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

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

ترتیب نحوی

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

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

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

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