آموزش مقدماتی CSS؛ اولین استایل و اتصال به HTML | درس 21

درس 21 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

اگر پروژه نهایی HTML در درس 20 را ساخته اید، نقطه شروع مناسبی دارید. در این جلسه ابتدا روی یک صفحه کوتاه تمرین می کنیم تا خطاها را راحت تر پیدا کنیم؛ سپس می توانید همین روش اتصال فایل را در پروژه قبلی به کار ببرید.

در پایان درس 21 چه چیزی می سازیم؟

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

• نقش CSS و تفاوت آن با HTML را توضیح می دهید.
• یک قانون ساده CSS را می خوانید و می نویسید.
• فایل style.css را به index.html متصل می کنید.
• تفاوت روش خارجی، داخلی و درون خطی را تشخیص می دهید.
• مشکل مسیر فایل و چند خطای رایج نوشتاری را بررسی می کنید.

CSS چیست و چه نقشی در صفحه دارد؟

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

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

اگر فایل CSS را از صفحه جدا کنیم، مرورگر همچنان متن و اجزای HTML را نمایش می دهد؛ البته با ظاهر پیش فرض خودش. بنابراین CSS جای ساختار درست، متن جایگزین تصویر و برچسب فرم را نمی گیرد.

ساختار یک قانون CSS: انتخابگر، ویژگی و مقدار

قانون زیر رنگ تمام عناصر h1 صفحه را آبی تیره و اندازه نوشته آن ها را 32 پیکسل می کند:

h1 {
  color: #075985;
  font-size: 32px;
}

بعد از نام ویژگی علامت دونقطه قرار می گیرد. اعلان ها را با نقطه ویرگول از هم جدا می کنیم. نوشتن نقطه ویرگول بعد از آخرین اعلان هم عادت مناسبی است؛ چون افزودن اعلان بعدی را ساده تر می کند. نام ویژگی ها، انتخابگرهای این مثال و عددها را با حروف و رقم های انگلیسی بنویسید.

آکولاد باز و بسته را با پرانتز یا علامت های کوچک تر و بزرگ تر اشتباه نگیرید. این قانون در فایل CSS به تگ style نیاز ندارد. وقتی کد را درون HTML می نویسیم، روش قرار دادن آن متفاوت است که کمی جلوتر می بینیم.

اتصال فایل CSS خارجی به HTML؛ روش اصلی پروژه

در پوشه پروژه دو فایل کنار هم بسازید: index.html و style.css. فایل اول سند HTML و فایل دوم استایل ها را نگه می دارد. پسوند واقعی فایل را بررسی کنید؛ فایل style.css.txt با style.css تفاوت دارد.

برای مرور روش ساخت و ذخیره فایل ها، درس ساختار پوشه های پروژه را ببینید. اکنون داخل بخش head سند، این خط را اضافه کنید؛ جای head را در درس ساختار سند HTML توضیح داده ایم.

<link rel="stylesheet" href="style.css">

ویژگی rel="stylesheet" نوع ارتباط فایل را مشخص می کند و href مسیر آن را می دهد. در این مثال فایل CSS کنار فایل HTML قرار دارد؛ بنابراین نام فایل کافی است. اگر فایل را داخل پوشه css بگذارید، مسیر به css/style.css تغییر می کند. در HTML برای عنصر link تگ پایانی نمی نویسیم.

مسیر فایل نسبت به سند HTML محاسبه می شود. این همان منطقی است که در آموزش مسیرهای نسبی و مطلق به کار بردیم. از مسیر مخصوص رایانه خودتان مثل درایوهای ویندوز برای فایل پروژه استفاده نکنید؛ چنین مسیری روی دستگاه دیگر کار نمی کند.

کد کامل فایل index.html

این کد را در index.html قرار دهید. فایل را با کدگذاری UTF-8 ذخیره کنید تا متن فارسی درست نمایش داده شود. دستور viewport نیز به مرورگر موبایل کمک می کند عرض صفحه را متناسب با دستگاه در نظر بگیرد؛ برای طراحی کامل واکنش گرا، در درس های بعد قواعد اختصاصی می نویسیم.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اولین صفحه من با CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <p>تمرین درس 21 ارومیا دیزاین</p>
    <h1>اولین صفحه من با CSS</h1>
  </header>
  <main>
    <section aria-labelledby="services-title">
      <h2 id="services-title">خدمات من</h2>
      <p>من طراحی وب را با ساخت صفحه های ساده و تمرین قدم به قدم یاد می گیرم.</p>
      <ul>
        <li>ساخت ساختار صفحه با HTML</li>
        <li>طراحی ظاهر صفحه با CSS</li>
        <li>بررسی خوانایی و کارکرد لینک ها</li>
      </ul>
      <a href="#practice">رفتن به بخش تمرین</a>
    </section>
    <section id="practice" aria-labelledby="practice-title">
      <h2 id="practice-title">تمرین امروز</h2>
      <p>رنگ عنوان اصلی را تغییر بده و نتیجه را در مرورگر ببین.</p>
    </section>
  </main>
  <footer>
    <p>این صفحه یک پروژه آموزشی است.</p>
  </footer>
