آموزش CSS - نحو نگارش

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

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

p {
  color: blue;
  font-size: 16px;
}

در این مثال، p انتخابی است که تمام عناصر <p> صفحه را هدف قرار می دهد. اعلان‌های زیر (رنگ: آبی؛ و اندازه قلم: 16 پیکسل؛) ویژگی‌های رنگ و اندازه قلم را برای آن عناصر تنظیم می‌کنند.

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

آناتومی CSS Rule (قانون سی اس اس)

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

انتخابگرها(Selectors): انتخابگرها برای هدف قرار دادن عنصر(های) HTML که می خواهید استایل کنید استفاده می شود. انواع مختلفی از انتخابگر وجود دارد، از جمله:
- انتخابگرهای نوع(Type selectors): عناصر هدف را بر اساس نام تگ HTML آنها (به عنوان مثال h1، p، a).
- انتخابگرهای کلاس(Class selectors): عناصر هدف را بر اساس ویژگی کلاس آنها (به عنوان مثال .my-class) مورد هدف قرار می دهند.
- انتخابگرهای شناسه(ID selectors): عناصر هدف را بر اساس ویژگی ID آنها (به عنوان مثال #my-id) مورد هدف قرار می دهند.
- انتخابگرهای ویژگی(Attribute selectors): عناصر هدف را بر اساس مقدار مشخصه آنها (به عنوان مثال [type="text"] تعیین می کند.
- انتخابگرهای شبه کلاس(Pseudo-class selectors): عناصر هدف را بر اساس وضعیت یا موقعیت آنها در سند (به عنوان مثال :hover، :first-child) مورد هدف قرار می دهند.
اعلان ها(Declarations): اعلان ها ویژگی های استایل ی را که می خواهید برای عنصر(های) انتخاب شده اعمال کنید، تعریف می کنند. اعلان ها شامل یک ویژگی و یک مقدار هستند که با دو نقطه از هم جدا می شوند. به عنوان مثال، رنگ: آبی؛ ویژگی رنگ را روی آبی قرار می دهد.
مقادیر (Values) : مقادیر به ویژگی‌های موجود در اعلان های شما اختصاص داده می‌شوند. آنها را می توان در واحدهای مختلفی مانند پیکسل (px)، ems (em) یا درصد (%) مشخص کرد. به عنوان مثال، اندازه فونت: 16 پیکسل. ویژگی اندازه فونت را روی 16 پیکسل قرار می دهد.

در اینجا یک مثال از یک قانون CSS است:

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

در این مثال، h1 انتخابی است که تمام عناصر <h1> صفحه را هدف قرار می دهد. اعلان‌هایی که در ادامه می‌آیند (اندازه قلم: 24 پیکسل؛ رنگ: قرمز؛ و تراز متن: مرکز؛) ویژگی‌های اندازه قلم، رنگ و تراز متن را برای آن عناصر تنظیم می‌کنند.

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

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

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

انتخابگرهای نوع: انتخابگرهای عناصر هدف را بر اساس نام تگ HTML آنها تایپ کنید. به عنوان مثال، h1 تمام عناصر <h1> در صفحه را هدف قرار می دهد، در حالی که p تمام عناصر <p> را هدف قرار می دهد. انتخابگرهای نوع ، زمانی مفید هستند که بخواهید یک استایل را برای همه عناصر از یک نوع خاص اعمال کنید.
انتخابگرهای کلاس: انتخابگرهای کلاس عناصر را بر اساس ویژگی کلاس آنها هدف قرار می دهند. برای ایجاد انتخابگر کلاس، قبل از نام کلاس یک نقطه (.) اضافه می کنید. برای مثال، my-class تمام عناصر را با class="my-class" هدف قرار می دهد. انتخابگرهای کلاس زمانی مفید هستند که می خواهید یک استایل خاص را برای گروه خاصی از عناصر اعمال کنید.
انتخابگرهای ID: انتخابگرهای شناسه عناصر را بر اساس ویژگی ID آنها هدف قرار می دهند. برای ایجاد یک انتخابگر شناسه، یک هشتگ (#) قبل از نام شناسه اضافه می‌کنید. برای مثال، #my-id عنصر را با id="my-id" هدف قرار می دهد. انتخابگرهای شناسه زمانی مفید هستند که می خواهید یک استایل منحصر به فرد را برای یک عنصر اعمال کنید.
انتخابگرهای ویژگی: انتخابگرهای ویژگی عناصر را بر اساس مقادیر ویژگی آنها هدف قرار می دهند. انواع مختلفی از انتخابگرهای ویژگی وجود دارد، مانند [attr] (تطابق عناصر با یک ویژگی خاص)، [attr="value"] (تطبیق عناصر با یک مقدار مشخصه خاص)، و [attr^="value"] (منطبق با عناصر عناصر با یک مقدار مشخصه که با یک رشته خاص شروع می شود). انتخابگرهای مشخصه زمانی مفید هستند که می‌خواهید عناصری را با مقادیر مشخصه خاص، مانند ورودی‌های فرم، هدف قرار دهید.
انتخابگرهای شبه کلاس: انتخابگرهای شبه کلاس عناصر را بر اساس وضعیت یا موقعیت آنها در سند هدف قرار می دهند. انواع مختلفی از انتخابگرهای شبه کلاس وجود دارد، مانند :hover (هنگامی که نشانگر ماوس روی آنها قرار می گیرد، عناصر را مطابقت می دهد)، :first-child (با اولین عنصر فرزند والدین مطابقت دارد) و :nth-child(n) (n) با عنصر فرزند n والدین مطابقت دارد). انتخابگرهای شبه کلاس زمانی مفید هستند که می خواهید یک استایل را بر اساس وضعیت یا موقعیت یک عنصر اعمال کنید.

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

h1, .my-class {
  color: red;
}

#my-id {
  font-size: 24px;
}

input[type="text"] {
  border: 1px solid #ccc;
}

a:hover {
  text-decoration: underline;
}

در این مثال، h1 و .my-class به ترتیب انتخابگرهای نوع و کلاس هستند که همه <h1> و عناصر را با class="my-class" هدف قرار می دهند. اعلان‌هایی که در ادامه می‌آیند، ویژگی رنگ را برای آن عناصر به رنگ قرمز تنظیم می‌کنند. #my-id یک انتخابگر شناسه است که عنصر را با id="my-id" هدف قرار می دهد و ویژگی اندازه فونت را روی 24 پیکسل تنظیم می کند. input[type="text"] یک انتخابگر ویژگی است که تمام عناصر <input> را با type="text" هدف قرار می دهد و یک ویژگی حاشیه را تنظیم می کند. در نهایت، a:hover یک انتخابگر شبه کلاس است که تمام عناصر <a> را هنگامی که نشانگر ماوس روی آنها قرار می گیرد، هدف قرار می دهد و یک ویژگی خط زیرمتن را تنظیم می کند.

مدل جعبه (box model)

Box model مفهومی در CSS است که نحوه نمایش عناصر HTML در یک صفحه وب را توصیف می کند. هر عنصر توسط یک جعبه مستطیل شکل احاطه شده است که از چهار لایه تشکیل شده است: margin، border، padding و content. درک مدل جعبه برای کنترل فاصله و چیدمان عناصر در یک صفحه وب مهم است.

Content: لایه محتوا درونی ترین لایه کادر است و حاوی محتوای واقعی عنصر مانند متن یا تصاویر است. اندازه این لایه با ویژگی های عرض و ارتفاع عنصر تعیین می شود.
Padding: لایه padding لایه محتوا را احاطه می کند و بین محتوا و حاشیه فاصله ایجاد می کند. Padding را می توان با استفاده از ویژگی padding تنظیم کرد و می توان آن را برای هر طرف عنصر به صورت جداگانه تعیین کرد (به عنوان مثال padding-top، padding-right، padding-bottom، padding-left).
Border: لایه مرزی لایه padding را احاطه می کند و یک حاشیه قابل مشاهده در اطراف عنصر اضافه می کند. حاشیه‌ها را می‌توان با استفاده از ویژگی border تنظیم کرد، و می‌توان آن‌ها را برای هر طرف عنصر به‌صورت جداگانه تعیین کرد (به عنوان مثال، border-top، border-right، border-bottom، border-left). حاشیه ها همچنین می توانند با استایل های مختلف (به عنوان مثال یکپارچه، نقطه چین، نقطه چین) و رنگ سفارشی شوند.
margin: لایه حاشیه لایه مرزی را احاطه می کند و بین عنصر و عناصر اطراف آن فاصله ایجاد می کند. حاشیه‌ها را می‌توان با استفاده از ویژگی margin تنظیم کرد، و می‌توان آن‌ها را برای هر طرف عنصر به صورت جداگانه تعیین کرد (به عنوان مثال، margin-top، margin-right، margin-bottom، margin-left).

در اینجا مثالی از نحوه عملکرد مدل جعبه آورده شده است:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 30px;
}

در این مثال، عنصر .box دارای عرض 200 پیکسل و ارتفاع 100 پیکسل است. همچنین دارای حاشیه از داخل 20 پیکسلی در هر طرف، خط مرز سیاه یک پیکسلی و مارجین 30 پیکسلی در هر طرف است. اندازه کل جعبه 320 پیکسل عرض و 220 پیکسل ارتفاع (شامل حاشیه) خواهد بود.

با درک مدل جعبه و نحوه کنترل لایه‌های آن، می‌توانید طرح‌بندی دقیق‌تر و منسجم‌تری برای صفحات وب خود ایجاد کنید.

CSS چیست؟ - درس قبلی

درس بعدی - انتخابگرها