فصل css3 خلاصه مطالب جلسه 8- لیست ها ( list ) و نمایش المان ها ( display )

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

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

نکته » تگ های 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 دومی میاد یک لاین خالی به اندازه ابعاد اون عنصر برای ما درست میکند ولی اولی کلن اون عنصر رو حذف میکند و هیچ فضایی رو براش دیگه در نظر نمیگیرد