سی اس اس چیست ؟

• سی اس اس (CSS) مخفف عبارت Cascading Style Sheets می باشد.
• CSS مخشص می کند که المان های HTML در مانیتور یا سایر نمایشگرها چطور نمایش داده شوند.
• سی اس اس می تواند چندین وظیفه مختلف را در خود ذخیره کند و قادر است قالب بندی چندین وب سایت را به طور همزمان انجام دهد.
• External stylesheet ها در فایل های سی اس اس ذخیره می شوند.

چرا از CSS استفاده می کنیم

HTML به هیچ عنوان، برای قالب بندی صفحات، طراحی نشده است. HTML برای توصیف محتوای یک صفحه به وجود آمده است. مثل:

<h1>This is a heading</h1>
<p>This is a paragraph</p>

هنگامی که ویژگی هایی مثل <font> و رنگ به HTML 3.2 افزوده شد، کابوسی را برای برنامه نویسان به وجود آورد. توسعه وب سایت های بزرگ که در آن فونت ها و اطلاعات رنگی به هر صفحه اضافه می شد، یک روند طولانی و پرهزینه بود.

برای رفع این مشکل، کنسرسیوم جهانی وب (w3c)، سی اس اس را به وجود آورد که CSS قالب بندی ها را از HTML حذف کرد و با استفاده از آن قادر هستید تمامی قالب بندی های وب سایت خود را در یک فایل خارجی با پسوند css. ذخیره کنید و تنها با تغییر این فایل، ظاهر وب سایت خود را تغییر دهید.

اجزای یک کد سی اس اس

هر کد CSS از یک Selector و Declaration تشکیل شده است. به مثال زیر دقت کنید:

هر Selector به المانی از HTML که می خواهید آن را قالب بندی کنید، اشاره می کند و هر Declaration (اعلان) شامل نام یک خصوصیت و مقدار آن می شود که اعلان ها با استفاده از علامت ; از هم جدا می شوند.

هر اعلان با علامت ; پایان می پذیرد و یک اعلان یا مجموعه ای از اعلان ها می بایست در بین علامت های { } قرار گیرند.

به عنوان مثال با استفاده از کد زیر، تمامی المان های P در مرکز قرار می گیرند:

 p {
  color: red;
  text-align: center;
}

سلکتورهای css

سلکتورهای سی اس اس، برای یافتن المان های html بر اساس نام المان، id المان، class آن و … استفاده می شوند.

۱- element selector

این سلکتورها بر اساس نام المان ها انتخاب می شوند. به عنوان مثال با دادن رنگ خاصی به عنصر p، تمامی المان های p، به آن رنگ تبدیل می شوند.

۲- id Selector

این نوع از سلکتورها، بر اساس Id المان ها، به آن ها خصوصیاتی می دهند.
نکته مهم در رابطه با id این است که هر id یکتا می باشد و تنها برای یک عنصر به کار می رود.
برای استفاده از id، قبل از نام المان، علامت # را قرار می دهیم.
در مثال زیر استایل مشخص، به عنصری با id=paragraph داده شده است:

#paragraph {
  text-align: center;
  color: red;
}

نکته: نام id نمی تواند با یک عدد آغاز شود.

۳- class Selector

این نوع از سلکتورها، المان ها را بر اساس کلاس اختصاصی به آن ها انتخاب می کنند.
برای انتخاب المانی با کلاسی خاص، می بایست قبل از نام کلاس از . استفاده کنیم.
در مثال زیر به تمام المان های با کلاسی به نام playاستایل دهی کرده ایم:

.play {
  text-align: center;
  color: red;
}

همچنین می توانید تعیین کنید که یک المان خاص از html، با استفاده از کلاس، قالب بندی شود.
در مثال زیر به المان p با class=play استایل دهی کرده ایم:

p.play {
  text-align: center;
  color: red;
}

نکته: المان های html می توانند به بیش از یک کلاس اشاره کنند.
در مثال زیر می بینید که المان p دو کلاس دارد با نام های playو large:

<p class="play large">This paragraph refers to two classes.</p>

نکته: نام کلاس نمی تواند با یک عدد آغاز شود.

۴- Grouping Selectors

اگر مانند مثال زیر المان هایی با استایل های یکسانی داشته باشیم، برای کوتاه کردن کد، بهتر است که selectorها را دسته بندی کنیم:

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

برای گروه بندی سلکتورها می بایست بین هر سلکتور و سلکتور بعدی یک , بگذاریم.
در ادامه، کد بالا را به صورت زیر گروه بندی می کنیم:

h1, h2, p {
  text-align: center;
  color: red;
}

CSS Comment

کامنت ها برای توضیح درباره کد ایجاد می شوند و اگر مدتی بعد به سراغ کد خود بیایید، از طریق این کامنت ها می توانید توضیحاتی در مورد بخش های مختلف کد خود مشاهده نمایید.
نکته: کامنت ها در مرورگرها نادیده گرفته می شوند و تاثیری در ظاهر وب سایت ندارند.
یک کامنت در css با */ آغاز می شود و با /* پایان می یابد. Comment ها می توانند چند خط توضیحات داشته باشند:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */

برگرفته از وب سایت w3schools