CSS یا Cascading Style Sheets زبانی است که برای تعیین ظاهر و استایل اجزای یک وب‌سایت استفاده می‌شود. با استفاده از CSS، شما قادر خواهید بود تا ظاهر و شکل ظاهری اجزای HTML از جمله متن، تصاویر، دکمه‌ها و سایر عناصر را تغییر دهید.
ورژن‌های CSS:
- CSS1: اولین ورژن CSS که در ۱۹۹۶ منتشر شد و امکانات ابتدایی استایل‌دهی را فراهم می‌کرد.
- CSS2: این ورژن در سال ۱۹۹۸ منتشر شد و قابلیت‌هایی مانند پس زمینه‌های پیشرفته، موقعیت‌دهی و انیمیشن را ارائه می‌داد.
- CSS3: این ورژن از CSS از سال ۱۹۹۹ به بعد توسعه داده شده و دارای امکانات بسیار پیشرفته‌تری مانند انیمیشن، ترنزیشن، فرم‌های پیشرفته، ترکیب‌پذیری، و خیلی امکانات دیگر است.
مزایای CSS:
- جدا کردن استایل از محتوا: CSS اجازه می‌دهد که استایل‌ها و تنظیمات ظاهری جدا از محتوای وب‌سایت قرار بگیرند که این امر به مدیریت و نگهداری آسان‌تر کمک می‌کند.
- قابلیت بازاستفاده: از طریق استفاده از کلاس‌ها و آیدی‌ها، استایل‌ها قابلیت استفاده مجدد را دارند، که کدهای CSS را کوتاه‌تر و کارآمدتر می‌کند.
- کاهش بارگذاری صفحات: با استفاده از CSS، می‌توانید اندازه فایل‌های صفحات را کاهش دهید که به بهبود سرعت بارگذاری وب‌سایت کمک می‌کند.
پیش نیازهای یادگیری CSS:
- آشنایی با HTML: برای استفاده از CSS به خوبی، باید اطلاعات کافی در مورد HTML داشته باشید، زیرا CSS برای استایل دادن به عناصر HTML استفاده می‌شود.
- آشنایی با انتخابگرها و ویژگی‌های CSS: برای کار با CSS، باید با انتخابگرها و ویژگی‌های مختلف آن آشنا باشید.
Components های CSS:
- Selectors (انتخابگرها): CSS از انتخابگرها برای انتخاب عناصر HTML برای اعمال استایل استفاده می‌کند، مانند انتخابگرهای کلاس، آیدی، تگ و …
- Properties (ویژگی‌ها): ویژگی‌های CSS مشخص می‌کنند که چگونه یک عنصر HTML استایل داده شود، مانند رنگ، اندازه، فونت، حاشیه و …
- Values (مقادیر): هر ویژگی می‌تواند مقداری داشته باشد، مانند مقادیر رنگ، اندازه‌ها، و غیره.
نمونه کد:
فایل index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Hello, CSS!</h1>
<p>This is a sample paragraph styled with CSS.</p>
<button class="btn">Click Me</button>
</div>
</body>
</html>
فایل style.css
.container {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 18px;
}
.btn {
background-color: red;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
این نمونه کد نشان می‌دهد که چگونه با استفاده از CSS، می‌توانید استایل‌های مختلفی مانند رنگ، اندازه فونت، و ترتیب محتوا را در یک صفحه وب تعیین کنید.
-
انتخابگرها (Selectors):
.container: انتخابگر کلاس برای المان با کلاسcontainer.h1: انتخابگر تگ برای عنوان اولیه (<h1>).p: انتخابگر تگ برای پاراگراف (<p>)..btn: انتخابگر کلاس برای دکمه با کلاسbtn.
-
ویژگی‌ها (Properties):
text-align: تنظیم مرکز چینی متن.background-color: تنظیم رنگ پس زمینه.padding: تنظیم فاصله داخلی (padding) برای المان.color: تنظیم رنگ متن.font-size: تنظیم اندازه فونت.border: تنظیم مرز المان.cursor: تنظیم نوع ماوس.
-
مقادیر (Values):
center: مرکز چین.#f0f0f0: یک رنگ مشخص (به صورت کد رنگ HEX).20px: مقدار فاصله داخلی (padding) در این مورد ۲۰ پیکسل.blue: رنگ آبی.green: رنگ سبز.24px: اندازه فونت ۲۴ پیکسل.18px: اندازه فونت ۱۸ پیکسل.red: رنگ قرمز.white: رنگ سفید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام