CSS లిస్ట్

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

CSS లిస్ట్

కొంతమంది వివరణాత్మక పాఠం లేని ఏ విషయాన్ని కూడా జాబితాగా పరిగణించవచ్చు. జనసంఖ్యలు, సూర్యసమూహం, కుటుంబ పేర్లు, సందర్శన జాబితాలు, మరియు మీ అన్ని స్నేహితులు కూడా జాబితాలు లేదా జాబితాల జాబితాలుగా ప్రస్తుతించబడవచ్చు.

జాబితాలు ఇటువంటి వివిధమైనవి కావడం తో, అది చాలా ముఖ్యమైనది, కాబట్టి, CSS లో జాబితా శైలులు కనుక తక్కువగా ఉన్నది ఒక పరిణామం ఉంది.

జాబితా రకం

జాబితా శైలిని ప్రభావితం చేయడానికి, సరళంగా మరియు అత్యంత పూర్తిగా ఉండే మార్గం జాబితా సూచకాన్ని మార్చడం ఉంది.

ఉదాహరణకు, ఒక అనక్రమ జాబితాలో, జాబితా అంశం మార్కర్ స్పందించే చివరి పదం స్పందిస్తుంది. క్రమబద్ధ జాబితాలో, మార్కర్ అక్షరాలు, సంఖ్యలు లేదా కంటికి కనిపించే మరొక సంఖ్యా విధానంలో ఉండవచ్చు.

జాబితా అంశం మార్కర్ రకాన్ని మార్చడానికి ఉపయోగించవచ్చు గుణం: list-style-type:

ul {list-style-type : square}

పైన పేర్కొన్న పేరు అనేది అనక్రమ జాబితాలో జాబితా అంశం మార్కర్ ను బ్యాక్ స్కేల్ గా సెట్ చేస్తుంది.

జాబితా అంశం చిత్రం

కొన్నిసార్లు, సాధారణ సూచకాలు పోతున్నాయి. మీరు ప్రతి సూచకానికి ఒక చిత్రాన్ని ఉపయోగించాలని చూడవచ్చు, ఇది ఈ ఉపయోగాన్ని చేస్తుంది: list-style-image గుణం చేయడం ద్వారా:

ul li {list-style-image : url(xxx.gif)}

ఒక ఉల్లింగు విలువను ఉపయోగించడం ద్వారా చిత్రాన్ని ఉపయోగించవచ్చు.

జాబితా సూచకం స్థానం

CSS2.1 జాబితా సూచకాన్ని జాబితా అంశం లోపల లేదా లోపల ఉండేలా తెలుసుకోవచ్చు. ఈ విషయాన్ని ఉపయోగించి తెలుసుకోవచ్చు: list-style-position పూర్తి చేసింది.

సరళ జాబితా శైలి

సులభతరంగా, ఈ మూడు జాబితా శైలి గుణాలను ఒక సులభమైన గుణానికి మెరుగుపరచవచ్చు:list-styleఇలా ఉంటుంది:

li {list-style : url(example.gif) square inside}

list-style యొక్క విలువలను ఏ క్రమంలోనైనా జాబితాభాగంలో కూడా పొందవచ్చు, మరియు ఈ విలువలను పాటించవచ్చు. ఒక విలువను అందించినట్లయితే, ఇతర విలువలను అప్రమేయ విలువలతో పూరిస్తాయి.

CSS జాబితా ఉదాహరణ:

అనక్రమ జాబితాలో వివిధ రకాల జాబితా మార్కర్
本例演示在CSS中不同类型的列表项标记。
క్రమబద్ధ జాబితాలో వివిధ రకాల జాబితా అంశాల మార్కర్
本例演示在CSS中不同类型的列表项标记。
所有的列表样式类型
本例演示在CSS中所有不同类型的列表项标记。
将图像作为列表项标记
本例演示如何将图像作为列表项标记。
放置列表标记
本例演示在何处放置列表标记。
在一个声明中定义所有的列表属性
本例演示将所有针对列表的属性设置于一个简写属性。

CSS 列表属性(list)

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image జాబితా అంశం మార్కర్ చిత్రాన్ని అనుసరించండి.
list-style-position జాబితాలో జాబితా అంశం మార్కర్ స్థానాన్ని అనుసరించండి.
list-style-type జాబితా అంశం మార్కర్ ఆఫ్సెట్ అనుసరించండి.
marker-offset