آموزش استفاده از CSS در HTML
یک صفحه ی وب، از تعداد زیادی کدهای html تشکیل شده است. برای چنیش این کدها و عناصر باید از زبان CSS استفاده کنیم. برای اینکه این موضوع را بهتر درک کنیم، اجازه دهید به یک صفحه ی html نگاهی بیاندازیم و آن را بررسی کنیم:
<html>
<head>
<title>Eric's World of Waffles</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/sheet1.css" media="all">
<style type="text/css">
@import url(sheet2.css);
</style>
</head>
<body>
<h1>Waffles!</h1>
<p style="color: gray;">The most wonderful of all breakfast foods is
the waffle—a ridged and cratered slab of home-cooked, fluffy goodness
that makes every child's heart soar with joy. And they're so easy to make!
Just a simple waffle-maker and some batter, and you're ready for a morning
of aromatic ecstasy!
</p>
</body>
</html>نتیجه ی کدهای بالا و استایل های اعمال شده در تصویر 1.4 نشان داده شده است.
(تصویر 1.4)
اکنون اجازه دهید راه های مختلف اتصال این سند html به css را بررسی کنیم.
استفاده از تگ link
ابتدا تگ link را در نظر بگیرید که به صورت زیر تعریف می شود:
<link rel="stylesheet" type="text/css" href="/sheet1.css" media="all">هدف اصلی تگ link این است که یک برگه ی استایلِ(stylesheet) سی اس اس را به یک سند html متصل کند. در تصویر 1.5 یک برگه ی استایل به نام sheet1.css به سند html متصل شده است.این برگه های استایل که بخشی از سند html نیستند و در html مورد استفاده قرار گرفته اند، برگه های استایل خارجی یا اکسترنال(external) نامیده می شوند.
برای اینکه بتوانیم با موفقیت، یک برگه ی استایل اکسترنال را در سند html بارگذاری یا لود کنیم، تگ link مربوطه باید در بخش head از سند قرار گیرد. اما نباید در داخل هیچ عنصر دیگری که در head قرار دارد قرار گیرد. این کار باعث می شود که مرورگر، برگه ی استایل مورد نظر را لود کند و از استایل های آن برای چینش سند html استفاده کند. نتیجه در تصویر 1.5 نشان داده شده است. همچنین در تصویر 1.5 با استفاده از دستور import@ یک فایل css اکسترنال به نام sheet2.css به صفحه اضافه شده است. برای ایمپورت کردن برگه های استایل، دستور import@ باید در ابتدای برگه ی استایل یا تگ style قرار گیرد. وگرنه کدها به درستی اعمال نمی شوند.
(تصویر 1.5)
حالا کدهای css ما در داخل این برگه های استایل قرار می گیرند. کدهای یکی از برگه های استایل اکسترنال ما به صورت زیر هستند:
h1 {color: red;}
h2 {color: maroon; background: white;}
h3 {color: white; background: black;font: medium Helvetica;}همان طور که مشاهده می کنید، در کدهای بالا هیچ تگ html ای قرار ندارد و فقط استایل های css وجود دارند. این کدها را باید در یک فایل به نام sheet1.css قرار دهیم که پسوند آن css. است.
نکته: یک برگه ی استایل اکسترنال نمی تواند حاوی کدهای هیچ زبان برنامه نویسی دیگری باشد و تنها دستورات css و کامنت های آن می توانند در آن قرار گیرند. که در فصول بعدی این کتاب به آنها می پردازیم. اگر در داخل برگه ی استایل css کدهای دیگر زبان ها را قرار دهیم، برخی از کدهای css یا همه ی آنها نادیده گرفته خواهند شد.
استفاده از پسوند css. ضروری نیست اما اگر پسوند css. قرار داده نشود، برخی از مرورگرهای قدیمی فایل css را تشخیص نخواهند داد، حتی اگر عبارت text/css را به درستی در عنصر link تعریف کنیم. در حقیقت برخی از وب سرورها تا پسوند یک فایل css. نباشد آن را بعنوان فایل سی اس اس در نظر نمی گیرند. اما اگر در فایل های پیکربندی این سرورها تنظیماتی انجام دهیم این کار امکان پذیر است.
خصوصیت ها یا Attributes
در داخل تگ link چند خصوصیت(attributes) و مقدار ساده وجود دارند که به توضیح آنها می پردازیم. خصوصیت rel مخفف کلمه ی relation به معنی رابطه است و در این مورد خاص، مقدار این رابطه stylesheet است.خصوصیت type نیز همواره برابر با مقدار text/css قرار می گیرد. این مقدار، نوع داده ای که قرار است با استفاده از تگ link بارگذاری شود را مشخص می کند. مرورگر به این طریق متوجه می شود که این استایل شیت یک برگه ی استایل CSS است؛ این مقدار مشخص می کند که مرورگر چگونه باید با داده هایی که ایمپورت می کند کار کند. علاوه بر آنچه گفته شد، ممکن است در آینده زبان های استایل نویسی دیگری نیز روی کار آیند، بنابراین مهم است که مشخص کنیم از چه زبانی داریم استفاده می کنیم.
سپس با خصوصیت href مواجه می شویم. مقدار این خصوصت، نشان دهنده آدرس URL برگه ی استایل ما است. این URL بسته به کاری که قرار است انجام دهد، می تواند مطلق(absolute ) یا نسبی(relative) باشد. در مثال بالا، URL به صورت نسبی تعریف شده است. یعنی آدرس کامل آورده نشده است، اما اگر بخواهیم آن را به طور مطق تعریف کنیم می تواند به صورت زیر باشد:
http://meyerweb.com/sheet1.cssدر نهایت ما در کد خود، از خصوصیت media استفاده می کنیم. مقدار این خصوصیت از یک یا چند مدیا تشکیل می شود که با کاما از یکدیگر جدا می شوند. بعنوان مثال ما می توانیم از یک برگه استایل لینک شده در هردو مدیای screen و projection استفاده کنیم:
<link rel="stylesheet" type="text/css" href="/visual-sheet.css" media="screen, projection">مقادیر media نسبتاً پیچیده هستند و بعداً در این فصل با جزئیات بیشتری توضیح داده خواهند شد. فعلا از نوع اولیه media که نشان داده شد، استفاده می کنیم. توجه کنید که ما می توانیم بیش از یک برگه استایل(stylesheet) لینک شده را به یک سند، مرتبط کنیم. در این صورت، تنها لینک هایی که خصوصیت rel آنها برابر با stylesheet باشد، می توانند در نمایش سند به کار بروند. بنابراین، اگر می خواهید دو استایل شیت یا برگه ی استایل را به نام های basic.css و splash.css لینک کنید، باید به صورت زیر عمل کنید:
<link rel="stylesheet" type="text/css" href="/basic.css">
<link rel="stylesheet" type="text/css" href="/splash.css">این کار باعث می شود که مرورگر هردوی این برگه های استایل را بارگذاری کند و آنها را با یکدیگر ترکیب کند و تمام آنها را به سند اعمال کند. به مثال زیر توجه کنید:
<link rel="stylesheet" type="text/css" href="/basic.css">
<link rel="stylesheet" type="text/css" href="/splash.css">
<p class="a1">This paragraph will be gray only if styles from the stylesheet 'basic.css' are applied.</p>
<p class="b1">This paragraph will be gray only if styles from the stylesheet 'splash.css' are applied.</p>در پاراگراف اول، نوشته شده است که اگر استایل ها تنها از برگه ی استایل basic.css اعمال شوند، این پاراگراف خاکستری(gray) شود. و در پاراگراف دوم نوشته شده است که، اگر استایل ها تنها از برگه ی استایل splash.css اعمال شوند، این پاراگراف خاکستری(gray) شود.
خصوصیتی که در کدهای این مثال قرار ندارد، اما بهتر است باشد، خصوصیت title است. از این خصوصیت اغلب استفاده نمی شود، اما در آینده مهم خواهد بود و اگر نادرست استفاده شود، می تواند تاثیرات غیر منتظره ای داشته باشد. در بخش بعدی به توضیح آن خواهیم پرداخت.
{module کمک نقدی به نویسنده}
- بازدید: 557
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.