CSS چیست؟

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

p {
  color: red;
}

CSS مخفف Cascading Style Sheets است و زبانی است که برای طراحی سبک و چیدمان صفحات وب ایجاد شده با HTML استفاده می شود. در حالی که HTML ساختار یک وب سایت را تعریف می کند، CSS از استایل و طرح بندی مراقبت می کند – صفحه چگونه باید به نظر برسد. CSS به شما امکان می دهد رنگ ها، فونت ها، فاصله ها، اندازه ها و موارد دیگر را برای عناصر مختلف در یک صفحه و وب سایت کنترل کنید.

درک عمیق‌تر ساختار و اصطلاحات قواعد CSS

بیایید کد CSS را برای متن پاراگراف قرمز تجزیه کنیم تا بفهمیم چگونه کار می کند:

برای تسلط بر CSS و ساختار آن، بررسی دقیق اجزاء و اصطلاحات یک قاعده (به انگلیسی "ruleset") ضروری است. هر قاعده از چند بخش کلیدی تشکیل شده است که با هم برای اعمال سبک و قالب‌بندی به عناصر HTML همکاری می‌کنند.

اجزای یک قاعده

انتخابگر / Selector

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

• انتخابگر نوع / Type selector: مانند p برای پاراگراف‌ها
• انتخابگر کلاس / Class selector: مانند .classname که تمام عناصر با آن کلاس را انتخاب می‌کند
• انتخابگر شناسه / ID selector: مانند #idname که عنصری با آن شناسه را انتخاب می‌کند
• شبه‌کلاس‌ها / Pseudo-class: مانند :hover برای اثر هاور موس
• Descendant Selector: عنصری را انتخاب می کند که از نسل دیگری است (مثلاً div p)
• Child Selector: عناصر مستقیم فرزندان را انتخاب می کند (مثلاً div > p)
• Adjacent Sibling Selector: عنصری را انتخاب می کند که مستقیماً بعد از عنصر دیگری قرار دارد (مثلاً h1 + p)
• General Sibling Selector: عناصری را انتخاب می کند که خواهر و برادر یک عنصر هستند (مثلاً h1 ~ p)

شبه طبقات / Pseudo-Classes

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

• :hover: هنگامی که کاربر ماوس را روی یک عنصر قرار می دهد، استایل ها را اعمال می کند.
• :focus: هنگامی که یک عنصر فوکوس داشته باشد، سبک‌ها را اعمال می‌کند.
• :active: هنگامی که یک عنصر فعال می شود (کلیک می شود) سبک ها را اعمال می کند.
• :first-child: اولین فرزند والدین خود را هدف قرار می دهد.
• :last-child: آخرین فرزند والدین خود را هدف قرار می دهد.
• :nth-child(n): نهمین فرزند والدین خود را هدف قرار می دهد.

شبه عناصر / Pseudo-Elements

عناصر شبه به شما این امکان را می دهند که به بخش های خاصی از یک عنصر استایل دهید:

• ::before: محتوا را قبل از محتوای عنصر انتخاب شده درج می کند.
• ::after: محتوا را بعد از محتوای عنصر انتخاب شده درج می کند.
• ::first-line: خط اول متن یک عنصر را هدف قرار می دهد.
• ::first-letter: حرف اول متن را در یک عنصر هدف قرار می دهد.

ترکیب انتخابگرها / Combining Selectors

می توانید انتخابگرها را برای هدف قرار دادن عناصر به طور خاص تر ترکیب کنید:

• .button:hover — هنگامی که ماوس را روی عناصر با کلاس "button" قرار می دهید.
• #header::after — محتوا یا سبک‌هایی را بعد از محتوای عنصر با شناسه "header" اضافه می‌کند.

اعلامیه / Declaration

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

• ویژگی / Property: مشخصه عنصر که سبک‌بندی می‌شود (مانند رنگ، فونت، چیدمان)
• مقدار / Value: ظاهر یا رفتار ویژگی را تعیین می‌کند (مانند red, 16px, flexbox)

color: red;
font-size: 16px;

ویژگی‌ها / Properties

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

• تایپوگرافی: font-family, font-size, text-align
• رنگ: color, background-color
• چیدمان: display, float, margin
• موقعیت: position, top, left
• انیمیشن: transition, animation

مقدار ویژگی / Property Value

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

• کلمات کلیدی: مانند bold, inherit
• اعداد: مانند 16px, 100%
• رنگ‌ها: مانند red, #00FF00
• طول‌ها: مانند 1em, 20px
• مقادیر پیچیده‌تر: مانند url(image.png), linear-gradient()

قواعد مهم نگارشی / Syntax Rules

• پرانتز: قواعد در پرانتزهای مجعد { } قرار می‌گیرند.
• دو نقطه: ویژگی و مقدار را در اعلامیه‌ها از هم جدا می‌کند :.
• نقطه ویرگول: هر اعلامیه را به پایان می‌رساند ;.
• ترکیب: امکان استفاده از چند اعلامیه در یک قاعده وجود دارد.

مثال یک قاعده کامل

