دوشنبه 10 اردیبهشت 1403
CSS که مخفف Cascading Style Sheets است، یک زبان stylesheet محسوب می‌شود که به وب‌سایت‌ها این امکان را می‌دهد که نحوه‌ی نمایش محتوا در مرورگرها به صورت بصری درآید.
Css به توسعه‌دهندگان وب این امکان را می‌دهد تا طراحی و ظاهر صفحات وب را از محتوای صفحات جدا کنند. این ویژگی باعث افزایش انعطاف‌پذیری و قابل نگهداری بودن کد وب‌سایت‌ها می‌شود.
1. تاریخچه CSS
CSS برای اولین بار در سال 1996 توسط W3C (کنسرسیوم شبکه جهانی وب) معرفی شد. هدف ابتدایی CSS این بود که به توسعه‌دهندگان وب این امکان را بدهد که طراحی وب‌سایت‌ها را مدیریت و تنظیم کنند، بدون آنکه نیاز به نوشتن دوباره HTML باشد. با گذشت زمان، CSS به نسخه‌های مختلفی ارتقا پیدا کرد، از جمله CSS1، CSS2 و CSS3 که قابلیت‌ها و ویژگی‌های بیشتری به آن اضافه شدند.
2. ساختار CSS
CSS بر اساس قاعده‌های ساده‌ای طراحی شده است که شامل انتخاب‌گرها (selectors) و ویژگی‌ها (properties) می‌باشد. یک قاعده CSS به صورت زیر نوشته می‌شود:
```css
selector {
property: value;
}
```
در اینجا، selector عنصر HTML را انتخاب می‌کند، و property ویژگی‌ای است که می‌خواهیم تغییر دهیم، و value مقداری است که می‌خواهیم به آن ویژگی تخصیص دهیم.
مثال:
```css
h1 {
color: blue;
font-size: 24px;
}
```
در این مثال، تمام عناصر `<h1>` به رنگ آبی و اندازه‌ی 24 پیکسل تبدیل می‌شوند.
3. انتخاب‌گرها
انتخاب‌گرها ابزار کلیدی در CSS هستند که به ما اجازه می‌دهند تا عناصر خاصی را در HTML انتخاب کنیم. انواع مختلف انتخاب‌گرها عبارتند از:
- انتخاب‌گرهای نوعی: به‌طور مثال، `div`, `p`, `h1` و غیره.
- انتخاب‌گرهای کلاس: با استفاده از نقطه (.) قبل از نام کلاس. به‌طور مثال، `.classname`.
- انتخاب‌گرهای شناسه: با استفاده از علامت ` قبل از نام شناسه. به‌طور مثال، `idname`.
- انتخاب‌گرهای ترکیبی: ترکیب انتخاب‌گرهای مختلف برای انتخاب دقیق‌تر.
4. ویژگی‌ها و مقادیر CSS
CSS شامل مجموعه‌ای متنوع از ویژگی‌هاست که به ما این امکان را می‌دهد تا تقریباً هر جنبه‌ای از طراحی صفحات وب را کنترل کنیم. برخی از ویژگی‌های رایج شامل:
- رنگ‌ها: با استفاده از نام رنگ، کد HEX یا RGB می‌توان رنگ عناصر را تغییر داد.
- فونت‌ها: ویژگی‌هایی مانند `font-family`, `font-size`, `font-weight` برای کنترل نوشتار.
- فاصله: ویژگی‌هایی مانند `margin` و `padding` برای کنترل فاصله‌ها.
- پس‌زمینه: ویژگی‌های مختلفی مانند `background-color`, `background-image` برای تنظیم پس‌زمینه.
- مرزها: ویژگی‌های `border`, `border-radius` برای طراحی مرزها.
5. مدل جعبه (Box Model)
یکی از مفاهیم اساسی در CSS مدل جعبه است. هر عنصر در CSS به عنوان یک "جعبه" در نظر گرفته می‌شود که شامل محتوا، padding، border و margin است:
- محتوا: محتوای واقعی عنصر.
- padding: فضای بین محتوا و مرز.
- border: خطی که دور عنصر قرار می‌گیرد.
- margin: فضای خارج از عنصر که آن را از دیگر عناصر جدا می‌کند.
6. ترتیب و ارثبری
CSS از یک سیستم "cascade" استفاده می‌کند که به معنی این است که اگر چند قاعده CSS برای یک عنصر خاص وجود داشته باشد، مرورگر یکی از آن‌ها را انتخاب می‌کند. ارثبری به این معنی است که برخی از ویژگی‌ها می‌توانند از عناصر پدر به فرزندان منتقل شوند.
7. رسانه‌های چندگانه (Media Queries)
CSS به توسعه‌دهندگان اجازه می‌دهد تا استایل‌ها را بر اساس ویژگی‌های مختلف دستگاه‌ها، مانند اندازه صفحه نمایش، تغییر دهند. این ویژگی به ایجاد طراحی‌های واکنش‌گرا کمک می‌کند.
مثال:
```css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
این قاعده CSS می‌گوید که اگر عرض صفحه نمایش 600 پیکسل یا کمتر باشد، رنگ پس‌زمینه به آبی روشن تغییر کند.
8. CSS در عمل
در یک پروژه وب، CSS معمولاً در یکی از سه حالت زیر استفاده می‌شود:
1. CSS درون‌خطی: که در آن CSS به صورت مستقیم درون تگ HTML نوشته می‌شود.
```html
<p style="color:red;">This is a paragraph.</p>
```
2. CSS داخلی: که در آن CSS درون تگ `<style>` در `<head>` صفحه نوشته می‌شود.
```html
<style>
p {
color: red;
}
</style>
```
3. CSS خارجی: که در آن CSS در فایل‌های جداگانه ذخیره شده و با تگ `<link>` به صفحه HTML متصل می‌شود.
```html
<link rel="stylesheet" type="text/css" href="styles.css">
```
با پیشرفت CSS، مفاهیم و ویژگی‌های پیشرفته‌تری نیز وارد آن شدند:
- CSS Grid: سیستمی برای طراحی و چیدمان عناصر در محیط دو بعدی.
- Flexbox: مدلی برای چیدمان عناصر در یک بعد، که به لایه‌بندی و تنظیم فضا کمک می‌کند.
- ترانزیشن‌ها و انیمیشن‌ها: برای ایجاد اثرات و تحرکات بصری زیبا در صفحات وب.
10. نکات بهینه‌سازی CSS
- Minification: کاهش اندازه فایل CSS با حذف فضاها و کامنت‌ها.
- Combining Files: ادغام چند فایل CSS به یک فایل برای کاهش درخواست‌های HTTP.
- Caching: استفاده از ویژگی‌های کش مرورگر برای کاهش بارگذاری دوباره فایل‌های CSS.
CSS ابزاری قدرتمند برای طراحی وب است که به توسعه‌دهندگان این امکان را می‌دهد که صفحات وب زیبا و کاربرپسند بسازند. با یادگیری و تسلط بر CSS، می‌توانید تجربه کاربری بهتری را برای بازدیدکنندگان وب‌سایت خود فراهم کنید و در همچنین در کار خود در توسعه وب حرفه‌ای‌تر عمل کنید. CSS نه تنها به طراحی، بلکه به عملکرد و ساختار صفحات وب نیز تأثیر می‌گذارد و بنابراین، داشتن دانش عمیق در مورد آن برای هر توسعه‌دهنده وب ضروری است.
1.
یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
2.
علت اختصاص صفت Cascading به معنی "آبشاری" به این زبان این است که قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند.
3.
سی اس اس یک زبان استایل دهی است.
4.
از سی اس اس برای استایل دادن به صفحه اچ تی ام ال خود استفاده می کنیم.
5. هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد.
CSS که مخفف Cascading Style Sheets است، یک زبان stylesheet محسوب می‌شود که به وب‌سایت‌ها این امکان را می‌دهد که نحوه‌ی نمایش محتوا در مرورگرها به صورت بصری درآید.
Css به توسعه‌دهندگان وب این امکان را می‌دهد تا طراحی و ظاهر صفحات وب را از محتوای صفحات جدا کنند. این ویژگی باعث افزایش انعطاف‌پذیری و قابل نگهداری بودن کد وب‌سایت‌ها می‌شود.