CSS یک زبان استایل‌دهی است که برای زیباسازی و تنظیم ظاهر صفحات وب استفاده می‌شود. در این مقاله، روش‌های مختلف استفاده از CSS برای طراحی وب را بررسی می‌کنیم.
مقدمه:
چگونه CSS ظاهر صفحات وب را تغییر می‌دهد!
ابتدا توضیح داده شده است که HTML برای ساختاردهی محتوا استفاده می‌شود، اما برای زیباسازی و استایل‌دهی به این محتوا، از CSS استفاده می‌کنیم. CSS یک شیوه‌نامه است که شامل مجموعه‌ای از قوانین (یا “رول‌ها”) است که برای استایل‌دهی به المان‌ها به کار می‌روند. در CSS هر “رول” (قانون) از دو قسمت اصلی تشکیل شده است: انتخاب‌گر (Selector) و اعلان‌ها (Declarations).
- انتخاب‌گر (Selector): این بخش برای انتخاب المان‌هایی از صفحه است که می‌خواهیم استایل بدهیم. مثلاً اگر بخواهیم استایل یک تگ <div> را تغییر دهیم، از انتخاب‌گر div استفاده می‌کنیم.
- اعلان‌ها (Declarations): این بخش شامل ویژگی‌ها و مقادیری است که می‌خواهیم به المان اعمال کنیم. برای مثال، ویژگی color می‌تواند مقدار “orange” داشته باشد که باعث می‌شود رنگ متن درون یک <div> نارنجی شود.
توضیحات:
به طور کلی، CSS از جفت‌های کلید-مقدار (property-value pairs) برای اعمال استایل‌ها استفاده می‌کند. برای مثال، ویژگی color می‌تواند مقداری مانند “orange” داشته باشد، یا ویژگی margin می‌تواند مقدار ۲۰ پیکسل داشته باشد.
در نهایت، این قوانین می‌توانند در داخل HTML استفاده شوند، اما بهترین روش این است که CSS در یک فایل جداگانه به نام فایل شیوه‌نامه خارجی (External Stylesheet) قرار گیرد. در این روش، تغییرات در یک فایل CSS تأثیرات خود را روی تمام صفحات وبی که آن فایل را لینک کرده‌اند اعمال می‌کند، که این کار نگهداری کد را آسان‌تر می‌کند.
نحوه استفاده از CSS:
- اضافه کردن CSS به صورت داخلی داخل HTML: در این روش، می‌توانیم داخل تگ <style> در قسمت <head> کدهای CSS را قرار دهیم. برای مثال، برای تغییر رنگ تگ‌های <h1> به نارنجی، می‌توانیم از دستور color: orange; استفاده کنیم.
- استفاده از فایل شیوه‌نامه خارجی (External Stylesheet): این روش به ما این امکان را می‌دهد که یک فایل CSS جداگانه ایجاد کنیم و آن را در داخل صفحه HTML لینک کنیم. این روش برای مدیریت استایل‌ها در سایت‌های بزرگتر که چندین صفحه دارند، بسیار مفید است.
مثال‌هایی از ویژگی‌های CSS:
- ویژگی background-color برای تغییر رنگ پس‌زمینه، مثل background-color: slategray;.
- ویژگی font-size برای تغییر اندازه فونت، مثل font-size: 20px;.
- ویژگی text-decoration برای اضافه یا حذف کردن ویژگی‌هایی مانند خط‌خورده (line-through) یا زیرخط‌دار (underline) برای متن.
- ویژگی font-family برای تعیین فونت‌های مختلف مثل Arial یا Times New Roman.
برای یادگیری بهتر کد های زیر را امتحان کنید.
:HTML
<!DOCTYPE html>
<html lang=”fa”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>مثال CSS</title>
<link rel=”stylesheet” href=”styles.css”> <!– لینک به فایل CSS –>
</head>
<body>
<h1>سلام به وب‌سایت من!</h1>
<p>این یک پاراگراف است که به رنگ خاکی خواهد بود.</p>
<div>
<h2>عنوان دوم</h2>
<p>این پاراگراف داخل یک <code>div</code> است که پس‌زمینه‌اش خاکی است.</p>
</div>
</body>
</html>
:CSS
/* استایل برای تگ h1 */
h1 {
color: orange; /* رنگ متن را نارنجی می‌کند */
font-size: 36px; /* اندازه فونت را بزرگتر می‌کند */
}
/* استایل برای تگ p */
p {
color: slategray; /* رنگ متن را خاکی می‌کند */
font-size: 18px; /* اندازه فونت را کوچک‌تر می‌کند */
}
/* استایل برای div */
div {
background-color: lightgray; /* پس‌زمینه div را خاکی می‌کند */
padding: 20px; /* فضای داخلی div را بیشتر می‌کند */
}
/* استایل برای تگ h2 داخل div */
div h2 {
font-family: Arial, sans-serif; /* چگونه CSSفونت را به Arial تغییر می‌دهد */
text-decoration: underline; /*چگونه CSS خط زیر متن می‌اندازد */
}
در نهایت، نکته‌ای قابل توجه در این جلسه این است که که هر زمان خواسته باشیم ویژگی‌ها یا استایل‌ها را تغییر دهیم، بهتر است از شیوه‌نامه‌های خارجی استفاده کنیم تا به راحتی بتوانیم تغییرات را در یک فایل انجام دهیم و این تغییرات در تمام صفحات سایت اعمال شود.
برای مشاهده و دسترسی به مطالب بیشتر بر روی اینجا کلیک کنید.
