سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبل با ویژگی list-style-position آشنا شدیم؛ این ویژگی موقعیت list-item markers یا bullet points را مشخص می کند.
در این جلسه آموزش کار با ویژگی list-style-type در CSS را به علاقمندان این دوره ارائه می کنیم.
به مثال زیر توجه نمایید؛ در این مثال چند استایل لیست مختلف را تنظیم کرده ایم.
1 2 3 4 | ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} |
ویژگی list-style-type نوع list-item marker را در لیست مشخص می کند.
مقدار پیش فرض | disc |
به ارث بردن | بله |
متحرک بودن | خیر |
نسخه | CSS1 |
سینتکس JavaScript | “object.style.listStyleType=”square |
در ادامه آموزش کار با ویژگی list-style-type در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
نام ویژگی | |||||
list-style-type | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
Internet Explorer/Edge و اپرا ۱۲ و نسخه های قدیمی تر آن مقادیر : cjk-ideographic, hebrew, hiragana, hiragana-iroha katakana و katakana-iroha را پشتیبانی نمی کنند.
1 | list-style-type: value; |
مقدار | توضیحات |
---|---|
disc | مقدار پیش فرض. marker یک دایره تو پر است. |
armenian | marker مبتنی بر زبان ارمنی نمایش داده می شود. |
circle | marker یک دایره است. |
cjk-ideographic | marker اعداد ساده ایدئولوژیک است |
decimal | marker یک عدد است. |
decimal-leading-zero | marker دارای صفرهای است که زودتر از اعداد غیر صفر آمده اند؛ مانند (۰۱ ، ۰۲ ، ۰۳ و غیره) |
georgian | marker مبتنی بر زبان گرجی (گرجستان) نمایش داده می شود. |
hebrew | marker مبتنی بر زبان عبری نمایش داده می شود. |
hiragana | marker مبتنی بر زبان هیراگانا (دستور زبان ژاپنی) نمایش داده می شود. |
hiragana-iroha | marker مبتنی بر hiragana-iroha نمایش داده می شود. |
katakana | marker مبتنی بر زبان Katakana (دستور زبان ژاپنی) نمایش داده می شود. |
katakana-iroha | marker مبتنی بر زبان Katakana iroha نمایش داده می شود. |
lower-alpha | marker مبتنی بر حروف کوچک مثل (a ، b ، c ، d ، e و غیره) است. |
lower-greek | marker مبتنی بر حروف کوچک زبان یونانی نمایش داده می شود. |
lower-latin | marker با حروف کوچک اسکی (a, b, c,..) نمایش داده می شوند. برابر با مقدار lower-alpha است. |
lower-roman | marker با اعداد رومی کوچک (i, ii, iii, iv, v) نشانه گذاری می شوند. |
none | هیچ marker نمایش داده نمی شود. |
square | marker به صورت مربع خواهد بود. |
upper-alpha | marker با حروف بزرگ (A, B, C,..) نمایش داده می شوند. |
upper-greek | marker مبتنی بر حروف بزرگ زبان یونانی نمایش داده می شود. |
upper-latin | برابر با مقدار upper-alpha است. |
upper-roman | marker با اعداد رومی بزرگ (I, II, III, IV, V) نمایش داده می شوند. |
initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
نشان دادن همه list-item markers های مختلف :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | ul.a {list-style-type: circle;} ul.b {list-style-type: disc;} ul.c {list-style-type: square;} ol.d {list-style-type: armenian;} ol.e {list-style-type: cjk-ideographic;} ol.f {list-style-type: decimal;} ol.g {list-style-type: decimal-leading-zero;} ol.h {list-style-type: georgian;} ol.i {list-style-type: hebrew;} ol.j {list-style-type: hiragana;} ol.k {list-style-type: hiragana-iroha;} ol.l {list-style-type: katakana;} ol.m {list-style-type: katakana-iroha;} ol.n {list-style-type: lower-alpha;} ol.o {list-style-type: lower-greek;} ol.p {list-style-type: lower-latin;} ol.q {list-style-type: lower-roman;} ol.r {list-style-type: upper-alpha;} ol.s {list-style-type: upper-greek;} ol.t {list-style-type: upper-latin;} ol.u {list-style-type: upper-roman;} ol.v {list-style-type: none;} ol.w {list-style-type: inherit;} |
نحوه افزودن bullet colors برای <ul> یا <ol> از طریق حذف bullets های پیش فرض آن ها و افزودن HTML entity که به مانند bullets ها به نظر می رسند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ul { list-style: none; /* Remove list bullets */ padding: 0; margin: 0; } li { padding-left: 16px; } li:before { content: "•"; /* Insert content that looks like bullets */ padding-right: 8px; color: blue; /* Or a color you prefer */ } |
در این جلسه به آموزش کار با ویژگی list-style-type در CSS پرداختیم؛ ویژگی list-style-type نوع list-item marker را در لیست مشخص می کند.
در جلسه آینده با ویژگی margin و نحوه کار با آن آشنا خواهید شد.
با پی وی لرن همراه باشید.