ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

CSS (صفحات با الگوی آبشاری)

csscss

در این مقاله داریم معنای دقیق CSS و ارتباط آن با صفحات  HTML را بررسی کنیم. CSS یک زبان پر استفاده و کاربردی در طراحی صفحات وب است. در کنار HTML و JavaScript، زبان CSS سه ضلع اصلی طراحی صفحات وب را می سازند.

معنی CSS

CSS مخفف “Cascading Style Sheets” است. صفحات با الگوی آبشاری بهترین ترجمه ای است که از CSS می توان داشت. این زبان کاربردی برای قالب بندی صفحات وب مورد استفاده قرار می گیرد. از صفحات الگوی آبشاری برای تعریف سبک های متن، اندازه جدول و جنبه های دیگر صفحات، که قبلا فقط می توانست در یک صفحه  HTML تعریف شود، استفاده می کنند.

 

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

 

چرا از CSS استفاده می شود؟

CSS به توسعه دهندگان وب كمك می كند كه چندین صفحه ی وب سایت یکنواخت و هم شکل را ایجاد کنند. به جای تعریف سبک هر جدول و هر بلوک متن در یک صفحه  HTML، معمولا سبک های مورد استفاده باید فقط یکبار در یک سند صفحات الگوی آبشاری تعریف شوند. هنگامی که سبک در صفحات با الگوی آبشاری تعریف شود، می توان از هر صفحه ای که به فایل صفحات الگوی آبشاری اشاره دارد استفاده شود و همان الگو ها را در آن صفحه اعمال کرد. علاوه بر این، CSS باعث می شود که به راحتی الگو های چند صفحه را هم زمان و به یک شکل تغییر داد. به عنوان مثال، توسعه دهنده وب ممکن است بخواهد اندازه متن پیش فرض را از ۱۰pt تا ۱۲pt برای پنجاه صفحه وب سایت افزایش دهد. اگر صفحات همه دارای یک CSS یکسان باشند، با تغییر اندازه متن در این سند الگوی آبشاری می توان متن های کل این صفحات را بزرگتر نشان داد. پس در واقع CSS باعث کنترل راحت تر و عملکرد سریع تر صفحات HTML شما می شود.

در حالی که CSS برای ایجاد سبک متن عالی است، برای قالب بندی و سایر ویژگی های طراحی صفحات  وب بسیار کاربردی است. به عنوان مثال، صفحات الگوی آبشاری را می توان علاوه بر تعریف جدا گانه هر سلول از جدول، برای تغییر و تعریف  استایل، ضخامت و رنگ مرز جدول و پوسته در اطراف تصاویر یا اشیا دیگر استفاده کرد. صفحات الگوی آبشاری به توسعه دهندگان وب کمک می کند تا کنترل دقیق تری بر نحوه بارگزاری صفحات وب HTML داشته باشند. به همین دلیل است که بسیاری از صفحات وب امروز شامل صفحات با الگوی آبشاری است.

آمادگی برای استفاده از صفحات الگوی آبشاری

در ابتدا زمانی که وبسایت جهانی (WWW) شروع به کار کرد، به صورت پیش فرض با HTML کار می کرد و با نشان دادن زبان های نشانه گذاری و محتوا و همینطور کار با جاوا اسکریپت اطلاعات قالب بندی شده سازگار نبود. به همین دلیل نوشتن و خواندن صفحات وب بسیار سخت و وقت گیر بود، علاوه بر این آپدیت و تغییر در این صفحات نیز کار بسیار دشواری بود. با گذشت زمان و بهبود های ایجاد شده در وب، طراحی سایت ها با حضور دو ضلع دیگر مثلث طلایی HTML، JAVASCRIPT و CSS طراحی صفحات وب بسیار ساده تر و سریع تر از قبل شد.

css

پیاده سازی قالب بندی CSS

ماهیت آبشاری فایل های CSS به این معنی است که در حقیقت اطلاعات مربوط به استایل های یک صفحه را  می توان در  سه مکان مختلف تعریف کرد، که به آن لایه ها استایل یا STYLE LEVEL می گویند. معمولا اطلاعات استایل ها در یک فایل جداگانه با فرمت .CSS ذخیره می شود. این صفحات استایل ها با استفاده از یک برچسب به HTML پیوند داده می شود و استایل های محتوای درون HTML  را تعیین می کند. یک صفحه وب ممکن است به هیچ فایل صفحات الگوی آبشاری پیوند داده نشود یا چند صفحه الگو هم زمان استایل های موجود در یک صفحه را کنترل کنند.  به لینک پیوند زیر دقت کنید:

با این حال، در پروژه های کوچکتر و یا در مواردی که علاقه مند به تغییر برخی از اطلاعات الگو ها در یک فایل CSS خارجی مربوط به یک صفحه وب خاص هستید، اطلاعات الگو را می توان در داخل برچسب <style> در داخل صفحه بنویسید. این کار به عنوان ایجاد یک لایه استایل داخلی شناخته شده می شود. اطلاعات لایه استایل داخلی در یک صفحه وب، هر نوع اطلاعات الگویی ارائه شده توسط یک صفحه استایل آبشار خارجی را لغو می کند.

قوانین الگوهای آبشاری

خوشبختانه همه تگ های HTML دارای یک ویژگی استایل هستند که می توان از آن ها برای قرار دادن هرگونه اطلاعات الگویی بر روی الگوی صفحات و یا فایل خارجی الگوی آبشاری استفاده کرد. به استفاده از تگ های HTML برای تعریف اطلاعات این صفحات، تغییر الگوی برخط می گویند. واقعیت این است که قوانین الگو ها می گویند که الگو  های سطح والد توسط استایل های سطح صفحه لغو می شوند و استایل های سطح صفحه با استایل های tag-level باطل می شوند، این دقیقا همان مفهوم قوانین الگو های آبشاری است.

css

زبان الگو های صفحه ایی

نحو کار CSS نسبتا ساده است. نامگذاری اِلِمان های این صفحات، که به عنوان انتخاب گر CSS نامیده می شود، توسط braces انجام می شود که در آن ویژگی های مختلف مانند اندازه قلم و رنگ پس زمینه تعیین می شوند. سازمان استاندارد جهانی (W3C) ویژگی های این صفحات را تعریف می کند، هر چند مرورگرهای مختلف با تعریف زمینه های سفارشی خود می توانند حمایت های متفاوتی را ارائه دهند. این کار اغلب برای ویژگی های پیشنهادی انجام می شود که انتظار می رود در نسخه های آینده CSS گنجانده شود.

انتخاب گرهای CSS

انتخاب گرهای CSS می توانند برچسب های HTML، ویژگی های کلاس اختصاص داده شده به تگ های HTML و حتی حالت های یک المان ، مانند حالت غیر فعال از یک فیلد ورودی یا حالت شناور یک پیوند باشند. انتخاب گرها این امکان را می دهند که استایل مربوط به وضعیت آن ها یا چگونگی طبقه بندی آن ها در صفحاتی که در حال طراحی گرافیک هستند را کنترل کنید. به زبان ساده تر نحوه رندر شدن صفحه وب در مرورگر توسط همین انتخاب گر ها تعیین می شود.

استفاده روز افزون از این ویژگی ها سبب شده که طراحی های خلاقانه ایی در زمینه طراحی وبسایت های جدید مشاهده کنیم.

منبع : طراحی سایت

آموزش تک
نویسندهآموزش تک

دیدگاهتان را بنویسید