సిఎస్ఎస్ లిస్ట్
- ముంది పేజీ సిఎస్ఎస్ లింక్
- తదుపరి పేజీ సిఎస్ఎస్ టేబుల్
అనారోగ్య జాబితా:
- కాఫీ
- టీ
- కోకా కోలా
- కాఫీ
- టీ
- కోకా కోలా
క్రమాంకిత జాబితా:
- కాఫీ
- టీ
- కోకా కోలా
- కాఫీ
- టీ
- కోకా కోలా
HTML జాబితా మరియు CSS జాబితా అనేది
HTML లో, జాబితా ప్రధానంగా రెండు రకాలు ఉన్నాయి:
- అనారోగ్య జాబితా (<ul>)- జాబితా అంశాలు సూచికలతో ఉంటాయి
- క్రమాంకిత జాబితా (<ol>)- జాబితా అంశాలు సంఖ్యలు లేదా అక్షరాలు సూచికలతో ఉంటాయి
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 అనేది జాబితా అంశం సూచిక పోసిషన్ను నిర్దేశిస్తుంది.
"list-style-position: outside;" అనేది విభాగం సూచికలు జాబితా అంశాల వెలుపల ఉంటాయి. జాబితా అంశాల ప్రతి పంక్తి ప్రారంభం వాస్తవికంగా నిలపడం జరుగుతుంది. ఇది మూల విధానం:
- కాఫీ - బేక్‌డ్ కాఫీ బీన్స్ నుండి తయారైన పానీయం
- టీ
- కోకా-కోలా
"list-style-position: inside;" జాబితా పద్ధతి అంశాలను అంతర్గతంగా చూపిస్తుంది. ఇది అంశం భాగంగా ఉంటుంది కాబట్టి ఇది పాఠం భాగంగా అవుతుంది మరియు పాఠం ప్రారంభంలో కదిలుతుంది:
- కాఫీ - బేక్‌డ్ కాఫీ బీన్స్ నుండి తయారైన పానీయం
- టీ
- కోకా-కోలా
ఉదాహరణ
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
మూల సెట్చేయండి
list-style-type:none అంశాలను తొలగించడానికి, <ul> లేదా <ol> లో జతచేయండి మార్జిన్:0 మరియు ప్యాడింగ్:0 :
ఉదాహరణ
ul {
list-style-type: none;
మార్జిన్: 0;
ప్యాడింగ్: 0;
}
జాబితా - సరళ అంశం
list-style అంశం ఒక సరళ అంశం ఉంది. ఇది ఒక అంశంలో అన్ని జాబితా అంశాలను సెట్‌చేస్తుంది:
ఉదాహరణ
ul {
list-style: square inside url("sqpurple.gif");
}
సరళ అంశాలను ఉపయోగించినప్పుడు, అంశాల విలువల క్రమం ఈ కింది విధంగా ఉంటుంది:
list-style-type(జాబితా అంశం టాగ్‌ని చిత్రం చూపించలేకపోయినప్పుడు ఈ అంశానికి విలువ చూపిస్తారు)list-style-position(జాబితా అంశం టాగ్‌ని కంటెంట్ స్ట్రీమ్ లోపల లేదా బాహ్యంగా చూపించాలో నిర్దేశించండి)list-style-image(చిత్రాన్ని జాబితా అంశం టాగ్‌గా నిర్దేశించండి)
పైన పేర్కొన్న ఏదైనా అంశం లేకపోతే, లేకపోయిన అంశానికి మూల విలువను చేరుస్తారు (ఉన్నట్లయితే).
జాబితా రంగు స్టైల్‌లను సెట్చేయండి
మనం కూడా రంగు సెట్‌లను ఉపయోగించవచ్చు జాబితా స్టైల్‌లను మరింత ఆకర్షణీయంగా చేయవచ్చు.
మీరు <ol> లేదా <ul> టాగ్‌లకు ఏదైనా స్టైల్‌ని జతచేస్తే అది మొత్తం జాబితాను ప్రభావితం చేస్తుంది, కానీ <li> టాగ్‌లకు జతచేస్తే అది ప్రతి జాబితా అంశాన్ని ప్రభావితం చేస్తుంది:
ఉదాహరణ
ol {
బ్యాక్గ్రౌండ్: #ff9999;
ప్యాడింగ్: 20px;
}
ul {
బ్యాక్గ్రౌండ్: #3399ff;
ప్యాడింగ్: 20px;
}
ol li {
బ్యాక్గ్రౌండ్: #ffe5e5;
ప్యాడింగ్: 5px;
మార్జిన్-లెఫ్ట్: 35px;
}
ul li {
బ్యాక్గ్రౌండ్: #cce5ff;
మార్జిన్: 5px;
}
ఫలితం:
- కాఫీ
- టీ
- కోకా కోలా
- కాఫీ
- టీ
- కోకా కోలా
మరిన్ని ఉదాహరణలు
- ఎక్కువ కుడి పట్టిక రంగు స్వంత జాబితా
- ఎక్కువ కుడి పట్టిక రంగు జాబితా ఏ రీతిలో సృష్టించాలో ఈ ఉదాహరణ ప్రదర్శిస్తుంది.
- పూర్తి స్క్రీన్ వెడల్పన కింది జాబితా
- 本例演示如何创建没有项目符号的带边框列表。
- 列表的所有不同列表项标记
- 本例演示了 CSS 中所有不同的列表项标记。
所有 CSS 列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。在一条声明中设置列表的所有属性。 |
| list-style-image | 指定图像作为列表项标记。 |
| list-style-position | 规定列表项标记（项目符号）的位置。 |
| list-style-type | జాబితా అంశం మార్కర్ రకం నిర్ణయిస్తుంది. |
- ముంది పేజీ సిఎస్ఎస్ లింక్
- తదుపరి పేజీ సిఎస్ఎస్ టేబుల్
