صفت list-style در css
صفت list-style در css نشانه گر آیتم لیست تگ html
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت list-style در css توضیحاتی را ارائه نماییم. ویژگی کاربردی list-style در زبان css و در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.
معرفی و کاربرد ویژگی جدید list-style در زبان طراحی سی اس اس
به کمک صفت list-style در CSS می توانیم تصویر ، مکان و نوع نشانه گر آیتم های لیست را درون تگ های html مشخص کنیم. خصوصیت list-style در حقیقت به نوعی یک مختصرنویسی برای 3 ویژگی دیگر مرتبط با آیتم های لیست در زبان سی اس اس می باشد، که عبارتند از:
- خصوصیت list-style-type
- خصوصیت list-style-position
- خصوصیت list-style-image
خصوصیت list-style می تواند بر روی آن دسته از تگ های html که صفت display در آنها از نوع list-item است نیز تاثیر داشته باشد.
مقادیر صفت جدید list-style در زبان طراحی css
صفت list-style که در زبان طراحی CSS1 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:
- مقدار list-style-type
- مقدار list-style-position
- مقدار list-style-image
- مقدار initial
- مقدار inherit
برای کسب اطلاعات بیشتر در مورد طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
مقدار list-style-type درون صفت list-style در css
اگر خاصیت list-style را برای یک عنصر html برابر با مقدار list-style-type تعریف کنیم، یعنی می خواهیم نوع نشانگر آیتم های لیست را در عنصر html مربوطه تعیین کنیم. مقدار پیش فرض برای این حالت مقدار disc می باشد.
div{ list-style: disc; }
مقدار list-style-position درون خاصیت list-style در زبان css
اگر خاصیت list-style را برای یک عنصر html برابر با مقدار list-style-position تعریف کنیم، یعنی می خواهیم موقعیت نشانگر آیتم های لیست را در داخل یا خارج باکس اصلی عنصر html مربوطه تعیین کنیم.
div{ list-style: outside; }
مقدار list-style-image درون خاصیت list-style در زبان سی اس اس
اگر صفت list-style در css را برای یک تگ html برابر با مقدار list-style-image تعریف کنیم، یعنی می خواهیم یک آدرس ( url ) جهت فراخوانی تصویری برای نشانگر آیتم های یک لیست دورن یک عنصر html تعریف کنیم.
div{ list-style: url('sqpurple.gif'); }
مقدار initial درون خاصیت list-style در زبان css
اگر خاصیت list-style را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت list-style در زبان سی اس اس
اگر خاصیت list-style را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
بررسی خاصیت list-style از نظر نسخه زبان طراحی css
ویژگی کاربردی list-style در زبان css و در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
بررسی ساختاری خصوصیت list-style در زبان طراحی سی اس اس
عناوین ساختاری خاصیت list-style | وضعیت ساختاری خاصیت list-style |
مقدار پیش فرض | disc outside none |
قابلیت توارث | دارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS1 |
سینتکس صفت در جاوا اسکریپت | "object.style.listStyle="decimal inside |
پشتیبانی مرورگرهای اینترنتی از خاصیت list-style در زبان طراحی css
خاصیت css | |||||
list-style | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
پیوندهای مهم و کاربردی
تگ های HTML در سایت آموزی | تگ های جدید HTML5 در سایت آموزی | صفات تگ های HTML در سایت آموزی | تگ های منسوخ شده HTML5 در سایت آموزی | تگ های block level و inline level در سایت آموزی | تگ های HTML در W3school | ویژگی های CSS در سایت آموزی | ویژگی های CSS در W3schools
صفت list-style در css نشانه گر آیتم لیست تگ html – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید