تفاوت css و css3

Css چیست؟

تفاوت css و css3 چیست ؟ در این مقاله با ما همراه باشید تا اطلاعات بسیار خوبی را در اختیار شما قرار دهیم . اولین چیزی که نظر کاربر را در رویارویی با یک وب سایت جذب میکند طراحی و ظاهر آن است . به جرات میتوان گفت زیبایی بصری یک سایت در وهله اول از عملکر آن بسیار مهم تر است و اگر بتوانیم در بازدید اول با طراحی زیبا نظر کاربر را جذب کنیم میتوانیم امیدوار باشیم که بازدید کننده دوباره به وب سایت ما بازخواهد گشت. امروزه مهم ترین ابزاری که طراحان برای زیبا سازی و طراحی یک وب سایت استفاده میکنند Css است.

همچنین ببینید : آموزش جامع Css3

در واقع میتوان گفت که Html چارچوب و اسکلت یک وب سایت را تشکیل میدهد و Css به عنوان پوست و مو و در نهایت لباس یک وب سایت است. Css امروزه امکانات زیادی در اختیار ما قرار داده است ولی از ابتدا همه این ویژگی ها را در اختیار نداشت و Css هم مثل بقیه زبان های برنامه نویسی براساس نیاز روز بروز رسانی شده است . البته ذکر این نکته بسیار مهم است که Css یک زبان برنامه نویسی نیست و تفاوت بسیار زیادی با یک زبان برنامه نویسی دارد.

همچنین بخوانید : مدت زمان تسلط به CSS

تاریخچه سی اس اس

قبل از بررسی تفاوت css و css3 بیایید نگاه خیلی کوتاه به تاریخچه خود Css بندازیم اما نه اندازه ای که حوصله شما سر رود ! اولین نسخه css در سال 1996 ساخته شد و تحت عنوان نسخه css1 منتشر شد این نسخه از خواصی برای تراز بندی متون و فاصله ی عناصر در صفحه و لیست ها و تعیین نوع فونت برخوردار بود. در این نسخه برخی از خواص مهم و ضروری مثل تعیین رنگ و تصویر پس زمینه و یا تعیین مکان یک تگ برای قرار گرفتن در سمت راست و چپ وجود نداشت.

دو سال بعد یعنی در سال 1998 css جدید با نسخه Css2 منتشر شد در این نسخه خواص جدیدی که مورد نیاز طراحان بود برای مثال استایل بندی جداول و تعیین مکان عناصر در جهات مختلف و  Selector ها و بسیاری امکانات دیگر  به Css اضافه شده بود. در این نسخه پشتیبانی از استایل های مخصوص رسانه ها مثل پرینتر ها و دستگاه های شنیداری و همچنین امکان استفاده ازفونت های قابل دانلود در css2 فراهم شد.

به دلیل اینکه پیاده سازی برخی از استاندارد های Css2 مشکل بود نسخه اصلاح شده ی با نام Css2.1 منتشر شد و مرورگر ها نیز در واقع به جای Css2 از نسخه Css2.1 پشتیبانی میکنند و امروزه وقتی از Css2 صحبت میشود در حقیقت همان نسخه اصلاح شده Css2.1 مورد نظر است.

یک سال بعد در سال 1999 اولین پیش نمایش Css3 منتشر شد کار بر روری Css3 به مدت چهار سال ادامه داشت. برخلاف Css2 که تنها از یک سند واحد تشکیل شده است در Css3 مشخصات آن در چندین سند مختلف تحت عنوان ماژول به صورت جداگانه تقسیم شده است و این امر باعث افزایش سرعت و ساده تر شدن Css3 نسبت به Css2 شده است.

تفاوت css و css3 – پشتیبانی از فونت های جدید در  Css3

در گذشته و در نسخه های Css1 و Css2.1 طراحان تنها میتوانستند از فونت هایی استفاده کنند که مطمئن بودند در همه دستگاه ها به صورت یکسان نمایش داده میشوند ولی با آمدن Css3 تحول عظیمی در پشتیبانی از فونت در وب رخ داد. طراحان دیگر مجبور نبودند از فونت های مطمئن استفاده کنند. و با استفاده از تغییرات جدید در Css3  طراحان میتوانستند به راحتی با استفاده از دستور [email protected] امکان استفاده از  فونت هایی را داشته باشند که در سیستم کاربر ذخیره نشده بود برای نمونه یک مثال ساده از نحوه استفاده از [email protected] را  در زیر آوردیم

@font-face {
    font-family: name_delkhah;
    src: url(sansation_light.woff);
}

div {
    font-family: name_delkhah;
}

یکی از قابلیت های جذاب در Css3 در مبحث فونت ها پشتیبانی از انواع فرمت های مختلف است که میتوان از فونت هایی با فرمت های مختلف استفاده کرد.

Selector های پیشرفته در Css3

در Css2 طراحان فقط میتوانستند از نام کلاس ، ایدی ، نام تگ ، قوانین ترکیبی ، صفت ،  وضعیت  و *  برای انتخاب عناصر و استایل دهی آن ها استفاده کنند ولی با معرفی Css3 پای سلکتور های پیشرفته به عرصه طراحی وارد شد و طراحان با دستانی باز تر توانایی انتخاب عناصر و استایل دهی به آن ها را داشتند. در زیر تعدادی از سلکتورهایی جدید که با انتشار Css3 وارد دنیای طراحان شد را معرفی میکنیم.

در Css3 انتخاب گر صفات کمی پیشرفته تر شد شما میتوانید در Css3 از عبارات منظم استفاده کنید تا انتخاب عناصر دقیق تر شود.

element[name ^="string"]  صفت name  عنصر باید حتما با string شروع شود

