آموزش CSS زبان استایل‌دهی صفحات وب

رسانیکامنبع: https://rasanika.com

سی اس اس یا برگه‌های استایل آبشاری (Cascading Style Sheets) کدی است به محتوای وب، استایل و سبک می دهد، یعنی ظاهر صفحات وب با استفاده از کد CSS طراحی می‌شوند. مواردی مثل تغییر رنگ یا اندازه متن، نمایش یک عنصر در یک موقعیت خاص در صفحه، تغییر پس زمینه صفحه و سایر موارد بصری همه با سی اس اس کدنویسی می‌شود.

CSS چطور کار می‌کند؟

CSS مثل HTML یک زبان برنامه نویسی نیست. البته زبان مارک آپ یا نشانه گذاری هم نیست. سی اس اس کدی است که برای استایل دادن انتخابی به عناصر HTML نوشته می‌شود. برای مثال این کد CSS عناصر p یا پاراگراف را انتخاب کرده و رنگ متن آن‌ها را قرمز می‌کند:

p {
  color: red;
}

آناتومی کد CSS

برای درک بهتر کد، مثال فوق را تحلیل می‌کنیم:

به کل این ساختار “مجموعه قوانین” یا ruleset سی اس اس گفته می‌شود. هر مجموعه قوانین از بخش‌هایی تشکیل شده است که باهم بررسی می‌کنیم:

• انتخابگر یا سلکتور (Selector)
  نشانی عنصر یا عناصر HTML است. عنصر یا عناصری را که می‌خواهیم این استایل روی آنها اعمال شود، از این طریق تعیین می‌کنیم. (در مثال فوق همه عناصر <p> یا پاراگراف مدنظر است)

• ویژگی (Property)
  اسامی ویژگی‌هایی از عناصر هستند که می‌توانیم به لحاظ ظاهری آنها را تغییر دهیم. (در مثال فوق color ویژگی عنصر <p> است.) از این طریق تعیین می‌کنیم که کدام ویژگی‌های عناصر را می‌خواهیم تغییر دهیم.

• مقدار ویژگی (Property value)
  در مقابل اسم ویژگی بعد از دو نقطه “مقدار ویژگی” قرار دارد. از موارد ظاهری بسیاری که برای این ویژگی وجود دارد یکی را می‌توانیم به عنوان مقدار ویژگی انتخاب کنیم. (در مثال فوق مقدار color برابر red یا قرمز است.)

سایر نکات مهم:

• به جز انتخابگر سایر قسمت‌های رول ست (ruleset) باید داخل آکولاد {} قرار بگیرند.

• باید بین ویژگی و مقدار آن دو نقطه : وجود داشته باشد.

• این امکان وجود دارد که بیش از یک ویژگی و مقدار آن داخل مجموعه قوانین CSS تعریف شوند، در این صورت باید در انتهای هر تعریف، نقطه ویرگول ; قرار داشته باشد که تعاریف از هم جدا شوند. برای مثال:

p {
  color: red;
  background: black;
  font-size: smaller;
  font-weight: bold;
}

انتخاب و استایل چند عنصر

با قرار دادن چند انتخابگر (selector) می‌توانیم یک مجموعه قوانین را روی چندین عنصر مختلف اعمال کنیم. با استفاده از کاما , انتخابگر‌ها را از هم جدا می‌کنیم:

p,
li,
h1 {
  color: red;
}

انواع مختلف انتخابگر (Selector)

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

• انتخابگر عنصر (Element selector)
  همه عناصر با نوع مشخص را انتخاب می‌کند. مثلا انتخابگر p همه عناصر <p> را انتخاب می‌کند.

• انتخابگر شناسه (ID selector)
  با # شروع می‌شود و عنصری در صفحه که شناسه یا آیدی مشخصی دارد را انتخاب می‌کند. (آیدی عنصر باید منحصر به فرد باشد.) مثلا انتخابگر #hello عنصر <p id="hello"> یا <h1 id="hello"> را انتخاب می کند.

• انتخابگر کلاس (Class selector)
  با . شروع می‌شود و همه عناصری که کلاس مشخصی دارند را انتخاب می‌کند. (کلاس عناصر می‌تواند تکراری باشد.) مثلا انتخابگر .hello عناصر <p class="hello"> و <h1 class="hello"> را انتخاب می‌کند.

• انتخابگر صفت (Attribute elector)
  همه عناصری که صفت مشخصی دارند را انتخاب می‌کند. مثلا انتخابگر img[src] عناصر <img src="foo.png"> و <img src="bar.png"> را انتخاب می‌کند ولی عنصر <img> را انتخاب نمی کند.

• انتخابگر شبه کلاس (Pseudo-class selector)
  با : شروع می‌شود و همه عناصری که حالت مشخصی دارند را انتخاب می‌کند. مثلا انتخابگر :hover عناصری را انتخاب می‌کند که ماوس روی آن قرار دارد. (مثلا برای تغییر رنگ لینک یا دگمه موقع قرار گرفتن ماوس روی آن، استفاده می‌شود.)

انتخابگرها می‌توانند با هم ترکیب شوند تا انتخاب اختصاصی تری انجام دهند. مثلا کد CSS زیر رنگ همه لینک <a> هایی که کلاس menu دارند را آبی می‌کند ولی زمانی که ماوس روی این لینک ها قرار بگیرد، رنگشان را به سبز تغییر می‌دهد:

a.menu {
  color: blue;
}
a.menu:hover {
  color: green;
}

موارد دیگری نیز هستند که در صورت تمایل می‌توانید آنها را در سایت MDN بخش راهنمای انتخابگر ها، مطالعه نمایید.

جمع بندی

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