Html тег

HTML Справочник

HTML по алфавитуHTML по категорииHTML атрибутыHTML глобальныеHTML событияHTML цветаHTML холстHTML аудио/видеоHTML декларацииHTML набор кодировокHTML URL кодHTML коды языкаHTML коды странHTTP сообщенияHTTP методыКовертер PX в EMКлавишные комбинации


<!—…—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Property Values

Value Description Play it
disc Default value. The marker is a filled circle Play it »
armenian The marker is traditional Armenian numbering Play it »
circle The marker is a circle Play it »
cjk-ideographic The marker is plain ideographic numbers Play it »
decimal The marker is a number Play it »
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.) Play it »
georgian The marker is traditional Georgian numbering Play it »
hebrew The marker is traditional Hebrew numbering Play it »
hiragana The marker is traditional Hiragana numbering Play it »
hiragana-iroha The marker is traditional Hiragana iroha numbering Play it »
katakana The marker is traditional Katakana numbering Play it »
katakana-iroha The marker is traditional Katakana iroha numbering Play it »
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) Play it »
lower-greek The marker is lower-greek Play it »
lower-latin The marker is lower-latin (a, b, c, d, e, etc.) Play it »
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) Play it »
none No marker is shown Play it »
square The marker is a square Play it »
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)  Play it »
upper-greek The marker is upper-greek Play it »
upper-latin The marker is upper-latin (A, B, C, D, E, etc.) Play it »
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.) Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

List — Shorthand property

The property is a shorthand property. It is used to set all the list properties in one declaration:


ul {   list-style: square inside url(«sqpurple.gif»); }

When using the shorthand property, the order of the property values are:

  • (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • (specifies whether the list-item markers should appear inside or outside the content flow)
  • (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right


tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode


More Examples


This example demonstrates all the different list-item markers:

ul.a {list-style-type: circle;}ul.b {list-style-type: disc;}ul.c {list-style-type: square;}ol.d {list-style-type: armenian;}ol.e {list-style-type: cjk-ideographic;}ol.f {list-style-type: decimal;} ol.g {list-style-type: decimal-leading-zero;}ol.h {list-style-type: georgian;}ol.i {list-style-type: hebrew;}ol.j {list-style-type: hiragana;}ol.k {list-style-type: hiragana-iroha;}ol.l {list-style-type: katakana;}ol.m {list-style-type: katakana-iroha;} ol.n {list-style-type: lower-alpha;}ol.o {list-style-type: lower-greek;} ol.p {list-style-type: lower-latin;}ol.q {list-style-type: lower-roman;} ol.r {list-style-type: upper-alpha;}ol.s {list-style-type: upper-greek;}ol.t {list-style-type: upper-latin;} ol.u {list-style-type: upper-roman;}ol.v {list-style-type: none;} ol.w {list-style-type: inherit;}


How to add bullet colors for <ul> or <ol> by removing their default bullets and adding a HTML entity that looks like bullets (&bull;):

ul {  list-style: none; /* Remove list bullets */  padding: 0;  margin: 0;}li {   padding-left: 16px; }li:before {  content: «•»; /* Insert content that looks like bullets */   padding-right: 8px;  color: blue; /* Or a color you prefer */}

С этим читают