سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

نکته » تگ‌های ul و ol به طور پیش فرض یک سری paddimg در خودشان دارند

معرفی یک نوع سلکتور معروف که با فضای خالی یا اسپیس بی نهایت با آن به جلو می‌رویم که میتوانیم عناصر و کلاس هارو در آن‌ها صدا بزنیم نمونه طبق مثال استاد .

test ul a.x {
}

هچنین ما میتوانیم المان‌ها و عناصر و کلاس‌های دیگر را با استفاده از , باهم دیگه انتخابشون بکنیم 

ul,li{  }

برای حدف کردن بولت‌های لیست هامون ما میتوانیم بیاییم و از دو ویژگی استفاده بکنیم یکی list-style = none و

دومی  ویژگی list-style-type = none   که این پراپرتی‌ها مقادیر دیگه ای هم دارند که باید امتحان بکنیم  

حال اگر بخاهیم به جای این بولت از یک تصویر جایگزین استفاده بکنیم باید بیایم و از پراپرتی  list-style-image  استفاده بکنیم که با url  ادرس بدهیم

خلاصه نویسی با استفاده از ویژگی list-style که سه تا مقدار میگیرد اولی list-style-type هست دومی ویژگی‌های outside/inside  که مقدار تو رفتگی را مشخص میکند و سومی هم list-style-image  هستش این ویژگی میتواند تمام مقدارهای بالا رو به صورت تکی هم بیاد بگیرد 

نکته » ویژگی که مقادیر  outside/inside  میگیرد مربوط به list-style-position  هستش 

معرفی پراپرتی display : ما با استفاده از آن میتوانیم خاصیت‌های عناصر inline  و block  رو تغیر بدهیم یعنی مثلا اون عنصری که اینلاین هست رو تبدیل به بلاک بکنیم 

تفاوت inline  و inline-block  

عناصر inline با اینکه margin و padding میگیرن ولی عناصر مجاورشون رو به صورت افقی هل میدن و به صورت عمودی تفاوتی ایجاد نمیکنن و تفاوت اصلیشون با عناصر inline-block  اینه که width ,height نمیپذیرن ,ینی هر عددی به این دو خاصیت بدی تاثیری نمیذارن 

در مقابل inline-block  باعث میشه که عناصر هم margin , padding بگیرن هم  width و height 

یعنی با ست کردن عددی برای عرض و ارتفاع , این عرض و ارتفاع برای عنصر در نظر گرفته میشه و تاثیرش قابل مشاهده اس

پس جمع بندی این شد که:

inline : مقادیر width و height نمیگیره و تاثیر margin padding اش روی عناصر مجاور و افقیه 

inline-block : مقادیر width و height رو میپذیره و متناسب با اون‌ها تغییر میکنه 

نکته » تفاوت‌های display : none  و  visibility : hidden دومی میاد یک لاین خالی به اندازه ابعاد اون عنصر برای ما درست میکند ولی اولی کلن اون عنصر رو حذف میکند و هیچ فضایی رو براش دیگه در نظر نمیگیرد