![[-]](https://forum.romaak.ir/images/first18/collapse.png "[-]")
مقدمه : همانطور که در مطلب قبلی در مورد آشنایی با HTML ذکر کردیم می خواهیم با مفهوم صفحه آرایی اجزای صفحه یا به اصطلاح زبان CSS آشنا شویم و از مبانی اولیه آن شروع کنیم تا به خواص و مقادیر مهم آن بپردازیم. با سری آموزش های آشنایی با css همراه ما باشید.
سری آموزش های سی اس اس (CSS)
جلسه اول : آشنایی با CSS و کاربرد آن در طراحی وب (هم اکنون)
جلسه دوم : آشنایی با چگونگی استفاده از CSS در صفحات وب
جلسه سوم : فراگیری ساختار نحوی دستورات CSS در کدنویسی صفحات وب
جلسه چهارم : آشنایی کامل با انتخاب گرهای css به زبان ساده
آشنایی با CSS
قبل اینکه بخواهیم Css رو تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم ، یه صفحه وب شامل متن ، صوت ، تصویر و … هست. برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم ، با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.
از وقتی که سبک کدنویسی تغییر و پیشرفت کرد، کاربرد Css در طراحی وب یک امر عادی بشمار اومد. با استفاده از Div ها و Css می تونید به راحتی و بسیار سبک قالب وبلاگ شخصی خود را لایه بندی و طرح بندی کنید و اجزای صفحه ی وب رو بصورت کاملا زیبا استایل بندی کنید. حالا میریم سر اصل مطلب یعنی Css اصلا چی هست؟!
تعریف و مفهوم CSS
Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد. شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.
برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.
در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم. فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید، به عنوان مثال می توانید تعریف کنید که سرتیتر خبر با فونت ضخیم آبی رنگ از خانواده Tahoma نمایش داده بشه که این تعریف رو به صورت زیر مینویسید:
h1 {
font-family: Tahoma;
font-style: bold;
color: blue;
}
1
2
3
4
5
6
7
8
9
h1 {
font-family: Tahoma;
font-style: bold;
color: blue;
}
مزایای استفاده از CSS
طراحی ظاهر صفحات بدون استفاده از دستورات HTML
جلوگیری از تکرار دستورات
سرعت بارگذاری بیشتر برای صفحات
استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که مایل هستیم.
طریقه نوشتن کدهای CSS
برای نوشتن دستورات CSS باید با مفاهیم زیر آشنا شویم :
Selector
Property
Value
هر دستور CSS شامل این سه قسمت است. به نمونه دستور زیر دقت کنید:
h1 {
color:blue;
}
1
2
3
h1 {
color:blue;
}
این دستور بیانگر این موضوع است که تمام متونی که با تگ h1 نوشته می شود به رنگ آبی باشند. در اینن دستور h1 همان اشاره کننده یا Selector است، عبارت color همان خصوصیت یا Property می باشد و در نهایت Blue نیز مقدار یا Value می باشد.
دلیل استفاده و کاربرد CSS
در اینجا با اشاره به یک موضوع کلی ، دلیل استفاده از CSS را بیان می کنیم :
همانطور که می دانید صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غیره تشکیل شده اند . امروزه صفحات وب از حالت ساده و یکنواخت خارج شده و طراحان سعی می کنند تا با استفاده از جلوه های تصویری مثل استفاده از رنگ های مختلف ، حالت های نمایش گوناگون و … به جذابیت و زیبایی صفحات بیافزایند.
فرض کنید که ما در صفحات یک وب سایت ، یکسری عنوان ها ، پارگراف ها و جداول داریم که این عناصر در بیشتر صفحات تکرار شده و دارای ویژگی های یکسانی هستند.
به طور مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :
۱- در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :
باعث تکرار شدن خواص مشترک عناصر در تمام صفحات و تگ های مورد نظر می شود.
حجم کد نویسی بالا رفته و احتمال خطا افزایش می یابد.
سرعت طراحی صفحات بسیار کاهش می یابد.
اعمال تغییرات به عناصر بسیار وقت گیر بوده و کار زیادی را می طلبد.
۲- ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم.
سپس در یک فایل Style بیرونی و یا در تگ Style در بخش Head صفحه ، خواص و ویژگی های مشترک را در یکجا برای همه آن گروه ها تعریف کرده و سپس هر یک از عناصر را به گروه مورد نظر ارتباط می دهیم.
برای آشنایی با روش دسته بندی و ارتباط عناصر در CSS ، به بخش آموزش تگ < style > در HTML بروید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :
خواص مشابه در عناصر و تگ ها تکرار نشود.
حجم کد نویسی کاهش یافته و احتمال خطا کمتر می شود.
سرعت طراحی صفحات افزایش می یابد.
اعمال تغییرات به صفحات بسیار سریع و راحت صورت می گیرد.
در این آموزش در مورد آشنایی با CSS مطالبی را آموختیم و سعی خواهیم کرد در مطالب بعدی گام به گام به آموزش های بعدی این موضوع بپردازیم.
سری آموزش های سی اس اس (CSS)
جلسه اول : آشنایی با CSS و کاربرد آن در طراحی وب (هم اکنون)
جلسه دوم : آشنایی با چگونگی استفاده از CSS در صفحات وب
جلسه سوم : فراگیری ساختار نحوی دستورات CSS در کدنویسی صفحات وب
جلسه چهارم : آشنایی کامل با انتخاب گرهای css به زبان ساده
آشنایی با CSS
قبل اینکه بخواهیم Css رو تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم ، یه صفحه وب شامل متن ، صوت ، تصویر و … هست. برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم ، با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.
از وقتی که سبک کدنویسی تغییر و پیشرفت کرد، کاربرد Css در طراحی وب یک امر عادی بشمار اومد. با استفاده از Div ها و Css می تونید به راحتی و بسیار سبک قالب وبلاگ شخصی خود را لایه بندی و طرح بندی کنید و اجزای صفحه ی وب رو بصورت کاملا زیبا استایل بندی کنید. حالا میریم سر اصل مطلب یعنی Css اصلا چی هست؟!
تعریف و مفهوم CSS
Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد. شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.
برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.
در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم. فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید، به عنوان مثال می توانید تعریف کنید که سرتیتر خبر با فونت ضخیم آبی رنگ از خانواده Tahoma نمایش داده بشه که این تعریف رو به صورت زیر مینویسید:
h1 {
font-family: Tahoma;
font-style: bold;
color: blue;
}
1
2
3
4
5
6
7
8
9
h1 {
font-family: Tahoma;
font-style: bold;
color: blue;
}
مزایای استفاده از CSS
طراحی ظاهر صفحات بدون استفاده از دستورات HTML
جلوگیری از تکرار دستورات
سرعت بارگذاری بیشتر برای صفحات
استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که مایل هستیم.
طریقه نوشتن کدهای CSS
برای نوشتن دستورات CSS باید با مفاهیم زیر آشنا شویم :
Selector
Property
Value
هر دستور CSS شامل این سه قسمت است. به نمونه دستور زیر دقت کنید:
h1 {
color:blue;
}
1
2
3
h1 {
color:blue;
}
این دستور بیانگر این موضوع است که تمام متونی که با تگ h1 نوشته می شود به رنگ آبی باشند. در اینن دستور h1 همان اشاره کننده یا Selector است، عبارت color همان خصوصیت یا Property می باشد و در نهایت Blue نیز مقدار یا Value می باشد.
دلیل استفاده و کاربرد CSS
در اینجا با اشاره به یک موضوع کلی ، دلیل استفاده از CSS را بیان می کنیم :
همانطور که می دانید صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غیره تشکیل شده اند . امروزه صفحات وب از حالت ساده و یکنواخت خارج شده و طراحان سعی می کنند تا با استفاده از جلوه های تصویری مثل استفاده از رنگ های مختلف ، حالت های نمایش گوناگون و … به جذابیت و زیبایی صفحات بیافزایند.
فرض کنید که ما در صفحات یک وب سایت ، یکسری عنوان ها ، پارگراف ها و جداول داریم که این عناصر در بیشتر صفحات تکرار شده و دارای ویژگی های یکسانی هستند.
به طور مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :
۱- در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :
باعث تکرار شدن خواص مشترک عناصر در تمام صفحات و تگ های مورد نظر می شود.
حجم کد نویسی بالا رفته و احتمال خطا افزایش می یابد.
سرعت طراحی صفحات بسیار کاهش می یابد.
اعمال تغییرات به عناصر بسیار وقت گیر بوده و کار زیادی را می طلبد.
۲- ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم.
سپس در یک فایل Style بیرونی و یا در تگ Style در بخش Head صفحه ، خواص و ویژگی های مشترک را در یکجا برای همه آن گروه ها تعریف کرده و سپس هر یک از عناصر را به گروه مورد نظر ارتباط می دهیم.
برای آشنایی با روش دسته بندی و ارتباط عناصر در CSS ، به بخش آموزش تگ < style > در HTML بروید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :
خواص مشابه در عناصر و تگ ها تکرار نشود.
حجم کد نویسی کاهش یافته و احتمال خطا کمتر می شود.
سرعت طراحی صفحات افزایش می یابد.
اعمال تغییرات به صفحات بسیار سریع و راحت صورت می گیرد.
در این آموزش در مورد آشنایی با CSS مطالبی را آموختیم و سعی خواهیم کرد در مطالب بعدی گام به گام به آموزش های بعدی این موضوع بپردازیم.
