گام بعدی ما یادگیری CSS است که به ابزاري کلیدی برای طراحان امروزی وب محسوب مي‌شود.
CSS چیست؟
CSS مخفف کلمات «Cascading Style Sheets» به معني شيوه‌نامه‌هاي آبشاري است. سی اس اس خواهر خوانده زبان كد نويسي HTML است که امكان می‌دهد صفحات وب‌تان را قالب بندي كنيد. نمونه‌ای از تغییر در قالب بندي تیره كردن کلمات است. در HTML استاندارد می‌توانید از تگ <b> براي اين‌كار استفاده کنید:
<b>make me bold</b>
این تگ به خودي خود به خوبي کار می‌کند و هیچ مشکلی با آن نداريم، به جز اين‌كه فرض كنيم مي‌خواهيد تمام نوشته‌هايي كه ابتدا تيره‌شان كرده‌ايد را زير‌خط‌دار كنيد؛ در اين حالت مجبوريد تك به تك سراغ جاهاي پر رنگ رفته و تگ آنها را عوض كنيد.
نقطه ضعف دیگر آن را می‌توان در این مثال جستجو كرد: فرض كنيم مي‌خواهيد متن بالا را پر‌رنگ كرده، فونت آن Verdana انتخاب نموده و رنگ آن را به قرمز تغییر دهيد؛ براي اين‌كار به مجموعه زيادي از كد‌هاي دستوري در اطراف متن نياز دارید:
<font color=”#FF0000″ face=”Verdana, Arial, Helvetica, sans-serif”>
<b>This is text</b></font>
این روش نوعي پرگويي (دارای اطناب) است و باعث مي‌شود كد HTML تان شلوغ و بهم ريخته شود. با استفاده از سی اس اس می‌توانید یک قالب سفارشی در هر جايي كه مي‌خواهيد ايجاد كرده و همه تنظیمات خاص آن را يك‌جا انجام دهيد، يك نام منحصر به فرد براي آن انتخاب كنيد، و سپس HTML تان را طوري «تگ» كنيد كه این قالب خاص را اعمال كند:
<p class=”myNewStyle”>My CSS styled text</p>
حال این کد سی اس اس را كه به تعريف قالب دلخواه‌تان مي‌پردازد را بالای صفحه وب ما بين تگ‌هاي <head> و </head> بگنجانيد:
<style type=”text/css”>
<!–
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
–>
</style>
مواقع زيادي اتفاق مي‌افتد كه لازم است در صفحات زيادي از سبک‌های سی اس اس استفاده كنيد و كار کپی كردن و چسباندن کد سی اس اس در هر صفحه پر زحمت و دردسر ساز است. علاوه بر این واقعیت که صفحاتتان پر از کد‌هاي تکراری سی اس اس شده و آشفته و به هم ريخته خواهد شد، هر بار بخواهيد تغييري در اين سبك‌ها بدهيد بايد صفحه به صفحه كد‌ها را ویرایش كنيد.
راه حل: درست مثل كار با جاوا اسکریپت، می‌توانید سبک سی اس اس تان را در یک فایل جداگانه تعریف/ ایجاد كرده و سپس آن را به صفحه‌اي كه مي‌خواهيد اين قالب در آن اعمال شود لینک كنيد:
<link href=”myFirstStyleSheet.css” rel=”stylesheet” type=”text/css”>
خط كد بالا شيوه‌نامه خارجي‌تان كه «myFirstStyleSheet.css» ناميده مي‌شود را به سند HTML تان لینک مي‌كند. این کد را در قسمت بالاي صفحه بين تگ‌هاي <head> و </head> قرار مي‌دهيد.
برای ایجاد یک شيوه‌نامه آبشاري خارجی همه آنچه باید انجام دهید این است که یک سند متنی ساده ایجاد كنيد (در ویندوز به سادگی راست کلیک كرده و new -> text document را انتخاب كنيد) سپس آن را از یک فايل txt. به فايل css تبديل كنيد. براي تغيير نوع فايل كافي است پسوند نام فایل را تغییر دهید. پسوند فایل بر روی ویندوز به کامپیوتر مي‌گويد فایل از چه نوعي است و به کامپیوتر امكان می‌دهد براي كار با فايل، مثلاً باز كردن آن، نوع برنامه مورد استفاده را تعیین كند.
احتمالا حدس زده‌ايد؛ فایل‌های CSS تنها فايل‌هايي متني با فرمت خاص، كاملاً شبيه به صفحات HTML هستند. هیچ چیز خاص يا تفاوتي در خود فایل وجود ندارد الا اين‌كه محتویات اين فایل است که باعث می‌شود سند CSS یک سند CSS باشد.
در هنگام کار با فایل CSS خارجی يكي دو نكته هست كه بايد به خاطر بسپاريد:
اين تگ‌ها به خود سند/ صفحه CSS اضافه نمي‌شوند. يعني مانند زماني كه کد CSS را درون HTML تعبیه كرده‌ايد عمل نمي‌شود:
<style type=”text/css”></style>
از آنجا که لینک موجود در صفحه وب‌تان كه صفحه CSS را به صفحه HTML متصل مي‌كند اعلام مي‌كند که در حال لینک دادن به یک صفحه CSS هستيد، لازم نیست خودتان اعلام كنيد که کد موجود در صفحه‌تان CSS است. این همان كاري است که تگ بالا انجام مي‌دهد. در عوض فقط بايد کد CSS خود را مستقيماً به صفحه اضافه کنید:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
در مثال بالا یک سری از دسته‌هاي CSS که می‌توانند به هر تگ HTML اعمال شوند را ایجاد کرد‌ه‌ام كه به شكل زير اعمال مي شوند:
<p class=”myNewStyle”>My CSS styled text</p>
يا
<h2 class=”my3rdNewStyle”>My CSS styled text</h2>
متوجه خواهید شد که در مثال بالا یک شيوه CSS به تگ <h2> اعمال كرده‌ام. این تگ اندازه متن را به اندازه‌اي تغيير خواهد داد که در مرورگر از پیش تعیین شده است (مثلاً: 10 پیکسل). هنگامی‌که یک کلاس CSS به آن وارد مي‌كنيد، کد CSS اندازه پیش فرضي که به طور معمول با یک تگ <h2> استفاده مي‌شد را لغو كرده و از اندازه مشخص شده در کلاس CSS به جاي آن استفاده مي‌كند. بنابراین شاهديد که CSS می‌تواند رفتار پیش فرض تگ HTML را لغو كند!
در مثال‌هاي بالا هر جا که در آن کلاس‌هاي CSS ام را تعریف می‌کنم کد CSS دارم و پس از آن آنها را به عناصر مختلف موجود در صفحه «اعمال» مي‌كنم. روش دیگر اعمال CSS تعریف دوباره یک تگ HTML به صورت سراسري است تا به صورتي خاص درآيد:
h1 { font-family: Garamond, “Times New Roman”, serif; font-size: 200%; }
كاري كه کد CSS بالا می‌کند اين است كه فونت و اندازه همه تگ‌هاي <h1> را در به يك‌باره تنظیم مي‌نمايد. حال ديگر لازم نيست مثل دفعات قبلي به هر تگ‌های <h1> یک کلاس CSS اعمال كنيم زيرا همگي به طور خودکار متاثر از قوانین شيوه‌نامه CSS هستند.
در اینجا مثالي دیگر مي‌بينيد از اين‌که به کل صفحه حاشیه‌اي بزرگتر اعمال مي شود:
body { margin-left: 15%; margin-right: 15%; }
همانطور که می‌بینید می‌توانید هر تگ را باز‌تعریف كرده و تغییر دهيد تا به شكلي ديگر در آيد! این كار می‌تواند بسیار مقتدرانه انجام شود:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
حالا در تنظیمات کد بالا هر تگ <div></div> داراي یک رنگ پس زمینه «rgb(204,204,255)»، ، يك لايه گذاري 0.5em، و يك لبه 1 پیکسلي خواهد داشت كه سياه پر رنگ خواهد بود. چند چیز که بايد درباره مورد بالا توضيح داده شود: رنگ را در CSS می‌توان به چند روش بيان كرد:
مثلاً در Hex -> اين عدد نشانگر سياه و #FF0000 نشانگر رنگ قرمز است.
در rgb -> كد rgb(204,204,255) نشانگر رنگ بنفش- آبی روشن است.
با رنگ‌هايي به نام‌هاي «قرمز» یا «آبی»
معمولا از رنگ Hex[2] استفاده مي‌كنم چون با كد‌های آن آشنا هستم یا گاهي هم از رنگ‌هاي همراه با نام استفاده مي‌كنم. بنابراین آخرین مثال را می‌توان چنين بازنویسی كرد:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
بنابراین به جای rgb(204,204,255) فقط مشخص كردم «سبز».
با استفاده از RGB (مخفف کلمات: قرمز، سبز و آبی است) و رنگ Hex ، اگر كد دقيق رنگ مورد نظر خود را بدانيد، براحتي قادر خواهيد بود هر رنگي را كه دوست داريد انتخاب كنيد. خوشبختانه بسیاری از برنامه‌ها (مانند Dreamweaver) از روشي آسان براي انتخاب رنگ استفاده مي‌كنند، بنابراین لازم نیست مقادیر کد‌ها را حفظ كنيد.
در این آخرین مثال يك کد CSS فوق العاده دلپذير به شما نشان خواهم داد که موجب ایجاد اثر رنگ‌هاي غلطان در لينك‌ها خواهد شد بدون اين‌كه تصويري وجود داشته باشد:
:link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
:active { color: rgb(255, 0, 102) } /* when link is clicked */
کد بالا باعث مي شود به محض آن‌كه فرد اشاره گر ماوس خود را بر روي لينك شما نگه مي‌دارد لینک فوری تغییر رنگ بدهد بدون اين‌كه تصاویر وجود داشته باشد! نکته مهم کد بالا این است که اعلاميه سبک‌ها به ترتيب صحيح قرار داده شوند: «لینک-بازدید شده- شناور – فعال»، در غیر این صورت لينك ممکن است در بعضی از مرورگر‌ها كار نكند.
CSS بسیار قدرتمند است و اين امكان را فراهم مي‌آورد تا کارهایی را انجام دهيد که با استاندارد HTML نمي‌توانستيد. در حال حاضر اين كد در تمام مرورگرهای مدرن به سادگی پشتیبانی مي شود و ابزاري است كه طراحان وب باید آن را یاد بگیرند.
مثال‌هاي بالا فقط نمونه کوچکي هستند از آنچه می‌توانید با CSS انجام دهید، اما براي شروع طراحی سایت و طراحی ظاهر صفحاتتان کافی است. مثل بسیاری از فن آوری ها، CSS قابلیت‌هایي دارد که بسیاری از مردم در تمام طول كار با آن نیازي به استفاده از اغلب‌شان نخواهند داشت. در دام اين تفکر گرفتار نشويد كه اگر قابلیتي/ ویژگی وجود داد ، حتماً باید از آن استفاده کنید.
[1] شيوه‌نامه‌هاي آبشاري
[2] سيستم كد‌دهي هشت تايي به اعداد
منبع: مقدمه‌اي بر CSS
هیچ نظری موجود نیست:
ارسال یک نظر