طراحی سایت

مقدمه‌ای بر CSS

مقدمه‌ای بر CSS

گام بعدی ما یادگیری 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

مقدمه‌ای بر CSS آموزش سی اس اس سی اس اس
جمعه 16 بهمن 1394 ساعت 12:43
نظرات 0 + ارسال نظر
امکان ثبت نظر جدید برای این مطلب وجود ندارد.