گام بعدی ما در طراحی سایت یادگیری( CSS :Cascading Style Sheets) است که ابزاری کلیدی برای طراحان امروزی وب محسوب میشود.
CSS چیست؟
CSS مخفف کلمات «Cascading Style Sheets» به معنی شیوهنامههای آبشاری است. CSS خواهر خوانده زبان کد نویسی HTML است که امکان میدهد صفحات وبتان را قالب بندی کنید. نمونهای از تغییر در قالب بندی تیره کردن کلمات است. در HTML استاندارد میتوانید از تگ <b> برای اینکار استفاده کنید:
<b>make me boldb>
این تگ به خودی خود به خوبی کار میکند و هیچ مشکلی با آن نداریم، به جز اینکه فرض کنیم میخواهید تمام نوشتههایی که ابتدا تیرهشان کردهاید را زیرخطدار کنید؛ در این حالت مجبورید تک به تک سراغ جمله های پر رنگ رفته و تگ آنها را عوض کنید.
نقطه ضعف دیگر آن را میتوان در این مثال جستجو کرد: فرض کنیم میخواهید متن بالا را پررنگ کرده، فونت آن Verdana انتخاب نموده و رنگ آن را به قرمز تغییر دهید؛ برای اینکار به مجموعه زیادی از کدهای دستوری در اطراف متن نیاز دارید:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">
<b>This is textb>font>
این روش نوعی پرگویی (دارای اطناب) است و باعث میشود کد HTML تان شلوغ و بهم ریخته شود و در طراحی وب سایت گیج و کلافه شوید. با استفاده از CSS میتوانید یک قالب سفارشی در هر جایی که میخواهید ایجاد کرده و همه تنظیمات خاص آن را یکجا انجام دهید، یک نام منحصر به فرد برای آن انتخاب کنید، و سپس HTML تان را طوری «تگ» کنید که این قالب خاص را اعمال کند:
<p class="myNewStyle">My CSS styled textp>
حال این کد CSS را که به تعریف قالب دلخواهتان میپردازد بالای صفحه وب ما بین تگهای
و بگنجانید:
در مثال بالا کد شیوهنامهها را درون خطوط، یا به عبارت دیگر، داخل صفحه وارد میکنیم. این کار مناسب پروژههای کوچکتر یا شرایطی است که سبکی که در حال تعریف آن هستید فقط در یک صفحه استفاده میشود.
مواقع زیادی اتفاق میافتد که لازم است در صفحات زیادی از سبکهای CSS استفاده کنید و کار کپی کردن و چسباندن کد CSS در هر صفحه پر زحمت و دردسر ساز است مثل طراحی سایت فروشگاهی. علاوه بر این واقعیت که صفحاتتان پر از کدهای تکراری CSS شده و آشفته و به هم ریخته خواهد شد، هر بار بخواهید تغییری در این سبکها بدهید باید صفحه به صفحه کدها را ویرایش کنید.
راه حل: درست مثل کار با جاوا اسکریپت، میتوانید سبک CSS تان را در یک فایل جداگانه تعریف کرده و سپس آن را به صفحهای که میخواهید این قالب در آن اعمال شود لینک کنید:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
خط کد بالا شیوهنامه خارجیتان که «myFirstStyleSheet.css» نامیده میشود را به سند HTML تان لینک میکند. این کد را در قسمت بالای صفحه بین تگهای
و قرار میدهید.
برای ایجاد یک شیوهنامه آبشاری خارجی در طراحی وب خود، همه آنچه باید انجام دهید این است که یک سند متنی ساده ایجاد کنید (در ویندوز به سادگی راست کلیک کرده و 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 textp> |
یا
<h2 class="my3rdNewStyle">My CSS styled texth2> |
متوجه خواهید شد که در مثال بالا یک شیوه 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 FF000000;
حالا در تنظیمات کد بالا هر تگ
دارای یک رنگ پس زمینه «rgb(204,204,255)»، ، یک لایه گذاری 0.5em، و یک لبه 1 پیکسلی خواهد داشت که سیاه پر رنگ خواهد بود.
چند چیز که باید درباره مورد بالا توضیح داده شود:
رنگ را در CSS میتوان به چند روش بیان کرد:
- مثلاً در Hex -> این عدد نشانگر سیاه و #FF0000 نشانگر رنگ قرمز است.
- در rgb -> کد rgb(204,204,255) نشانگر رنگ بنفش- آبی روشن است.
- با رنگهایی به نامهای «قرمز» یا «آبی»
معمولا از رنگ Hex استفاده میکنم چون با کدهای آن آشنا هستم یا گاهی هم از رنگهای همراه با نام استفاده میکنم. بنابراین آخرین مثال را میتوان چنین بازنویسی کرد:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
بنابراین به جای rgb(204,204,255) فقط مشخص کردم «سبز».
با استفاده از RGB (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 قابلیتهایی دارد که بسیاری از مردم در تمام طول کار با آن نیازی به استفاده از اغلبشان نخواهند داشت. در دام این تفکر گرفتار نشوید که اگر قابلیتی/ ویژگی وجود داد ، حتماً باید از آن استفاده کنید.