<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> list style </title>
<style>
ul li {list-style-type : square;}
.class1 li{list-style-type:lower-roman;}
.class2 li{list-style-type:upper-alpha;}
.class3 li{list-style-type:lower-alpha;}
#id1, #id2{list-style-position: inside;}
#id3{list-style-image:url();}
</style>
</head>
<body>
<ul>
<li>style 1</li>
<ol class="class1">
<li>style 1-1</li>
<li>style 1-2</li>
<li>style 1-3</li>
</ol>
<li id="id1"> style 2 </li>
<ol class="class2">
<li>style 2-1</li>
<li>style 2-2</li>
</ol>
<li>style 3</li>
<ol id="id2" class="class3">
<li>style 3-1</li>
<li>style 3-2</li>
</ol>
<li id="3"> style 4</li>
</ul>
</body>
</html>1. **List Style Type**:
- The global style for `ul li` sets list items within unordered lists to have square markers.
- The `.class1` selector targets ordered list (`<ol>`) items and changes their markers to lower-roman numerals.
- The `.class2` selector applies upper-alpha (uppercase letters) list item markers to another ordered list.
- The `.class3` selector uses lower-alpha (lowercase letters) for list item markers, demonstrating the flexibility in marker styles available via CSS.
2. **List Style Position**:
- The `#id1` and `#id2` selectors use `list-style-position: inside;`, which moves the list markers inside the content flow, changing the indentation and alignment of list items.
3. **List Style Image**:
- The `#id3` selector attempts to set a list-style-image, which would replace default list item markers with a custom image. However, the `url()` function is left empty, meaning no image will be displayed. To use a custom image, a valid URL needs to be provided, e.g., `list-style-image: url('path/to/image.png');`.
4. **Incorrect HTML Nesting and ID Typo**:
- The document nests `<ol>` (ordered list) elements directly inside a `<ul>` (unordered list), which is not valid HTML. Properly, `<ol>` should be nested inside `<li>` elements or exist separately.
- There's a typo in the last list item's id (`id="3"`). It should likely be `id="id3"` to match the CSS selector defined in the `<head>`.
### Key Points:
- The document effectively demonstrates various ways to style list items using CSS, including changing the marker type, position, and using images as markers.
- It highlights the importance of CSS selectors (class and id) in applying specific styles to different parts of a document.
### Possible Improvements:
- **Correct HTML Structure**: Ensure `<ol>` elements are correctly nested within `<li>` elements or separate from the `<ul>` to adhere to HTML standards.
- **Fix ID Typo**: Correct the typo in the last list item's id to `id="id3"` to ensure the intended styles are applied.
- **Specify List Style Image**: Provide a valid image URL for the `list-style-image` property to demonstrate the use of custom images as list markers.
- **Enhance Accessibility**: Consider the accessibility implications of list styles, especially when using custom images, ensuring that list items remain clear and understandable.
'개념 > HTML+CSS' 카테고리의 다른 글
| CSS) CSS Style for Button States Example (0) | 2025.02.22 |
|---|---|
| CSS) Stylish HTML Table with CSS (0) | 2025.02.19 |
| CSS) Semantic Web Page Layout with CSS Styling (0) | 2025.02.18 |
| HTML) HTML Media Tag Usage Example (0) | 2025.02.16 |
| HTML) HTML Image and Figure Tag Example (0) | 2025.02.15 |