element[name $="string"] صفت name عنصر باید به string ختم شود

element[name *="string"] صفت name عنصر حاوی کلمه string باشد

element[name|= "string"] صفت name عنصر برابر string باشد (در Css2 وجود داشت)

انتخاب عنصرهای داخلی یک عنصر

element: first-child انتخاب اولین فرزند موجود در داخل element (در Css2 وجود داشت)

element: last-child انتخاب آخرین فرزند یک عنصر

element: nth-child (n) انتخاب nامین فرزند یک عنصر

element: nth-last-child (n) انتخاب nامین فرزند عنصر از آخر

element: nth-last-child (odd) انتخاب فرزندان فرد

element: nth-last-child (even) انتخاب فرزندان زوج

انتخاب عناصر موجود با همان نوع ؛ برای مثال انتخاب اولین عنصر از نوع p و یا آخرین عنصر از نوع p و یا nامین عنصر از نوع p ؛ از اول یا از آخر

element: first-of-type

element: last-of-type

element: nth-of-type (n)

element: nth-last-of-type (n)

خصوصیات کادر در Css3

تفاوت css و css3 ( خصوصیات کادر ) . یکی از ویژگی های جدید که در Css3 اضافه شد امکان گرد کردن گوشه های عناصر بود البته در Css2 نیز امکان گرد کردن گوشه های عناصر وجود داشت ولی برای این کار باید کد های زیادی نوشته میشد و کمی پیچیده بود ولی در Css3 تنها با یک کد ساده میتوان این کار را کرد.

border-radius: 15px  هر 4 گوشه عنصر مورد نظر را به اندازه 15 پیکسل گرد میکند .

علاوه بر ویژگی گرد کردن گوشه های یک عنصر خصوصیات دیگری نیز در زمینه کادر اطراف یک عنصر اضافه شده است که در زیر خصوصیات جدید اضافه شده در Cs33 را نام میبریم.

خصوصیات جدید اضافه شده در پس زمینه

یکی دیگر از خصوصیات اضافه شده Css3 در مورد پس زمینه امکان استفاده از چندین عکس بعنوان پس زمینه است.

ایجاد سایه برای عناصر

از دیگر تفاوت css و css3 این موضوع است . در Css3 برای زیبا سازی بیشتر عناصر  قابلیت ایجاد سایه برای عناصر تحت عنوان Box Shadow اضافه شده با این ویژگی جدید میتوان سایه های جذابی به عناصر داد برای مثال میتوان حالت سه بعدی ایجاد کرد به طوری که بنظر بیایید که عنصر مورد نظر از صفحه جدا شده است.

ایجاد سایه برای متن

همانطور که قبلا اشاره کردیم امکان استفاده از سایه ها در Css3 برای طراحان فراهم شد طراحان میتوانند علاوه بر ایجاد سایه برای عناصر با استفاده از خصوصیات  Text Shadow میتوانند برای متن نیز سایه های جالب و جذابی ایجاد کنند

تفاوت css و css3 – ستون بندی

یکی دیگر از موارد تفاوت css و css3 در ستون بندی ها است ! در Css3 میتوان تعداد و اندازه عرض ستون ها را مشخص کرد این بدین معناست که شما میتوانید یک مطلب را در چند ستون متفاوت و در اندازه های مختلف نمایش دهید. علاوه بر این میتوانید فاصله بین ستون ها را نیز به دلخواه تغییر دهید همچنین میتوان خطوطی به عنوان کادر بین ستون ها ایجاد کرد و رنگ و اندازه آن را تغییر داد.

column-width اندازه ستون هارا مشخص میکند

column-count تعداد ستون هارا مشخص میکند

column-gap فاصله بین ستون ها را مشخص میکند

column-rule-color رنگ کادر بین ستون هارا مشخص میکند

column-rule-style استایل کادر بین ستون هارا مشخص میکند (solid, dotted, double, …)

column-rule-width ضخامت کادر بین ستون ها را مشخص میکند

گرادیانت یا GRADIENT در Css3

کسانی که با نرم افزارهای گرافیکی مثل فوتوشاپ کارکردند نام گرادیانت را شنیده اند به کمک این وِیژگی جدید در Css3 میتوان یک افکت رنگی زیبا  ایجاد کرد که به تدریخ از یک رنگ شروع شده و در پایان به یک رنگ خاصی ختم می شود البته میتواند در بین این دو رنگ چندین رنگ دیگر نیز استفاده کرد. همچنین میتوان جهت ایجاد این افکت رنگ را تنظیم کرد کا با چه زاویه ای این افکت ایجاد شود که یکی از جذاب ترین تفاوت css و css3 هم می باشد .

transition

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

Animation

رسیدیم به یکی از جذاب ترین موارد در تفاوت css و css3 ! یکی از قابلیت های بسیار جذاب Css3  انمیشن هاست که به طراحان امکان ایجاد طرحی جذاب و متحرک را می دهد. توسط یک انمیشن میتوان استایل یک عنصر را به تدریج به استایلی دیگر به دفعات دلخواه تغییر داد .

البته در بالا به تعدادی از ویژگی های Css3 اشاره کردیم و از هرکدام تعدادی خصوصیات را معرفی کردیم و برای آن ها مثال زدیم با ظهور Css3 دنیای طراحی دگرگون شد و به خاطر بهینه سازی های صورت گرفته در Css3 سرعت اعمال و اجرای استایل به عناصر افزایش چشمگیری داشت و همچنین به کمک خصوصیات جدید از پیچدگی طراحی در Css2 کاسته شد .

امیدواریم این مقاله برای شما مفید بوده باشد . با تشکر سئو 90