ホーム >>> HTML整理ノート

list-styleの一括指定

list-style:(値)
・値には、<list-style-type><list-style-image><list-style-position>の値を
 半角スペースで区切り並べる。重複する値はないので,順序は任意。
・<list-style-type><list-style-image>が重複した場合は、imageが優先される。imageが何らかの理由で表示できない時にtypeが使われる。

Sample
 

<list-style:outside url(../../images/anime/anistar.gif) square>の例

  • test 1    
  • test 2    
  • test 3   
 
 

<list-style:intside url(../../images/anime/err.gif) square>の例
(画像urlは記述ミスで、存在しないurlです。この場合type形状が使われる)

  • test 1    
  • test 2    
  • test 3   
 

Sample Source......................................................................>>>

<style type="text/css">
  div.sample li {border:1px dotted navy}
  div.sample div {width:300px;border:1px solid navy;font:80%}
</style>
</head>

<body>
<div class="sample">
 <div>
    <ul style="list-style:outside url(../../images/anime/anistar.gif) square">
        <li>test 1
     <li>test 2
     <li>test 3
  </ul>
 </div>

 <div>
  <ul style="list-style:inside url(../../images/anime/err.gif) square">
        <li>test 1
     <li>test 2
     <li>test 3
  </ul>
 </div>
</div>