<< Previous Next >>

CSS Lists

HTML లో Ordered list, Unordered list అని రెండు రకాల list లు ఉంటాయి. Ordered list అనగా ఉదాహరణకు మనం Hotel కు వెళ్ళినప్పుడు అందులోని 'menu items' గనక 1, 2, 3, ... అని ఇలా నెంబెర్ల ద్వారా వ్రాయబడి ఉంటే అందులోని menu items ని "ordered list" లో ఉన్నవి అనుకోవచ్చును. అదే నెంబెర్లకు బదులుగా "dots" లో ఉంటే (క్రింది పటం లో వలె) అప్పుడు 'unordered list' గా పరిగణించ వచ్చును. ఈ dots ని 'bullets' అంటారు. CSS ద్వారా images ని list item markers గా ఉపయోగించ వచ్చును.

CSS Unordered list examples


వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.A{list-style-type: circle;}
ul.B{list-style-type: square;}
</style>
</head>
<body>
<u>Unordered lists examples</u>
<ul>
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ul>
<ul class="A">
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ul>
<ul class="B">
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ul>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Unordered lists examples
  • Ice Cream
  • Pizza
  • Burger
  • Ice Cream
  • Pizza
  • Burger
  • Ice Cream
  • Pizza
  • Burger


CSS Ordered list examples


వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ol.A{list-style-type: upper-roman;}
ol.B{list-style-type: lower-alpha;}
</style>
</head>
<body>
<u>Unordered lists examples</u>
<ol>
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ol>
<ol class="A">
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ol>
<ol class="B">
<li>Ice Cream</li>
<li>Pizza</li>
<li>Burger</li>
</ol>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Ordered lists examples
  1. Ice Cream
  2. Pizza
  3. Burger
  1. Ice Cream
  2. Pizza
  3. Burger
  1. Ice Cream
  2. Pizza
  3. Burger


పై ఉదాహరణలలో గల 'circle', 'square', '1,2,3', 'I,II, III' మరియు 'a,b,c' లను list item markers అంటారు.

An Image as The List Item Marker

CSS ద్వారా images ని list item markers గా ఉపయోగించ వచ్చును.

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {list-style-image: url('stars.gif');}
</style>
</head>
<body>
<u>Image as The List Item Marker</u>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Ice Cream</li>
</ul>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Image as The List Item Marker
  • Pizza
  • Burger
  • Ice Cream

పై ఉదాహరణలో stars యొక్క alignment సరిగ్గా లేనట్టుగా గమనించవచ్చు. ఈ తేడా browser ను బట్టి మారుతూ ఉంటుంది. ఈ alignment ని set చేయటానికి World Wide Web సంస్థ క్రింది code ని పరిష్కారంగా విడుదల చేసింది. ఇలా వ్రాయడం వల్ల stars యొక్క alignment అన్ని browser లలో ఒకేలా కనబడుతుంది.

Crossbrowser Solution to set an alignment of images which are list item markers

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul { list-style-type: none;
padding: 0px;
margin: 0px;}
ul li {background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;}

</style>
</head>
<body>
<u>Image as The List Item Marker</u>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Ice Cream</li>
</ul>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.


తదుపరి CSS Tables గురించి...

<< Previous Next >>
Back to Top