</body>
</html>

در این نمونه، عناصر معنایی header، main و footer نقش بخش ها را روشن می کنند. لینک «رفتن به بخش تمرین» هم به شناسه بخش دوم اشاره می کند. ظاهر را تغییر می دهیم، اما ساختار و مقصد لینک را حفظ می کنیم.

کد کامل فایل style.css

کد زیر را در style.css ذخیره کنید. سپس index.html را در مرورگر باز کنید. در این فایل فقط CSS می نویسیم؛ تگ های HTML را وارد آن نکنید.

/* ظاهر پایه صفحه */
body {
  background-color: #f1f5f9;
  color: #1e293b;
  font-family: Tahoma, sans-serif;
  line-height: 1.8;
  margin: 0;
  padding: 24px;
}

/* عنوان اصلی */
h1 {
  color: #075985;
  font-size: 32px;
}

/* بخش های محتوایی */
section {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

h2 {
  color: #334155;
  font-size: 24px;
}

a {
  color: #075985;
  text-decoration: underline;
}

footer {
  font-size: 14px;
}

کدام دستور چه تغییری ایجاد می کند؟

• background-color رنگ پس زمینه عنصر را تعیین می کند؛ با رنگ خود نوشته تفاوت دارد.
• color رنگ متن را تعیین می کند.
• font-family فونت پیشنهادی و گزینه جایگزین را مشخص می کند. اگر Tahoma روی دستگاه موجود نباشد، مرورگر از خانواده عمومی sans-serif استفاده می کند.
• line-height: 1.8 ارتفاع خط را به صورت ضریبی از اندازه فونت تعیین می کند؛ در این مقدار واحد ننوشته ایم.
• padding فاصله داخل عنصر و margin فاصله بیرون آن را تنظیم می کند.
• border کادر بخش را می سازد و border-radius گوشه های آن را گرد می کند.

فعلاً لازم نیست تمام این ویژگی ها را حفظ کنید. یک دستور را تغییر دهید، نتیجه را ببینید و سپس سراغ دستور بعدی بروید. فاصله ها و مدل جعبه را در درس های اختصاصی با تمرین بیشتر بررسی می کنیم.

انتخابگر section روی هر دو بخش نمونه اثر می گذارد. این رفتار عمدی است. اگر فقط یکی از آن ها را بخواهیم تغییر دهیم، باید انتخابگر دقیق تری بسازیم؛ کلاس، شناسه و انتخابگرهای ترکیبی موضوع جلسه بعد هستند.

سه روش نوشتن CSS و تفاوت کاربرد آن ها

نمونه CSS داخلی

اگر برای آزمایش کوتاه فایل جدا نمی سازید، می توانید این قطعه را داخل head بگذارید. برای دنبال کردن پروژه این درس، همان فایل خارجی را نگه دارید؛ همزمان چند روش را اضافه نکنید تا منشأ هر تغییر روشن بماند.

<style>
  h1 {
    color: #075985;
  }
</style>

نمونه CSS درون خطی

در این روش فقط اعلان را در ویژگی style می نویسیم؛ انتخابگر و آکولاد داخل مقدار این ویژگی قرار نمی گیرند.

<p style="color: #075985;">این متن آبی تیره است.</p>

در پروژه های این دوره، فایل خارجی را انتخاب می کنیم چون کد ظاهر در یک محل قرار می گیرد. روش داخلی یا درون خطی به خودی خود به معنی خطا نیست؛ انتخاب آن ها به شرایط بستگی دارد. همچنین قانونی کلی با عنوان «CSS داخلی همیشه از خارجی قوی تر است» نداریم؛ مرورگر تعارض قوانین را با سازوکار آبشار و اولویت ها حل می کند که بعداً جداگانه یاد می گیریم.

توضیح یا کامنت در CSS چگونه نوشته می شود؟

برای توضیح کوتاه کد از /* ... */ استفاده کنید. مرورگر این توضیح را به عنوان دستور استایل اجرا نمی کند. علامت های کامنت HTML در فایل CSS مناسب نیستند؛ // هم کامنت استاندارد CSS نیست.

/* رنگ عنوان اصلی صفحه */
h1 {
  color: #075985;
}

کامنت را برای توضیح دلیل یک تصمیم بنویسید؛ لازم نیست برای هر خط، همان نام ویژگی را دوباره تکرار کنید. در فایل نمونه، کامنت ها بخش های اصلی را جدا می کنند تا پیدا کردن قانون ها ساده شود.

چرا CSS روی صفحه اعمال نمی شود؟

وقتی نتیجه را نمی بینید، قبل از افزودن کد بیشتر، این بررسی ها را به ترتیب انجام دهید:

1. ذخیره فایل: هم HTML و هم CSS را ذخیره کنید و صفحه مرورگر را دوباره بارگذاری کنید.
2. نام و پسوند: نام واقعی فایل را ببینید. style.css، styles.css و Style.css را یکسان فرض نکنید؛ بزرگی حروف در بسیاری از میزبان ها اهمیت دارد.
3. مسیر: محل فایل CSS را با مقدار href مقایسه کنید. اگر پوشه ساخته اید، نام پوشه هم باید در مسیر باشد.
4. ارتباط stylesheet: املای rel و مقدار stylesheet را کنترل کنید.
5. نوشتار قانون: دونقطه، نقطه ویرگول، آکولادها و واحدها را بررسی کنید. برای این مثال، 32px را یکپارچه بنویسید.
6. وجود عنصر: اگر برای h1 قانون نوشته اید، سند باید عنصر h1 داشته باشد.

برای آزمایش اتصال، موقتاً رنگ پس زمینه body را تغییر دهید. اگر هیچ تغییری ندیدید، ابتدا سراغ ذخیره و مسیر بروید. اگر فقط یک دستور کار نمی کند، همان اعلان را بررسی کنید. اگر هنوز مشکل باقی بود، در ابزار توسعه مرورگر بخش Network و Styles را بررسی کنید: آیا فایل بارگذاری شده و آیا قانون روی عنصر دیده می شود؟

مرورگر معمولاً یک اعلان نامعتبر را کنار می گذارد؛ این به معنی بی اثر شدن قطعی تمام فایل نیست. با این حال، جا افتادن آکولاد یا جداکننده می تواند روی تفسیر بخشی از کد اثر بگذارد. کد را کوتاه و منظم نگه دارید تا محل مشکل روشن باشد.

تمرین درس 21؛ نتیجه را خودتان تغییر دهید

1. در قانون h1 رنگ را به #166534 تغییر دهید. نتیجه باید یک عنوان سبز تیره باشد.
2. اندازه h1 را به 36px تغییر دهید.
3. فاصله داخلی section را از 20px به 28px برسانید و فضای اطراف متن را مقایسه کنید.
4. رنگ پس زمینه body را به #fff7ed تغییر دهید.
5. نام فایل CSS را موقتاً عوض کنید و ببینید با قطع ارتباط فایل، ظاهر صفحه چگونه می شود؛ سپس نام و مسیر صحیح را برگردانید.

روش انجام تمرین: در هر مرحله فقط یک تغییر بدهید، ذخیره کنید و مرورگر را دوباره بارگذاری کنید. این کار کمک می کند اثر هر ویژگی را از روی نتیجه تشخیص دهید. برای بررسی نمونه پاسخ، بخش زیر را باز کنید.

h1 {
  color: #166534;
  font-size: 36px;
}

section {
  background-color: #ffffff;
  padding: 28px;
  margin-bottom: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

چک لیست بررسی پروژه

• دو فایل index.html و style.css کنار هم قرار دارند.
• عنوان اصلی رنگ آبی تیره دارد و هر دو بخش پس زمینه سفید دارند.
• متن فارسی و جهت راست به چپ درست نمایش داده می شوند.
• لینک بخش تمرین همچنان به قسمت مربوط می رود.
• با تغییر و ذخیره CSS، نتیجه در مرورگر تغییر می کند.
• زیرخط لینک حفظ شده و رنگ تنها نشانه تشخیص آن نیست.

در درس دسترس پذیری HTML یاد گرفتیم ظاهر نباید کارکرد صفحه را مختل کند. هنگام تغییر رنگ، خوانایی نوشته را بررسی کنید و نشانه های تمرکز صفحه کلید را حذف نکنید. به همان اندازه که زیبایی مهم است، قابل استفاده بودن صفحه هم اهمیت دارد.

پرسش های رایج درباره شروع CSS

برای اجرای CSS به نصب برنامه خاصی نیاز داریم؟

برای این پروژه، یک ویرایشگر متن و مرورگر کافی است. فایل HTML را باز می کنید و مرورگر CSS متصل به آن را می خواند. به سرور یا نصب افزونه وردپرس نیاز ندارید.

آیا در فایل style.css باید تگ style بنویسیم؟

خیر. فایل خارجی فقط کد CSS دارد. عنصر style زمانی کاربرد دارد که CSS داخلی را داخل سند HTML قرار می دهید.

آیا CSS جای HTML را می گیرد؟

خیر. همچنان محتوا و ساختار را با HTML می نویسیم و ظاهر آن ها را با CSS کنترل می کنیم.

چرا ظاهر نمونه روی دستگاه های مختلف کمی فرق دارد؟

فونت های نصب شده و تنظیمات پیش فرض مرورگر می توانند تفاوت ایجاد کنند. در این درس از فونت محلی و خانواده جایگزین استفاده می کنیم؛ فونت وب و تنظیم ظاهر جزئی را در مراحل بعد بررسی می کنیم.

اگر فایل CSS را تغییر دادم و نتیجه ثابت ماند چه کنم؟

ابتدا فایل را ذخیره کنید و مطمئن شوید همان index.html مربوط به پروژه را باز کرده اید. سپس مسیر، نام فایل و نوشتار قانون را بررسی کنید. در صورت نیاز ابزار توسعه مرورگر را برای مشاهده فایل بارگذاری شده و قانون اعمال شده باز کنید.

ادامه مسیر آموزش

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

برای مرور مسیر، فهرست آموزش HTML و CSS ارومیا دیزاین را ببینید یا به درس 20 و پروژه نهایی HTML برگردید.