CSS افزودن استایل به صفحات وب

در ابتدای ظهور وب، HTML ابزاری بود که شما بدان نیاز داشتید. شما باید صفحات را با متون رنگی و تصاویر، با فونت‌ها، رنگ‌ها و اندازه‌های مختلف می‌ساختید، اما اکنون طراحان وب به Style های آبشاری یا همان CSS (شیوه‌نامه) برای اضافه کردن پیچیدگی‌های بصری به صفحات خود روی آورده‌اند. CSS یک زبان قالب‌بندی است که متون را با حالات بهتری نمایش می‌دهد. صفحاتی با حالت‌های پیچیده‌تری ایجاد می‌نماید و به‌صورت کلی به صفحه شما حالت می‌دهد.

HTML زبانی است که شما با آن ساختار صفحات خود را می‌سازید. به‌وسیلهٔ آن بخش‌های مختلف متن عکس‌ها و جداول را ایجاد می‌کنید اما در طرف دیگر CSS به همان محتوای ساخته‌شده توسط HTML خوش‌فرمی، زیبایی و خوانایی بهتری می‌دهد. ذاتاً هر استایل CSS یک قانون است که به مرورگر می‌گوید یک المان خاص را چگونه نمایش دهد. برای مثال شما می‌توانید یک قانون بسازید که مرورگر تمامی تگ‌های H1 را با ۳۶ پیکسل ارتفاع نمایش دهد و یا اینکه رنگ آن را تغییر دهید. علاوه بر این‌ها CSS امکانات بیشتری دارد مانند افزودن حاشیه، تغییر محل قرارگیری المان و… .

بعداً در زبان جاوا اسکریپت خواهیم دید که بسیاری از تغییرات باارزشی را که روی صفحه اعمال می‌کنیم با دخالت دادن CSS ممکن خواهد بود. شما می‌توانید از جاوا اسکریپت برای افزودن یا حذف کردن یک شیوه‌نامه یا استایل CSS بر روی یک المان استفاده کنید یا به‌صورت پویا با کلیک کاربر بر روی یک دکمه یک انیمیشن خاص را فعال کنید.

آناتومی یک شیوه‌نامه در CSS

شیوه‌نامه یا استایل ظاهر یک المان را شکل می‌دهد و به مرورگر می‌گوید که یک المان خاص را چگونه قالب‌بندی کند. هر استایل از دو بخش تشکیل‌شده است. انتخاب‌گر یا (Selector) که به مرورگر دستور می‌دهد چه المانی را انتخاب کند و بلاک تعریف که دستورات استایل در آن قرار می‌گیرد. برای مثال انتخاب‌گر می‌تواند یک پاراگراف، یک عکس و مانند آن را انتخاب کند و بالک تعریف می‌تواند رنگ آن را به آبی و یا موقعیت عکس را تغییر دهد.

CSS زبان مخصوص خود را دارد و شما باید نحوهٔ استفاده از انتخاب‌گرها و نحوهٔ تعریف بلاک‌های دستورات را یاد بگیرید. برای مثال دستور زیر به مرورگر می‌گوید کلیهٔ متونی را که بین تک <P> قرار دارند را با رنگ قرمز و اندازه مورد نظر نمایش دهد.

p{color: red; font-size: 1.5em;}

انتخاب‌گر به مرورگر می‌گوید چه المان یا المان‌هایی را در HTML برای تغییر استایل انتخاب کند.

در شکل زیر انتخاب‌گر (P) به همهٔ تگ‌های <P> مربوط می‌شود. شما می‌توانید از ترکیبی از انتخاب‌گرها برای یافتن المان‌های مناسب و موردنظر استفاده کنید.

بلاک تعریف دستورات CSS

کدهایی که بعد از انتخاب‌گرها در داخل کروشه می‌آیند {…} همان استایل هایی هستند که باید بر روی المان موردنظر اعمال شوند. هر بلاک تعریف از مجموعه‌ای از استایل‌ها ساخته‌ شده است که هرکدام شامل دو قسمت کد است property و value.

Property:

CSS مجموعه بسیار زیادی از خصوصیات برای هر المان ارائه می‌کند که با عنوان خاصیت یا property شناخته می‌شوند. مانند font-size یا color.

Value:

این بخش مربوط به مقادیر هر خاصیت یا property است. برای مثال مقدار blue برای خاصیت color و یا ۱۸px برای خاصیت font-size.

نیازی نیست که همهٔ استایل ها در یک خط مانند عکس بالا نوشته شوند شما می‌توانید هر استایل را در یک خط جدا بنویسید و البته برای خوانایی بهتر باید از روش تورفتگی داخلی برای هر بلاک استفاده کنید.

p {
    color: red;
    font-size: 1.5em;
}

افزودن کدهای css به صفحه وب

بعد از اینکه استایل مورد نظر خود را ایجاد کردید نیاز خواهید داشت که آنها را به صفحه وب حود اعمال کنید تا المانهای مشخص شده تحت تاثیر کدهای css تغییر حالت دهند برای افزودن کدهای سی اس اس به صفحه وب سه راه متفاوت وجود دارد که هرکدام ویژگی‌های خود را داشته و کاربرد خود را نیز دارند.

روش اول : درج شیوه نامه برخط یا inline

با قرار دادن کدهای css در خود تگهای HTML شما از روش inline استفاده می‌کنید در اسن حالت یک شیوه نامه خاص برای یک تگ خاص تعریف می‌شود

برای درج شیوه‌نامه inline آنها را در خاصیت Style تگ‌های HTML مانند کد زیر قرار دهید

<h1 style="color:blue"> This is a Blue Heading </h1>

روش دوم : درج شیوه نامه داخلی یا internal

در این روش به جای قرار دادن استایل های مختلف در همه تگ‌ها، همه آنها را در یک تگ مخصوص قرار داده و به وسیله انتخابگرها بر روی تگهای مورد نظر اعمال می کنیم ، نسبت به کدهای inline در این روش تغییرات بسیار ساده‌تر و حجم صفحه نیز به شدت کاهش می‌یابد و باعث خوانایی بیشتر کد خواهد شد، علاوه بر آن موتورهای جستجو اکیدا توصیه میکنند که بجای استفاده از شیوه نامه‌های برخط از شیوه‌نامه های داخلی و خارجی استفاده شود

شیوه‌نامه های internal را در تگ <style> بنویسید و باید آنها را در تگ <head> مانند کد زیر قرار دهید

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {  background-color: linen;}
            h1 {  color: maroon;  margin-left: 40px;} 
        </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

روش سوم: درج شیوه نامه خارجی یا external

در این روش شیوه‌نامه ها را در یک فایل خارجی با پسوند css دخیره میکنیم و آن را به درون صفحه html لینک میکنم از ویژگی‌های این روش امکان استفاده از شیوه نامه در صفحات مختلف است بر عکس روش internal که فقط برای یک صفحه بود علاوه بر آن تغییرات کلی سایت را نیز بسیار ساده تر میکند

برای اعمال شیوه نامه های خارجی بر روی صفحات وب ابتدا کدها را در یک فایل css نوشته و به وسیله تگ <link> در تگ <head> آن را به صفحه وب مورد نظر مانند کد زیر مرتبط کنید

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html> 

در نهایت آنچه در این درس به صورت خلاصه آمد تنها جهت یادآوری و آشنایی مقدماتی با مفهوم سی اس اس بوده و به هیچ عنوان کافی نیست برای آشنایی بهتر با این زبان می توانید به آدرس های زیر مراجعه نمایید.

وب‌سایت اسناد وب موزیلا

وب‌سایت CSS Tutorial – W3Schools