p {
  color: red;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

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

دسته‌بندی ویژگی‌های CSS

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

۱. ویژگی های طرح بندی / Layout Properties

این ویژگی ها به تعریف طرح بندی صفحات وب کمک می کنند:

• display: رفتار نمایشگر را مشخص می کند (block, inline, flex, grid)
• position: نوع روش موقعیت یابی را مشخص می کند (absolute, relative, fixed, sticky)
• float: یک عنصر را در سمت چپ یا راست ظرف آن قرار می دهد
• clear: مشخص می کند که عناصر شناور در کدام طرف مجاز نیستند

۲. Flexbox و Grid

برای ساختارهای چیدمان پیشرفته، به ویژه در طراحی های واکنش گرا استفاده می شود:

• ویژگی‌های Flex: flex-direction, flex-wrap, justify-content, align-items, flex-grow, flex-shrink, flex-basis
• ویژگی های Grid: grid-template-columns, grid-template-rows, grid-column, grid-row, grid-area, grid-gap

۳. ویژگی های مدل جعبه / Box Model Properties

اندازه و فاصله عناصر را کنترل کنید:

• width, height: عرض و ارتفاع عناصر را مشخص کنید
• padding: فضایی را در اطراف محتوای یک عنصر، در داخل هر مرز تعریف شده ایجاد می کند
• margin: فضای اطراف عناصر را کنترل می کند
• border: حاشیه اطراف عناصر را تنظیم می کند

۴. خواص تایپوگرافی / Typography Properties

این ویژگی ها سبک و طرح متن و فونت ها را مشخص می کنند:

• ویژگی های فونت: font-size, font-family, font-weight, font-style
• ویژگی های متن: text-align, text-decoration, text-transform, line-height, letter-spacing, text-shadow

۵. ویژگی های جلوه های بصری / Visual Effects Properties

علاقه بصری و نشانه‌ها را به طرح‌بندی‌ها اضافه کنید:

• color: رنگ متن را مشخص می کند
• background: background-color, background-image, background-position, background-repeat, background-size
• box-shadow: افکت های سایه را در اطراف کادر یک عنصر اضافه می کند
• opacity: سطح کدورت یک عنصر را تنظیم می کند
• filter: جلوه های گرافیکی مانند تاری یا تغییر رنگ را اعمال می کند

۶. انیمیشن و انتقال / Animation and Transitions

برای افزودن افکت های تعاملی و پویا:

• transition: راهی برای کنترل سرعت انیمیشن در هنگام تغییر ویژگی های CSS ارائه می دهد
• animation: @keyframes, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction

۷. خواص متفرقه / Miscellaneous Properties

• cursor: نوع نشانگر ماوس را مشخص می کند
• z-index: ترتیب پشته عناصر همپوشانی را کنترل می کند
• visibility: مشخص می کند که آیا یک عنصر قابل مشاهده است یا خیر

این دسته‌بندی‌ها ضروری‌ترین جنبه‌های CSS را پوشش می‌دهند که برای ساخت و استایل تقریباً تمام رابط‌های وب استفاده می‌شوند. هر دسته به بخش خاصی از فرآیند استایل و چیدمان می پردازد و به توسعه دهندگان این امکان را می دهد که هم طراحی های وب جذاب و هم کاربردی ایجاد کنند.

برخی از مفاهیم اساسی CSS که فراتر از ویژگی ها هستند

بیایید این مفاهیم را که شامل انتخابگرها، شبه کلاس‌ها و شبه عناصر و غیره هستند، بررسی کنیم. اینها برای هدف قرار دادن عناصر HTML برای اعمال موثر سبک ها بسیار مهم هستند.

بیایید امتحان کنیم! من از این ویرایشگر HTML/CSS برای این پروژه استفاده می کنم: Programiz Online Editor. ما روی فایل index.html که در فصل 2 HTML ساخته ایم کار می کنیم.

با استفاده از یک ویرایشگر متن، سه خط CSS (بالا) را در یک فایل جدید قرار دهید. فایل را به عنوان style.css در فهرستی با نام styles ذخیره کنید.

/* style.css */
p {
  color: red;
}

اکنون ما سه فایل برای این پروژه داریم:

• index.html: این همان چیزی است که در فصل 2 HTML ساخته ایم
• styles/style.css: فایل CSS که刚刚 ساختیم

برای اتصال CSS به HTML، عنصر <link> را در بخش <head> فایل index.html اضافه کنید:

<!-- In index.html <head> -->
<link href="styles/style.css" rel="stylesheet">

فونت و متن / Fonts and text

اکنون که برخی از اصول CSS را بررسی کردیم، بیایید ظاهر مثال را با افزودن قوانین و اطلاعات بیشتر به فایل style.css بهبود دهیم.

ابتدا خروجی فونت های گوگل را که قبلاً ذخیره کرده اید از وب سایت شما چگونه خواهد بود پیدا کنید. عنصر <link> را در سر index.html خود اضافه کنید (هر جایی بین تگ‌های <head> و </head>):

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
  rel="stylesheet">

این کد صفحه شما را به یک شیوه نامه پیوند می دهد که خانواده فونت Open Sans را با صفحه وب شما بارگیری می کند.

در مرحله بعد، قانون موجود در فایل style.css خود را حذف کنید. خطوط زیر را اضافه کنید:

html {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

این قوانین همزمان فونت را برای کل صفحه تنظیم می کنند (هر چیزی در داخل <html> المان از فونت Open Sans استفاده خواهد کرد). سرفصل h1 را در مرکز صفحه قرار می دهد و پاراگراف‌ها و آیتم‌های لیست را با فونت 16px و ارتفاع خط 2 و فاصله حروف 1px تنظیم می کند.

CSS: همه چیز درباره جعبه ها / Boxes

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

چیدمان CSS بیشتر بر اساس مدل جعبه است. هر کادری که فضای صفحه شما را اشغال می کند دارای ویژگی هایی مانند:

• padding: فضای اطراف محتوا. در مثال زیر، فضای اطراف متن پاراگراف است.
• border: خط ثابتی که درست خارج از بالشتک قرار دارد.
• margin: فضای اطراف بیرون مرز.

در این بخش نیز از:

• width: عرض (یک عنصر)
• background-color: رنگ پس‌زمینه، رنگ پشت محتوای یک عنصر و بالشتک
• color: رنگ محتوای یک عنصر (معمولاً متن)
• text-shadow: بر روی متن داخل یک عنصر سایه می گذارد
• display: حالت نمایش یک عنصر را تنظیم می کند (MDN display reference)

تغییر رنگ صفحه

این قانون یک رنگ پس زمینه برای کل صفحه تعیین می کند. کد رنگ را به رنگی که انتخاب میکنید تغییر دهید:

html {
  background-color: #00539F;
}

حالت دادن به بدن / Styling the body

این کد را به فایل style.css اضافه کنید:

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

توضیحات برای عنصر <body> — برخی از اعلان‌هایی که معمولاً استفاده می‌شوند به شرح زیر هستند:

• width: 600px — عرض عنصر body را همیشه 600 پیکسل ثابت نگه می‌دارد.
• margin: 0 auto — زمانی که دو مقدار اختصاص می‌دهید، مقدار اول بر بالا و پایین تأثیر می‌گذارد (صفر). مقدار دوم بر چپ و راست اثر می‌گذارد. auto فضای افقی باقی‌مانده را به‌طور مساوی بین چپ و راست تقسیم می‌کند (centering).
• background-color: #FF9500 — رنگ پس‌زمینه عنصر را تنظیم می‌کند (نارنجی).
• padding: 0 20px 20px 20px — چهار مقدار برای حاشیه‌گذاری داخلی: بالا 0، راست 20px، پایین 20px، چپ 20px.
• border: 5px solid black — مقادیر عرض، سبک و رنگ حاشیه خارجی عنصر را مشخص می‌کند.

تعیین موقعیت و استایل کردن عنوان صفحه اصلی

ممکن است متوجه شده باشید که شکاف وحشتناکی در بالای بدن وجود دارد. این اتفاق می افتد زیرا مرورگرها یک ظاهر طراحی پیش فرض را برای عنصر h1 اعمال می کنند. برای از بین بردن شکاف، استایل پیش فرض مرورگر را با حاشیه تنظیم بازنویسی می کنیم:

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

متن عنوان را همرنگ رنگ پس‌زمینه HTML قرار می‌دهیم. text-shadow یک سایه به محتوای متن عنصر اعمال می کند. چهار مقدار آن عبارتند از:

• اولین مقدار (3px): افست افقی سایه را از متن تعیین می کند
• دومین مقدار (3px): افست عمودی سایه را از متن تعیین می کند
• سومین مقدار (1px): شعاع تاری سایه را تعیین می کند
• مقدار چهارم (black): رنگ پایه سایه را تعیین می کند

مکان تصویر را تغییر دهید / Change the image position

در مرحله بعد، تصویر را در مرکز قرار می دهیم تا بهتر به نظر برسد. می‌توانیم از margin: 0 auto ترفند خودکار دوباره استفاده کنیم. اما تفاوت هایی وجود دارد:

img {
  display: block;
  margin: 0 auto;
}

<body> یک عنصر بلوک است، به این معنی که فضای صفحه را اشغال می کند. حاشیه اعمال شده بر روی یک عنصر بلوک توسط سایر عناصر موجود در صفحه رعایت می شود. در مقابل، تصاویر عناصر درون خطی هستند. برای اینکه ترفند حاشیه خودکار روی این تصویر کار کند، باید با استفاده از display: block رفتاری در سطح بلوک به آن بدهیم.

توجه: دستورالعمل‌های بالا فرض می‌کنند که از تصویری کوچک‌تر از عرض تنظیم شده برای body (600px) استفاده می کنید. اگر تصویر بزرگتر باشد، از آن خارج شده و به بقیه صفحه کشیده می شود. اگر بزرگتر نباشد، در مرکز body قرار می گیرد.

آزمون / Quiz