در دوره آموزش HTML با طریقه نوشتن لیست ها در html آشنا شدیم . انواع لیست های ترتیب دار و غیر ترتیبی و … در این جلسه آموزش CSS میخوایم بیایم در مورد قیافه ظاهری این ایست های در CSS توضیح بدیم .
اگر خاطرتون باشه وقتی لیست غیرترتیبی که همون تگ ul بود مینوشتیم مرورگر میومد یه علامت مربع کنار اون آیتم های لیست درج می کرد . حالا اگر بخوایم عوض کنیم این علامت مربع رو میتونیم از CSS استفاده کنیم . یا شاید بخوایم برای لیست ها به جای علامت های پیش فرض از عکس استفاده کنیم . خیلی از کارها رو میتونیم برای خوشگل کردن این لیست ها در CSS انجام بدیم .
تغییر آیکون لیست ها
خیلی راحت با استفاده از خصوصیت list-style-type میتونیم این علامت مربع پیش فرض رو عوض کنیم . از دایره و چیزهای دیگه میتونیم استفاده کنیم . مثال زیر رو ببینین :
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-image میتونیم این علامت مربع پیش فرض رو عوض کنیم و به جاش از عکس استفاده کنیم :
ul {
list-style-image: url('sqpurple.gif');
}
پوزیشن دهی به علامت لیست ها
برای پوزیشن دهی به این علامت های پیش فرض لیست ها میتونیم از خصوصیت list-style-position استفاده کنیم . حالا منظور از پوزیشن چیه !؟ یا داخل خود کادر لیست قرار می گیره یا بیرون از اون ! منظور از کادر درونی هم تا اینجا توی دوره آموزش CSS یاد گرفتیم قسمتی هست که وقتی حاشیه تعریف می کینم درون المان قرار می گیره و هرچی خارج از اون باشه خارج از کادر حساب میشه . مثال های پایین رو ببینین و بعدش هم طرز استفاده رو براتون کدش رو قرار دادیم .
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
حذف کردن حالت پیش فرض ظاهری لیست ها
بعضی موقع ها هم هست که ما هیچی نمیخوایم ازین حالت های پیش فرض و میخوایم خودمون طبق سلیقه خودمون همه چی رو دیزاین کنیم . فاصله های پیش فرض و بولت ها و … از خصوصیت list-style-type استفاده می کنیم و مقدار اون رو به none اختصاص میدیم . برای حذف کردن فاصله ها هم از margin و padding استفاده می کنیم تا این فاصله های پیش فرض هم حذف بشه ازش .
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
کوتاه کردن کدهای لیست
چندین بار این مورد رو بررسی کردیم توی دوره آموزش CSS و اون هم اینه که میتونیم کدها رو کوتاه کنیم و سرعت لود را بهبود بدیم . حالا برای این مورد از list-style استفاده می کنیم . مثال زیر رو ببینین :
ul {
list-style: square inside url("sqpurple.gif");
}
ترتیب کد دهی به CSS لیست ها در حالت کوتاه شده هم این جوری هستش که اول type و بعد position و در آخر هم عکس رو قرار می دیم. حالا اگه هر کدوم از این مقادیر رو درج نکنیم مرورگر میاد حالت پیش فرض در نظر می گیره و اون مقادیر رو برای المان تگ شما قرار می ده .
