html-css

هر دستور css از سه بخش تشکیل میشود :

 

 

 

 

Selector همان انتخابگر یا گزینشگر هستند مثل p ,div, …

Property همان خصویات مثل color

Value نیز مقدار هر خصوصیت black

مثالی برای موارد بالا :

استفاده از id و class با مثال:

برای ارتباط عناصر html با استایل css باید از id و class استفاده کرد

برای استفاده از class از علامت نقطه و برای id از علامت # استفاده میکنیم

 

در کد فوق به جای ارتباط خارجی با فایل style.css از تگ <style> </style> استفاده کردیم

از دستور div برای قالب بندی ظاهر سایت استفاده میکنیم که در جلسه بعدی کامل به این تگ می پردازیم

در کد نویسی قالب همیشه یک div اصلی داریم که بقیه کدهای قالب درون این div نوشته میشود که معمولا

با یکی از دو id زیر مشخص میشود

id=wrap

id=main

چه زمان از id و چه زمان از class استفاده کنیم :

بخش های اصلی بدنه قالب مثل header و header و footer و Navigation بهتره با id ایجاد بشه
بقیه بخش ها که تکرار میشه بهتره با class انجام بشه .
چند نکته در استفاده از کلاس ها :
1. در انتخاب نام کلاس ها باید دقت داشته باشید که اولین حرف نباید عدد یا نقطه و یا علامت ؟   باشد

2. برای هر تگ میتوان بیش از چند کلاس تعریف کرد برای این کار کافی است فاصله قرار دهیم :

 

3. میتوان چند خصوصیت برای استایل ها داد

این متن قرمز رنگ و ایتالیک است

++++++++++++++++++++++++++++++++++++++

 

مفهوم عناصر inline  و block  :
عنصر block ، عنصری است که کل پهنای موجود ( width) را اشغال می کند (  یعنی دارای عرض 100 ٪ است )
نمونه هایی از عنصر block :
•     < h1 >
•     < p >
•     < div >
• کلیه عناصر لیست ul – li

عنصر inline ، فقط پهنایی را اشغال می کتد که لازم است ( به اندازه محتوای خودش پهنا میگیرد )

نمونه هایی ار عنصر inline :
•     < span >
•     < a >
چند تگ inline   میتوانند در  یک خط کنار هم قرار بگیرند اما هر تگ block  در یک خط جدا قرار میگیرد
دستور display  برای تغییر چگونگی نمایش عنصر :
تغییر دادن عنصر inline به یک عنصر block یا بالعکس، می تواند برای ظاهر صفحه مفید باشد، و همچنان از استانداردهای وب تبعیت می کند.

مثال زیر، عنصرهای span را بصورت عناصر block نمایش می دهد:

نکته مهم : به این دلیل   یک المنت inline را block میکنیم تا بتوانیم به آن خصوصیات margin ، padding و عرض و ارتفاع و …. بدهیم
زیرا به المنت های inline نمیتوان خصوصیات فوق را انتصاب داد .
نکته مهم: تغییر نوع نمایش عنصر تنها چگونگی نمایش عنصر را نشان می دهد، دهد نه نوع عنصر را.

مثلاً، عنصر Inline که display:block تنظیم شده است، اجازه ندارد عنصر block را درون خودش nest کند.

Like
1

دسته بندی‌ها: htm - CSS,آموزش

برچسب‌ها : <<,>>

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