css چیست ؟ – دوره آموزش های جامع css

CSS چیست؟

CSS چیست ؟ CSS (Cascading Style Sheets) به شما امکان می دهد صفحات وب زیبایی را ایجاد کنید ، اما چگونه زیر کار می کند؟ این مقاله با یک مثال ساده نحوی توضیح می دهد که CSS چیست و همچنین برخی اصطلاحات کلیدی در مورد این زبان را پوشش می دهد. زبان های مختلفی مانند جاوا اسکریپت، HTML ، روبی و پایتون در طراحی سایت مورد استفاده قرار میگیرند. که هر کدام از آنها را در بخش خود توضیح خواهیم داد.

  1. CSS مخفف Cascading Style Sheets است
  2. CSS نحوه نمایش عناصر HTML در صفحه ، کاغذ یا سایر رسانه ها را توصیف می کند
  3. CSS باعث صرفه جویی در کار زیادی می شود. این می تواند طرح چندین صفحه وب را همزمان کنترل کند
  4. شیوه نامه های خارجی در پرونده های CSS ذخیره می شوند

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

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

مثال CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS یک مشکل بزرگ را حل کرد

HTML هرگز دربردارنده برچسب هایی برای قالب بندی یک صفحه وب نبود!

HTML برای توصیف محتوای یک صفحه وب ایجاد شده است ، مانند:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

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

برای حل این مشکل ، کنسرسیوم شبکه جهانی وب (W3C) CSS را ایجاد کرد.

CSS قالب بندی سبک را از صفحه HTML حذف کرد!

CSS باعث صرفه جویی در کارهای اضافی می شود!

تعاریف سبک به طور معمول در پرونده های .css خارجی ذخیره می شوند.

با استفاده از یک فایل شیوه نامه خارجی ، فقط با تغییر یک فایل می توانید ظاهر یک وب سایت را تغییر دهید!

CSS Syntax

یک مجموعه قانون CSS از یک انتخابگر و یک بلوک اعلان تشکیل شده است:

اجزای تشکیل دهنده یک دستور CSS

انتخابگر به عنصر HTML که می خواهید سبک دهید ، اشاره می کند.

بلوک اعلان شامل یک یا چند اعلامیه است که با علامت های نقطه ویرگول از هم جدا شده اند.

هر اعلامیه شامل یک نام خاصیت CSS و یک مقدار است که توسط یک کولن جدا شده است.

چندین اعلامیه CSS با علامت های ویرگول از هم جدا می شوند و بلوک های اعلان توسط پرانتزهای مجعد احاطه شده اند.

مثال

در این مثال ، تمام عناصر
در یک تراز وسط قرار دارند و یک رنگ متن قرمز دارند:

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

انتخابگرها CSS

انتخابگرهای CSS برای “یافتن” (یا انتخاب) عناصر HTML مورد نظر جهت سبک سازی استفاده می شوند.

ما می توانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:

  1. انتخابگرهای ساده (عناصر را بر اساس نام ، شناسه ، کلاس انتخاب کنید)
  2. انتخابگرهای ترکیبی (عناصر را بر اساس رابطه خاصی بین آنها انتخاب کنید)
  3. انتخابگرهای کلاس شبه (عناصر را براساس یک حالت خاص انتخاب کنید)
  4. انتخاب کنندگان عناصر شبه (انتخاب و سبک بخشی از یک عنصر)
  5. انتخابگرهای ویژگی (عناصر را براساس ویژگی یا مقدار ویژگی انتخاب کنید)

این صفحه اساسی ترین انتخاب کنندگان CSS را توضیح می دهد.

انتخابگر عنصر CSS

انتخابگر عنصر عناصر HTML را بر اساس نام عنصر انتخاب می کند.

در اینجا ، همه عناصر صفحه با رنگ متن قرمز تراز وسط قرار می گیرند:

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

انتخابگر شناسه CSS

شناسه از ویژگی id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می کند.

شناسه یک عنصر در یک صفحه منحصر به فرد است ، بنابراین از شناسه شناسه برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

برای انتخاب یک عنصر با شناسه خاص ، یک کاراکتر هش (#) و سپس شناسه عنصر بنویسید.

مهم

نام شناسه نمی تواند با شماره شروع شود!

قانون CSS زیر برای عنصر HTML با id = “para1” اعمال می شود:

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

انتخابگر کلاس CSS

انتخابگر کلاس عناصر HTML را با یک ویژگی کلاس خاص انتخاب می کند.

برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر period (.) و سپس نام کلاس را بنویسید.

در این مثال ، تمام عناصر HTML با class = “center” قرمز و تراز وسط قرار می گیرند:

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

همچنین می توانید تعیین کنید که فقط عناصر خاص HTML تحت تأثیر یک کلاس قرار گیرند.

در این مثال فقط عناصر با کلاس = “center” قرمز و تراز وسط قرار می گیرند:

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

عناصر HTML همچنین می توانند به بیش از یک کلاس اشاره کنند.

در این مثال عنصر مطابق با class = “center” و به class = “large” مدل خواهد شد:

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

انتخابگر جهانی CSS

انتخابگر جهانی (*) همه عناصر HTML موجود در صفحه را انتخاب می کند.

قانون CSS زیر بر روی هر عنصر HTML موجود در صفحه تأثیر می گذارد:

* {
  text-align: center;
  color: blue;
}

انتخابگر گروه بندی CSS

انتخابگر گروه بندی ، تمام عناصر HTML را با همان تعریف سبک انتخاب می کند.

به کد CSS زیر نگاه کنید (عناصر h1 ، h2 و p تعریف یکسانی دارند):

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

انتخابگرمثالتوضیح نمونه
#idfirstname#عنصر را با id = “firstname” انتخاب می کند
.classintro.همه عناصر دارای کلاس = “intro” را انتخاب می کند
element.classp.introفقط عناصر
با کلاس = “intro” را انتخاب می کند
**همه عناصر را انتخاب می کند
elementpهمه عناصر <p>
را انتخاب می کند
element,element,..div, pهمه عناصر <div>
و همه عناصر <p> را انتخاب می کند

در سری مقالات css چیست ؟ سعی بر آموزش گام به گام همراهان وب جنیوس در تسلط کامل بر این پروتکل جذاب داریم که امیدواریم رسالتمان را به نحو احسنت انجام دهیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *