Español

 

English

Tutorial lists in HTML and CSS properties.	HTML Document.
Tutorial of the lists in HTML (Definitions, ordered lists, unordered list) and their properties in CSS: LIST-STYLE, LIST-STYLE-TYPE, LIST-STYLE-IMAGE, LIST-STYLE-POSITION
Autor: Wmasterfacil	www.wmasterfacil.com

NOTE: Many of the definitions are derived wholly or simplified on the recommendation of the W3C Cascading Style Sheets, Level 2 Revision 1 (CSS2.1), and Recommendation of the W3C "HTML 4.01 Specification" that are in the Section HTML / CSS, this site.

In this tutorial we will learn to use lists. Within these, we will work with the lists of definitions and lists itself in its two versions: ordered and unordered.

To do this we will be using concepts that we have learned in previous tutorials (so we build our knowledge), while we are describing and learning de new ones.

Interplanting definitions and concepts, both HTML (the definitions and lists) and CSS (visual formatting properties for lists that we use).

Definitions Lists It is a type of very particular and restricted lists. It only consists of a list of terms with its respective descriptions. It is also true that it is very easy to use.   < DL > < / DL > These are the opening and closing tags for a list of definitions. Both are mandatory. Between the first and the last one, we will write thw data of our list.   < DT > It is the tag of the terms to define in the list. We can write as many as we want. These terms are aligned to the left border of its container block. It has closing tag < / DT > but is optional.   < DD > Is the tag of the definitions of each term. They are alignedat the left, but with an indentation to the right. It also has a closing tag < / dd > but as in the previous case, it is optional.

Take a html file with the following structure:

Running the EXAMPLE, we see that in the yellow block, a list of definitions appears without any kind of visual format, ie without any associated CSS code. In the orange block I've added some visual improvements to the terms. This is the result of the two lists.

---

^ Top

Ordered and unordered lists: The lists, as its name indicates are lists of several elements, which may or may not be sorted. To specify the order or not, there are two different tags, with the tag describing the contents of the list, the same for both cases.   < UL > < / UL > These are the opening and closing tags for unordered lists. Both are obligatory. Between the first and last one, we will write the elements of our list not ordered. In this case, each list element is preceded by a small symbol like a marker, which is varied in our fancy when we see the corresponding CSS properties.   < OL > < / OL > These are the opening and closing tags of the ordered list. Both are obligatory. Between the first and last one, we will write the elements of our ordered list. In this case, each list element is preceded by an ascending number starting from 1 as a marker, which is varied in our fancy when we see the corresponding CSS properties.   < LI > They are the objects or elements of the list. It Has a closing tag < / LI > but is optional.

Take a html file with the following structure:

Running the EXAMPLE, we see that in the yellow block, there are two lists. The higher is non-orderer and the lower is a double-linked list, this time ordered. In the orange block, there are two lists again. The superior is an orderly and the inferior is a double-linked list non-orderer. The numbering in the ordererr as the markers graphs in the unordered are specified via CSS.

---

^ Top

We turn now to the formatting of the ordered lists, unordered and definition lists using CSS properties.

LIST-STYLE-TYPE Specifies the type of marker that is displayed before the list item if the property list-style-image has the value none (otherwise, the last one has priority and the list-style-type has no effect). We'll see now after the property list-style-image. There are three types of markers, graphics (glyphs), numbers and alphabets. The values that can take are:   disc, circle, square A hollow disk,a filled circle and a square respectively. Its representation can vary depending on what browser you use.   decimal Decimal number starting with 1.   decimal-leading-zero Decimal number starting with 1 but supplemented with leading zeros 01, 02, 03...   lower-roman Roman numerals in lowercase.   upper-roman Roman numerals in uppercase.   georgian Georgian numbering.   armenian Armenia numbering.   lower-latin or lower-alpha Lowercase letters in ASCII   upper-latin or upper-alpha Uppercase letters in ASCII   lower-greek Classical Greek lowercase letters.

NOTE: These properties are used to give format complete UL or OL lists, but can they also be used to format a specific element LI. We must also take into account that a UL element can be formatted to use a decimal numbering, and an OL element, can be formatted to use markers glyphs, but it is not right. We must use markers that denote order in OL lists, and markers only represent UL lists.

The following code shows two linked lists, one ordered and one disordered. I have written some CSS properties on the same line so that the code is not so long.

The implementation of the EXAMPLE of this code, shows clearly the effect of the property list-style-type.

The following shows all the existing formats.

You can run EXAMPLE , but as in IExplorer all possibilities are not seen, here I leave with you a screen changed, so it appears in two columns, the screen output to Mozilla Firefox.

---

^ Top

LIST-STYLE-IMAGE With this property we can specify the image that we want it to be used as a marker of our list elements, evading the restrictions of the list-style-type. If this property is defined, and the picture referred to is accessible, it will revoke any declaration of the property list-style-type. The values that can take are:   < URL where the image is stored > Is the address where we find the image we want to use. Being specified url ( "direction of the image").   none To declare it invalid. It is useful, because this property is inherited, and there are times we need to bring it to zero.

The following code shows two lists, one by referring to an image that exists, and another that doesn't. In both the property list-style-type are also specified, so you can see how they are complemented.

The EXAMPLE shows the result.

---

^ Top

LIST-STYLE-POSITION With this property, we specify if the marker is included within the space occupied by the list or not. This only shows when the list element is longer than one line. The values that can take are:   outside The marker is outside the space where you type the text (when changing to the next line, the content starts in line to the first character of the first line).   inside The marker is inside the space where you type in the text (when changing to the next line, the content will statr in line to the left border of the marker).

The following code shows how to declare a list of each form. I have put color to the background of the elements of the lists, so it is seen well as in the case of 'inside', the marker is part of the box containing the text, and if 'outside', no.

Run the EJXAMPLE to see the result.

---

^ Top

LIST-STYLE < list-style-type > < list-style-position > < list-style-image > It's an abreviated form to declare the three previous properties. For example, instead of defining:   UL {      list-style-type: square;      list-style-position: inside;      list-style-type: url(mas.gif);      } we could do: UL { list-style:square inside url(mas.gif);}

This is all about lists. Remember however, that we can and must combine these with other properties we have given in previous tutorials, in order to achieve better visual results.

Here I leave you something striking EXAMPLE of the combined use of lists with many other CSS properties.

---

^ Top

Policies