فرادرسآغاز کار با CSS — آموزش CSS (بخش دوم)
در این مقاله یک سند ساده HTML را در نظر می‌گیریم و CSS را روی آن اعمال کنیم. در این مسیر آغاز کار با CSS با برخی نکات عملی در مورد این زبان آشنا خواهیم شد. پیش‌نیاز مطالعه این راهنما داشتن سواد مقدماتی رایانه، نصب برخی نرم‌افزارهای اولیه، دانش ابتدایی از کار با فایل و آشنایی با مبانی HTML است. هدف از مطالعه این مقاله درک مبانی پیوند دادن یک سند CSS به فایل HTML و کسب توانایی قالب‌بندی متن ساده با CSS است. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
آغاز کار با کدهای HTML
نقطه آغاز به کار ما یک سند HTML است.
اگر می‌خواهید روی رایانه خود کار کنید، می‌توانید کدهای زیر را کپی کنید. این کد را در فایلی به نام index.html در یک پوشه در رایانه خود ذخیره کنید:
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>Getting started with CSS</title>
6</head>
7
8<body>
9
10 <h1>I am a level one heading</h1>
11
12 <p>This is a paragraph of text. In the text is a <span>span element</span>
13and also a <a href="http://example.com">link</a>.</p>
14
15 <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
16
17 <ul>
18 <li>Item one</li>
19 <li>Item two</li>
20 <li>Item <em>three</em></li>
21 </ul>
22
23</body>
24
25</html>نکته: اگر این مقاله را روی دستگاه یا محیطی می‌خوانید که امکان ایجاد فایل به سادگی برایتان میسر نیست، ادیتورهای کد زنده‌ای در ادامه معرفی شده‌اند که می‌توانید کدهای نمونه را مستقیماً درون صفحه بنویسید.
افزودن CSS به سند
نخستین کاری که باید انجام دهیم این است که به سند HTML اعلام کنیم می‌خواهیم از برخی قواعد CSS استفاده کند. سه روش مختلف برای اعمال CSS روی یک سند HTML وجود دارند که به طور مکرر با آن‌ها مواجه خواهید شد، اما فعلاً به متداول‌ترین و مفیدترین مفید روش برای انجام این کار می‌پردازیم که پیوند دادن CSS از طریق بخش head سند HTML است.
یک فایل در همان پوشه سند HTML ایجاد کنید و آن را به نام styles.css ذخیره نمایید. پسوند css. نشان می‌دهد که این یک فایل css است. برای پیوند دادن styles.css به index.html باید خط کد زیر را جایی درون بخش <head> سند HTML درج کنید:
1<link rel="stylesheet" href="styles.css">عنصر <link> با استفاده از خصوصیت rel به مرورگر اعلام می‌کند که یک استایل‌شیت داریم و موقعیت این استایل‌شیت نیز در مقدار خصوصیت href تعیین شده است. کارکرد css را می‌توان با افزودن یک قاعده به style.css امتحان کرد. با استفاده از ادیتور کد، خطوط زیر را به فایل CSS اضافه کنید:
1h1 {
2 color: red;
3}فایل‌های HTML و CSS خود را اضافه کنید و صفحه را در مرورگر وب مجدداً بارگذاری نمایید. عنوان سطح اول در ابتدای سند باید اینک به رنگ قرمز درآمده باشد. اگر این اتفاق افتاد نشان می‌دهد که با موفقیت توانسته‌اید CSS را روی سند HTML اعمال کنید. اگر این اتفاق نیفتاده است باید با دقت بررسی کنید که آیا همه چیز به درستی نوشته شده است یا نه.
می‌توانید به کار روی style.css به صورت لوکال ادامه دهید و یا این که می‌توانید از ادیتور تعاملی که در ادامه ارائه شده است در این راهنما استفاده کنید. ادیتور تعاملی طوری عمل می‌کند که گویی CSS در پنل اول به سند HTML تبدیل یافته است و این وضعیت دقیقاً مانند حالتی است که قبلاً بررسی کردیم.
استایل‌بندی عناصر HTML
اینک که عنوان اصلی به رنگ قرمز درآمده متوجه شدیم که می‌توانیم عناصر HTML را هدف‌گیری کرده و استایل‌بندی کنیم. این کار از طریق هدف‌گیری یک سلکتور عنصر انجام می‌گیرد و این سلکتوری است که مستقیماً با نام عناصر HTML تطبیق می‌یابد. برای هدف‌گیری همه پاراگراف‌های موجود در سند می‌توان از سلکتور p استفاده کرد. برای تبدیل همه پاراگراف‌ها به رنگ سبز می‌توانیم به صورت زیر عمل کنیم:
1p {
2 color: green;
3}می‌توانید چندین سلکتور را به طور همزمان هدف‌گیری کنید و یا آن‌ها را با کاما از هم جدا کنید. اگر می‌خواهید همه پاراگراف‌ها و همه آیتم‌های لیستی به رنگ سبز دربیایند باید به صورت زیر عمل کنیم:
1p, li {
2 color: green;
3}این حالت را می‌توانید در ادیتور کد زیر امتحان کنید:
تغییر دادن رفتار پیش‌فرض عناصر
زمانی که به یک سند HTML کاملاً نشانه‌گذاری شده نگاه می‌کنیم، حتی وقتی چیزی به سادگی مثال مطرح‌شده در این نوشته باشد، می‌توانیم ببینیم که مرورگر چگونه HTML را با افزودن استایل‌بندی خواناتر می‌سازد. عناوین بزرگ و درشت هستند و لیست‌ها bullet دارند. دلیل این امر آن است که مرورگرها استایل‌شیت‌های داخلی دارند که شامل استایل‌های پیش‌فرض هستند و به صورت پیش‌فرض روی همه صفحه‌ها اعمال می‌کنند. بدون وجود این استایل‌های پیش‌فرض همه متن‌ها روی هم انباشته می‌شدند و باید همه چیز را از صفر خودمان استایل‌بندی می‌کردیم. همه مرورگرهای مدرن محتوای HTML را به صورت پیش‌فرض به روش نسبتاً مشابهی نمایش می‌دهند.
با این حال ما در اغلب موارد چیزی بیشتر از آن چه مرورگر ارائه می‌کنید، می‌خواهیم. این وضعیت از طریق انتخاب عنصر HTML و اعمال CSS روی شیوه نمایش آن ممکن است. یک مثال خوب از این وضعیت <ul> است که یک لیست نامرتب است. این لیست دارای bullet-هایی است و اگر بخواهیم آن bullet-ها را نداشته باشیم، می‌توانیم به صورت زیر حذف کنیم:
1li {
2 list-style-type: none;
3}اینک کد فوق را به CSS خود اضافه کنید. مشخصه list-style-type یک مشخصه خوب است و می‌توانیم با نگاه کردن به وب‌سایت MDN ببینیم که چه مقادیری را پشتیبانی می‌کند. بنابراین نگاهی به این صفحه (+) بیندازید تا یک نمونه تعاملی در ابتدای صفحه مشاهده کنید که می‌توانید مقادیر مختلفی در آن وارد کنید. سپس همه مقادیر ممکن در ادامه صفحه توضیح داده شده‌اند.
با نگاه کردن به صفحه فوق متوجه می‌شویم که علاوه بر حذف bullet-های لیست می‌توان آن‌ها را تغییر داد. مثلاً می‌توان از bullet های مربعی با به‌کارگیری مقدار square استفاده کرد.
افزودن یک کلاس
تا به این جا عناصر را بر مبنای نام‌های عنصر HTML مربوطه استایل‌بندی کردیم. این وضعیت تا زمانی که بخواهیم همه عناصر از یک نوع را در سند به صورت یکسانی استایل‌بندی کنیم، کارآمد خواهد بود. اما در اغلب موارد این وضعیت صادق نیست و می‌خواهیم روشی برای انتخاب یک زیرمجموعه از عناصر بدون تغییر دادن موارد دیگر پیدا کنیم. رایج‌ترین روش برای انجام این کار افزودن یک کلاس به عنصر HTML و هدف‌گیری آن کلاس است.
در سند HTML یک خصوصیت class به آیتم لیست دوم اضافه کنید. اینک لیست شما باید به صورت زیر باشد:
1<ul>
2 <li>Item one</li>
3 <li class="special">Item two</li>
4 <li>Item <em>three</em></li>
5</ul>در CSS می‌توانید آن کلاس special را با ایجاد یک سلکتور که با کاراکتر نقطه آغاز می‌شود هدف‌گیری کنید. کد زیر را به فایل CSS اضافه کنید:
1.special {
2 color: orange;
3 font-weight: bold;
4}صفحه را ذخیره و رفرش کنید تا نتیجه را ببینید. کلاس special را می‌توانید روی هر عنصری در صفحه که می‌خواهید ظاهر مشابه داشته باشد اعمال کنید. برای نمونه ممکن است بخواهید <span> در پاراگراف نیز به رنگ نارنجی و درشت باشد. یک class به صورت special به آن اضافه کنید و سپس صفحه را بارگذاری مجدد بکنید تا ببینید چه تغییراتی ایجاد می‌شود.
برخی اوقات قواعدی با یک سلکتور می‌بینید که سلکتور عنصر HTML را همراه با کلاس لیست می‌کند:
1li.special {
2 color: orange;
3 font-weight: bold;
4}این ساختار به آن معنی است که:
«هر عنصر li که دارای کلاس special است را انتخاب کن»
اگر می‌خواهید این کار را انجام دهید، دیگر نمی‌توانید کلاس را روی یک <span> یا عنصر دیگری با افزودن کلاس به آن اعمال کنید و باید آن عنصر را به لیست سلکتورها اضافه کنید.
1li.special,
2span.special {
3 color: orange;
4 font-weight: bold;
5}همان طور که حدس می‌زنید برخی کلاس‌ها ممکن است روی عناصر زیادی اعمال شوند و قطعاً دوست ندارید هر بار که قرار است چیز جدیدی به CSS اضافه شود آن را ویر‌ایش کنید. از این رو گاهی اوقات باید عنصر را کنار زد و صرفاً به کلاس مربوطه اشاره کرد، مگر این که بخواهید برخی قواعد خاص برای یک عنصر منفرد ایجاد کنید و شاید بخواهید مطمئن شوید که روی چیزهای دیگر اعمال نمی‌شوند.
استایل‌بندی عناصر بر اساس موقعیت آن‌ها در سند
مواردی وجود دارند که می‌خواهیم چیزی بر اساس این که در کجای سند قرار دارد به روش متفاوتی نمایش پیدا کند. به این منظور چند سلکتور وجود دارند، اما فعلاً دو مورد از آن‌ها را بررسی می‌کنیم. در سند ما دو عنصر <em> وجود دارند که یکی درون پاراگراف و دیگری درون آیتم لیست است. برای این که صرفاً آن عنصر <em> که درون یک عنصر <li> قرار دارد را انتخاب کنیم از یک سلکتور به نام descendant combinatory استفاده می‌کنیم که صرفاً شکل یک فاصله بین دو سلکتور دیگر را می‌گیرد.
قاعده زیر را به استایل‌شیت اضافه کنید:
1li em {
2 color: rebeccapurple;
3}این سلکتور هر عنصر <em> که درون یک <li> قرار داشته باشد را انتخاب می‌کند. بنابراین در مثال فوق متوجه می‌شوید که <em> درون آیتم لیست به رنگ بنفش درمی‌آید، اما آن که درون پاراگراف قرار دارد تغییری پیدا نمی‌کند.
در برخی موارد دیگر این احتمال وجود دارد که بخواهیم پاراگرافی را که درست پس از عنوان در همان سطح از سلسله‌مراتب در HTML آمده است را استایل‌بندی کنیم. به این منظور یک علامت + بین سلکتورها قرار می‌دهیم. این سلکتور adjacent sibling combinatory نام دارد. قاعده زیر را به استایل‌شیت موجود اضافه کنید:
1h1 + p {
2 font-size: 200%;
3}مثال تعاملی زیر شامل دو قاعده فوق است. می‌توانید تلاش کنید یک قاعده اضافه کنید تا یک span در صورتی که درون پاراگراف قرار داشته باشد، به رنگ قرمز در آید. اگر این کار را به درستی انجام دهید آن span که درون پاراگراف اول قرار دارد به رنگ قرمز درمی‌آید، اما رنگ آن که در آیتم لیست اول قرار دارد تغییری پیدا نمی‌کند.
نکته: چنان که دیدیم CSS چندین روش برای هدف‌گیری عناصر در اختیار ما قرار می‌دهد. ما تا به این جا صرفاً موارد معدودی را بررسی کرده‌ایم. در یکی از مقالات آتی از این سری مقالات که به طور کامل به مبحث سلکتورها اختصاص دارد، در این مورد به طور مفصل صحبت خواهیم کرد.
استایل‌بندی عناصر بر اساس حالت
نوع آخری از استایل‌بندی که در این راهنما برسی می‌کنیم، امکان استایل‌بندی عناصر بر اساس حالتشان است. یک مثال سرراست از این وضعیت زمانی که است که می‌خواهیم لینک‌ها را استایل‌بندی کنیم. هنگامی که یک لینک را استایل‌بندی می‌کنیم، باید یک عنصر <a> را هدف‌گیری کنیم. این عنصر بسته به این که بازدید شده باشد، یا نشده باشد، ماوس روی آن قرار گرفته باشد و یا فوکوس کیبورد روی آن منتقل شده باشد و یا در فرایند کلیک شدن قرار داشته باشد، حالت‌های مختلفی پیدا می‌کند. می‌توان از CSS برای هدف‌گیری این حالت‌های متفاوت استفاده کرد. CSS زیر لینک‌های بازدید نشده را به رنگ صورتی و لینک‌های بازدید شده را به رنگ سبز درمی‌آورد.
1a:link {
2 color: pink;
3}
4
5a:visited {
6 color: green;
7}همچنین می‌توانید ظاهر لینک را زمانی که کاربر ماوس را روی آن می‌برد عوض کنید. برای نمونه می‌تواند زیرخط آن را حذف کنید. این کار با قاعده زیر انجام می‌شود:
1a:hover {
2 text-decoration: none;
3}در مثال زیر می‌توانید مقادیر متفاوت را برای حالت‌های مختلف یک لینک بررسی کنید. ما چند قاعده در ابتدا اضافه کرده‌ایم و چنان که می‌بینید رنگ صورتی بسیار روشن است و خواندن لینک دشوار شده است. تلاش کنید رنگ آن را بهتر کنید و همچنین می‌توانید آن را به حالت درشت (bold) در بیاورید.
ما در کد فوق زیرخط لینک را زمانی که ماوس روی آن می‌رود حذف کرده‌ایم. شما می‌توانید زیرخط را از همه حالت‌های لینک بردارید. با این حال باید یادآوری کنیم که در یک سایت واقعی باید مطمئن شود که بازدیدکنندگان می‌دانند که یک لینک، لینک است. بنابراین حفظ زیرخط در حالت عادی می‌تواند سرنخ مهمی برای افراد باشد تا بفهمند می‌توانند روی برخی بخش‌های متن درون پاراگراف کلیک کنند. این رفتاری است که کاربران به آن عادت دارند. همانند هر چیز دیگری در CSS این احتمال وجود دارد که با ایجاد برخی تغییرات در سند دسترس‌پذیری آن را کاهش دهید. در ادامه برخی از بخش‌هایی که چنین مشکلی ممکن است ایجاد شود را با هم مرور می‌کنیم.
نکته: ما در این سری مقالات به طور مکرر به مبحث دسترس‌پذیری اشاره می‌کنیم. منظور ما از دسترس‌پذیری الزاماتی هستند که صفحه‌های وب باید داشته باشند تا همه افراد بتوانند آن‌ها را درک کرده و مورد استفاده قرار دهند.
کاربر بازدیدکننده وب‌سایت شما ممکن است پشت یک رایانه با ماوس یا ترک پد باشد یا از طریق یک گوشی با صفحه لمسی مراجعه کرده باشد. همچنین ممکن است از یک نرم‌افزار قرائت صفحه استفاده کند که محتوای سند را برای وی می‌خواند یا این که نیاز به متون بزرگ‌تری داشته باشند و یا صرفاً با استفاده از کیبورد به بخش‌های مختلف وب‌سایت مراجعه کند.
یک سند HTML ساده عموماً برای همه افراد دسترس‌پذیر است. زمانی که شروع به استایل‌بندی سند می‌کنید، باید نهایت تلاش خود را بکنید که دسترس‌پذیری آن را کاهش ندهید.
ترکیب سلکتورها و کامبیناتورها
لازم به ذکر است که می‌توانید چندین سلکتور و کامبیناتور را با هم ترکیب کنید. برای نمونه:
1/* selects any <span> that is inside a <p>, which is inside an <article> */
2article p span { ... }
3
4/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
5h1 + ul + p { ... }می‌توانید چندین نوع را نیز با هم ترکیب کنید. قاعده زیر را به فایل CSS اضافه کنید:
1body h1 + p .special {
2 color: yellow;
3 background-color: black;
4 padding: 5px;
5}بدین ترتیب هر عنصر که دارای یک کلاس special باشد و درون یک <p> قرار گرفته باشد و پس از یک <h1> آمده باشد و درون <body> باشد، استایل‌بندی می‌شود. در سند HTML اصلی ارائه‌شده تنها عنصر استایل‌بندی شده <"span class="special> است. اگر این موارد برایتان پیچیده به نظر می‌رسند، نگران نباشید، در بخش‌های بعدی این سری مقالات با روش‌های نوشتن کدهای CSS بیشتر آشنا خواهیم شد.
جمع‌بندی
در این راهنما نگاهی به چند روش داشتیم که با استفاده از آن‌ها می‌توانید یک سند را با بهره‌گیری از CSS استایل‌بندی کنید. این دانش را از طریق بررسی موارد بیشتر در بخش‌های بعدی این سری مقالات بیشتر توسعه خواهیم داد. با این حال شما هم‌اینک دانش کافی برای استایل‌بندی متن، به‌کارگیری CSS بر مبنای روش‌های مختلف هدف‌گیری عناصر در سند و گشتن به دنبال مشخصه‌ها و مقادیر در مستندات MDN به دست آورده‌اید. در بخش بعدی به بررسی شیوه سازماندهی CSS می‌پردازیم.
برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش طراحی سایت با HTML و CSS
- آموزش طراحی وب با CSS
- مجموعه آموزش‌های برنامهنویسی
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- نکات ایجاد انیمیشن با CSS و جاوا اسکریپت — به همراه مثال
==
