درس چهارم: CSS افزودن استایل به صفحات وب

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

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

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

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

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

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

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

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

Property:

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

Value:

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

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

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

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

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

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

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

درس چهارم: CSS افزودن استایل به صفحات وب

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

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

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

درس چهارم: CSS افزودن استایل به صفحات وب


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

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

وب‌سایت CSS Tutorial – W3Schools


درس بعدی موضوع این درس منبع  درس قبلی
مقدمه ای بر برنامه نویسی CSS افزودن استایل به صفحات وب Javascript & JQuery (the missing manual)  JQuery چیست و چگونه کار می‌کند؟

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *