css3 را شاید بعضی از شما بشناسید، شاید هم بسیاری از شما عزیزان با آن کار کرده باشید یا احتمال این هم می رود که تا به حال با css3 کار نکرده باشید. هدف ما آموزش به عزیزانی است که مبتدی هستند و این گونه است که به آموزش کامل آن از صفر تا صد می پردازیم. در مطلب قبلی به توضیح خاصیت border-image در خطوط حاشیه پرداختیم، اما در این مطلب به توضیح و معرفی سی اس اس می پردازیم و سپس وارد آموزش اصلی می شویم.

مقدمه :

قبل از اینکه css را تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم یک صفحه وب شامل اجزای زیر می باشد :

Content : که این بخش وب به وسیله html ایجاد می شود.

Presentation : این بخش وب به وسیله css ایجاد می شود.

Behavior : این بخش به وسیله Javascript ایجاد می شود.

لایه محتوا همیشه وجود دارد، چون در این لایه تمامی محتویات یک صفحه وب که به قصد نمایش ایجاد می گردد، نوشته می شود که این نوشته ها بین تگ های html و xhtml قرار می گیرد. خلاصه می توان گفت لایه محتوا قالب بندی یک سایت را بر عهده دارد. با استفاده از عناصر و تگ های html می توانیم متون ، تصاویر ، ویدئو ها ، صوت ها و … را کنار هم قرار بدهیم و برای کاربر های سایت نمایش بدهیم.

لایه نمایش وظیفه تنظیم و ترتیب محتویات سایت را که برای کاربر نمایش داده می شود برعهده دارد. حدود چند سال بیش برای لایه بندی سایت ها از جدول استفاده می کردند که به این سبک کد نویسی table base  می گویند. در این سبک کد نویسی با ادغام چند سطر ستون ایجاد می شد که البته این سبک کد نویسی یکسری معایب در بر داشت از جمله سنگین شدن سایت، نداشتن زیبایی در هنگام لود و همچنان برای سئو سایت هم چندان مناسب نبود. البته باید یاد آور شد در آن هنگام نیز از css استفاده می شد اما نه به وسعت امروز که امروزه طراحی table base جای خود را به Div base داده است. از زمانی که سبک کد نویسی تغییر و پیشرفت کرد استفاده ازcss یک امر عادی گشته است و با استفاده از Div می توانید سایت را به سادگی قالب بندی کرد و محتوا سایت را به شکل سایت را به معرض نمایش در آورید.

لایه رفتار کنترل نحو تعامل کاربر با صفحه را برعهده دارد که معمولاً این لایه توسط زبان Javascript ایجاد می گردد. البته هر سه این لایه می توان یکجا استفاده کرد اما به دلیل آسانی کار و کنترل هر چه خوبتر این لایه ها را از همدیگر جدا کرده اند.

نحوه استفاده از دستورات css در Html

قسمتی که می دانید سی اس اس در لایه دوم وب کار می کند و بدون لایه محتوا (html) هیچ است. از این سبب ضرورت است تا دستورات سی اس اس و html را با هم ارتباط دهیم. به سه روش می توانید دستورات CSS را به یک صفحه وب (صفحات html) معرفی کنید . که شامل روش های زیر می شود :

برگه های سبک خارجی (External Style Sheet) :

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

در این سبک دستورات سی اس اس در یک فایل مجزا با پسوند دات.سی اس اس ذخیره شده و این فایل به تمامی صفحات HTML که می خواهید استایل بالای آن تطبیق شود لینک می دهیم. شما می توانید برای این کار از تگ link که جز تگ های تهی است استفاده کنید. البته باید یاد آور شد که این link باید در بین تگ Head نوشته شود.

نکته: در تگ link بالا صفت rel نوع رابطه صفحه سی اس اس را مشخص می کنید که همیشه قیمت آن برابر به stylesheet می باشد. Type نوعیت سند را که ارتباط می دهید مشخص می کنید و href عبارت از همان سند مجزاء سی اس اس تان می باشد.

روشی دیگری نیز برای ایجاد ارتباط یک سند سی اس اس با سند html می باشد، و آن هم استفاده از قانون import@ همراه با تگ style می باشد. به عنوان مثال فایل style.css را به صورت زیر با فایل html ملحق می کنیم.

البته باید یادآور شد که تگ Style هم در بین تگ Head نوشته شود.

برگه های سبک داخلی (Internal Style sheet) :

این روش معمولاً وقتی استفاده می شود که خواسته باشید که هر صفحه استایل مجزاء داشته باشد. این روش با تگ style در بین تگ head اجرا می شود.

برگه های سبک خطی (Inline Style Sheet) :

در این حالت استایل ها تنها در یک تگ مربوط که با Style آغاز شده تطبیق می گردد، البته استفاده از این روش تنها در موارد خاصی می توان استفاده کرد در غیر آن استفاده از این روش پیشنهاد نمی شود.