CSS (صفحات با الگوی آبشاری)
در این مقاله داریم معنای دقیق CSS و ارتباط آن با صفحات HTML را بررسی کنیم. CSS یک زبان پر استفاده و کاربردی در طراحی صفحات وب است. در کنار HTML و JavaScript، زبان CSS سه ضلع اصلی طراحی صفحات وب را می سازند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
معنی CSS
CSS مخفف “Cascading Style Sheets” است. صفحات با الگوی آبشاری بهترین ترجمه ای است که از CSS می توان داشت. این زبان کاربردی برای قالب بندی صفحات وب مورد استفاده قرار می گیرد. از صفحات الگوی آبشاری برای تعریف سبک های متن، اندازه جدول و جنبه های دیگر صفحات، که قبلا فقط می توانست در یک صفحه HTML تعریف شود، استفاده می کنند.
آمادگی برای استفاده از صفحات الگوی آبشاری
در ابتدا زمانی که وبسایت جهانی (WWW) شروع به کار کرد، به صورت پیش فرض با HTML کار می کرد و با نشان دادن زبان های نشانه گذاری و محتوا و همینطور کار با جاوا اسکریپت اطلاعات قالب بندی شده سازگار نبود. به همین دلیل نوشتن و خواندن صفحات وب بسیار سخت و وقت گیر بود، علاوه بر این آپدیت و تغییر در این صفحات نیز کار بسیار دشواری بود. با گذشت زمان و بهبود های ایجاد شده در وب، طراحی سایت ها با حضور دو ضلع دیگر مثلث طلایی HTML، JAVASCRIPT و CSS طراحی صفحات وب بسیار ساده تر و سریع تر از قبل شد.
پیاده سازی قالب بندی CSS
ماهیت آبشاری فایل های CSS به این معنی است که در حقیقت اطلاعات مربوط به استایل های یک صفحه را می توان در سه مکان مختلف تعریف کرد، که به آن لایه ها استایل یا STYLE LEVEL می گویند. معمولا اطلاعات استایل ها در یک فایل جداگانه با فرمت .CSS ذخیره می شود. این صفحات استایل ها با استفاده از یک برچسب به HTML پیوند داده می شود و استایل های محتوای درون HTML را تعیین می کند. یک صفحه وب ممکن است به هیچ فایل صفحات الگوی آبشاری پیوند داده نشود یا چند صفحه الگو هم زمان استایل های موجود در یک صفحه را کنترل کنند. به لینک پیوند زیر دقت کنید:
1 |
<"link rel="stylesheet" type="text/css" href="what-is-css.css> |
با این حال، در پروژه های کوچکتر و یا در مواردی که علاقه مند به تغییر برخی از اطلاعات الگو ها در یک فایل CSS خارجی مربوط به یک صفحه وب خاص هستید، اطلاعات الگو را می توان در داخل برچسب <style> در داخل صفحه بنویسید. این کار به عنوان ایجاد یک لایه استایل داخلی شناخته شده می شود. اطلاعات لایه استایل داخلی در یک صفحه وب، هر نوع اطلاعات الگویی ارائه شده توسط یک صفحه استایل آبشار خارجی را لغو می کند.
قوانین الگوهای آبشاری
خوشبختانه همه تگ های HTML دارای یک ویژگی استایل هستند که می توان از آن ها برای قرار دادن هرگونه اطلاعات الگویی بر روی الگوی صفحات و یا فایل خارجی الگوی آبشاری استفاده کرد. به استفاده از تگ های HTML برای تعریف اطلاعات این صفحات، تغییر الگوی برخط می گویند. واقعیت این است که قوانین الگو ها می گویند که الگو های سطح والد توسط استایل های سطح صفحه لغو می شوند و استایل های سطح صفحه با استایل های tag-level باطل می شوند، این دقیقا همان مفهوم قوانین الگو های آبشاری است.
زبان الگو های صفحه ایی
نحو کار CSS نسبتا ساده است. نامگذاری اِلِمان های این صفحات، که به عنوان انتخاب گر CSS نامیده می شود، توسط braces انجام می شود که در آن ویژگی های مختلف مانند اندازه قلم و رنگ پس زمینه تعیین می شوند. سازمان استاندارد جهانی (W3C) ویژگی های این صفحات را تعریف می کند، هر چند مرورگرهای مختلف با تعریف زمینه های سفارشی خود می توانند حمایت های متفاوتی را ارائه دهند. این کار اغلب برای ویژگی های پیشنهادی انجام می شود که انتظار می رود در نسخه های آینده CSS گنجانده شود.
انتخاب گرهای CSS
انتخاب گرهای CSS می توانند برچسب های HTML، ویژگی های کلاس اختصاص داده شده به تگ های HTML و حتی حالت های یک المان ، مانند حالت غیر فعال از یک فیلد ورودی یا حالت شناور یک پیوند باشند. انتخاب گرها این امکان را می دهند که استایل مربوط به وضعیت آن ها یا چگونگی طبقه بندی آن ها در صفحاتی که در حال طراحی گرافیک هستند را کنترل کنید. به زبان ساده تر نحوه رندر شدن صفحه وب در مرورگر توسط همین انتخاب گر ها تعیین می شود.
استفاده روز افزون از این ویژگی ها سبب شده که طراحی های خلاقانه ایی در زمینه طراحی وبسایت های جدید مشاهده کنیم.
منبع : طراحی سایت