قوانین اساسی css

قوانین اساسی css را در این مقاله مورد بررسی قرار می‌دهیم. CSS مخفف Cascading Style Sheets است و زبانی برای استایل دهی به صفحات وب می باشد. این زبان به شما امکان می دهد تا ظاهر عناصر HTML را با جزئیات زیادی کنترل کنید. قوانین استاندارد CSS از یک declaration block و یک CSS selector تشکیل شده است

اعلان‌ها (Declarations):

اعلام‌ها برای تعیین ویژگی‌ها و مقادیر استایل برای عناصر انتخاب شده استفاده می‌شوند. هر اعلان شامل دو بخش است:

• ویژگی: نام ویژگی استایل (مانند color، font-size، background-color)
• مقدار: مقدار ویژگی استایل (مانند red، 16px، #ffffff)

اعلان‌ها با علامت ; (نقطه ویرگول) از هم جدا می‌شوند. در این مثال، دو اعلان برای عنصر h1 وجود دارد:

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

• color: مقدار red برای این ویژگی تعیین می‌کند که رنگ متن تمام عناصر h1 قرمز باشد.
• font-size: مقدار 24px برای این ویژگی تعیین می‌کند که اندازه فونت تمام عناصر h1 برابر با 24 پیکسل باشد.

انواع مقادیر:

• رنگ‌ها: می‌توان از نام‌های رنگی مانند red، blue، green یا کدهایی مانند #ffffff استفاده کرد.
• اندازه‌ها: می‌توان از واحدهای مختلف مانند px (پیکسل)، em، rem و درصد استفاده کرد.
• فونت‌ها: می‌توان از نام فونت‌های مختلف استفاده کرد.
• موقعیت‌ها: می‌توان از مقادیر مختلف مانند top، bottom، left، right، center و absolute استفاده کرد.

انتخابگرها ( selectors ):

CSS برای اعمال مقادیر خاص به ویژگی های خاص استفاده می شود. به عبارت دیگر، CSS به مرورگر می‌گوید که از کدام قلم‌ها، رنگ‌ها، تزئینات و سایر ویژگی‌ها بر روی عناصر HTML استفاده کند. ساختار اصلی CSS به این صورت است:

• یک ویژگی خاص که باید تنظیم شود، مشخص می‌کند. به عنوان مثال، این می‌تواند یک ویژگی مانند background-color باشد.
• مقداری که نشان‌دهنده نحوه نمایش ویژگی بر روی مرورگرها است، را مشخص می‌کند. به عنوان مثال، ما می‌توانیم background-color را به رنگ بنفش تنظیم کنیم.

به این مثال کد نگاهی بیندازید:

 p {
     text-align: left;
     color: blue;
 }

• selector عنصر پاراگراف <p> است.
• هر دو با property شروع می شوند. اولی text-align و دومی color است.
• سرانجام ، هر دو ویژگی مقادیری به خود اختصاص داده اند.

• CSS selector یک عنصر HTML را نشان می دهد که می خواهید آن را استایل کنید.
• در Declarations چگونگی استایل دادن به یک عنصر خاص یا گروهی از عناصر HTML بیان شده است.
• شما اعلان ها را با  semicolons جدا می کنید ، و آنها declaration block را تشکیل می دهند.
• CSS value و property names در هر  declaration وجود دارد ، و یک علامت semicolon آنها را جدا می کند.
• یک semicolon همیشه یک CSS declaration را خاتمه می دهد.
• پرانتزها دارای یک declaration block در هر دو طرف هستند.

اطلاعات بیشتر در مورد انتخابگرها

در CSS ، تگ ها (انتخاب کنندگان) عناصر خاص HTML را هدف قرار می دهند. این آموزش 4 انتخابگر CSS را توضیح می دهد: type, ID, class, and grouping (نوع ، شناسه ، کلاس و گروه بندی).

Type selectors

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

/* انتخاب تمام عناصر h1 */ 
h1 { 
    color: red; 
} 

/* انتخاب عنصری با کلاس my-class */ 
.my-class { 
    font-weight: bold; 
} 

/* انتخاب عنصری با id my-id */ 
#my-id { 
    background-color: blue; 
} 

/* انتخاب عنصر p که بلافاصله داخل عنصر div است */ 
div > p { 
    text-align: center; 
}

انتخاب کنندگان شناسه ID

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

نکته: شناسه های عناصر باید منحصر به فرد باشند. بنابراین ، فقط یک بار می توانید از یک شناسه ID در یک سند HTML استفاده کنید. در این مثال، تمام عناصر HTML با شناسه my-id به رنگ قرمز در می‌آیند.

#my-id {
  color: red;
}

انتخابگر ID همیشه دارای یک (#)  است، در CSS، از علامت # (هشتگ) به همراه نام id برای انتخاب یک عنصر HTML خاص با شناسه منحصر به فرد آن استفاده می‌شود. و ویژگی ID عنصر به دنبال دارد. در این مثال ، my-id# انتخابگر شناسه است. استفاده از my-id# به شما امکان می‌دهد تا به طور مستقیم به این عنصر خاص دسترسی پیدا کنید و آن را با استفاده از CSS استایل دهی کنید. مزایای استفاده از انتخاب کننده ID:

• انتخاب دقیق و منحصر به فرد عناصر
• افزایش سرعت و کارایی
• خوانایی و سادگی کد

انتخابگرهای کلاس Class

انتخابگرهای کلاس Class ابزاری قدرتمند در CSS هستند که به شما امکان می‌دهند تا گروهی از عناصر HTML را با استفاده از یک نام کلاس مشترک انتخاب و به آنها استایل دهید. برای استفاده از انتخابگر کلاس Class، باید از علامت . به دنبال نام کلاس استفاده کنید. در این مثال، تمام عناصر HTML با کلاس my-class به رنگ قرمز در می‌آیند.

.my-class { 
    color: red; 
}

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

• انتخاب گروهی از عناصر: به شما امکان می‌دهد تا به طور همزمان به چندین عنصر مرتبط استایل دهید.
• افزایش سرعت و کارایی: مرورگر می‌تواند به سرعت گروهی از عناصر را پیدا کند و به آنها استایل دهد.
• خوانایی و سادگی کد: استفاده از انتخابگر Class کد شما را خواناتر و قابل فهم‌تر می‌کند.

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