405 css样式的研究 list-style-type 属性研究（cssstyledeclaration）

25-02-20 17

如果您对405css样式的研究list-style-type属性研究感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于405css样式的研究list-style-type属性研

如果您对405 css样式的研究 list-style-type 属性研究感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于405 css样式的研究 list-style-type 属性研究的详细内容，我们还将为您解答cssstyledeclaration的相关问题，并且为您提供关于、CSS list-style 属性的用法、css list-style-image属性怎么用、CSS list-style-type 属性的有价值信息。

本文目录一览：

405 css样式的研究 list-style-type 属性研究（cssstyledeclaration）
">
CSS list-style 属性的用法
css list-style-image属性怎么用
CSS list-style-type 属性

405 css样式的研究 list-style-type 属性研究（cssstyledeclaration）

CSS 列表的样式 list-style-type、list-style-position和list-style-image 属性

在CSS中，列表元素是一个块框，列表中的每个表项也是一个块框，只是在表项前面多了一个项目符号。列表的格式化，主要由浏览器完成而不是由设计人员完成设计人员只能通过 list-style属性来定义列表的样式

list-style属性只对 display 属性值为 list-item 的对象有效，对其它类型对象无效。list-style属性的语法格式为：

list-style：[ list-style-type ] || [ list-style-position ] || [ list-style-image ]
也就是说，list-style属性可以分解为 list-style-type、list-style-position和list-style-image 这3个独立的属性，下面分别进行介绍。

list-style-type

常用属性值及效果说明见表 6?1：

表 6-1 list-style-type属性的常用属性值及效果说明
属性值效果说明
none 不使用任何项目符号
disc 默认值，实心圆
circle 空心圆
square 实心矩形
decimal 数字1、2、3、4、5
decimal-leading-zero 以0打头的数字，01、02、03、04、05
lower-alpha 小写英文字母，a、b、c、d、e
upper-alpha 大写英文字母，A、B、C、D、E
lower-roman 小写罗马数字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
upper-roman 大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ (全是手写做个图会更清楚但太麻烦浪费时间)

if一个元素的 list-style-image属性:none,or list-style-image指定图像无法正常时，由 list-style-type属性决定 list-item 元素的外观

CSS无法区别一个列表是有序，还是无序列表，不管是有序还是无序列表，都是用 list-style-type属性来定义列表项符号。

只要我愿意，完全可以让一个有序列表使用实心圆，而非数字作为项目符号。如果项目符号设置为数字或字母，这些数字或字母由浏览器自动计算

如果为 ul ol 定义 list-style-type属性，则所有 li 都使用相同的项目符号。当然也可以为 li 元素单独设置type属性，让只对该 li 元素有效。

.disc {
   list-style-type: disc;
}
.circle {
   list-style-type: circle;
}
.decimal-leading-zero {
   list-style-type: decimal-leading-zero;
}
.lower-alpha {
   list-style-type: lower-alpha;
}
.upper-roman {
   list-style-type: upper-roman;
} 除了第一个好像其他都没学吗一点印象也没有
上述代码定义 5 个类，每个类定义了不同的列表项目符号类型，这 5 个类分别用于同一个 ul 元素下的不同 li 元素。

<ul>
    <lihttps://www.jb51.cc/tag/dis/" target="_blank">disc">disc：默认值，实心圆</li>
    <li>circle：空心圆</li>
    <li>decimal-leading-zero：以0打头的数字 01、02</li>
    <li>lower-alpha：小写英文字母a、b、c、d、e</li>
    <li>upper-roman：大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ</li>
</ul>

list-style-type属性效果
5 个类分别用同一个 ul 不同 li 元素后，不同的 li 具有不同的项目符号。

如果禁止显示项目符号，把 list-style-type属性值： none，none 会导致浏览器在原本放置项目符号的位置不显示任何内容，蛋挞不会中断有序列表

如，有序列表元素：

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

list-style-type属性具有继承性，所以，如果希望嵌套列表中使用不同的项目符号，可能需要在内层列表中单独定义。

list-style-position

list-style-position属性设置列表项目符号的位置及列表项的对齐方式， outside | inside，默认 outside。

outside 表示列表项目符号放在内容外，列表项以内容为准对齐 inside 表示项目符号放在内容以内，列表项以项目符号为准对齐。如：

ul {
   padding: 0;
   border: 1px solid #444;
   list-style-type: square;
}
.outside {
    list-style-position: outside;
}
.inside {
    list-style-position: inside;
}
<ul>
    <li>outside的列表，列表项以内容为准对齐</li>
    <li>outside的列表，列表项以内容为准对齐</li>
</ul>
<ul>
    <li>inside的列表，列表项以标记为准对齐</li>
    <li>inside的列表，列表项以标记为准对齐</li>
</ul>
上述代码中，第一个列表采用 outside 列表项标记，第二个列表采用 inside 列表项标记

list-style-position属性效果
如果列表项内容为多行，在内容发生换行后，outside 的列表项是以内容为准对齐，而 inside 的列表项则以项目符号为准对齐。

outside 列表的项目符号不但出现在列表项的内容之外，也出现在列表元素的内容之外，这是因为项目符号实际上并不是列表内容区的一部分，它不占据容器的空间

所以，在列表元素 margin 或 padding 是 0 时，项目符号就有可能覆盖其它或被其它覆盖如果发现列表的项目符号显示不出来，这可能是原因之一（纯属自己想，不为准）

list-style-image

提供的列表项目符号，不能满足人的需要，并且选择的范围有限 list-style-image属性定义一幅图像，取代项目符号

语法格式为：list-style-image: none | url()

默认为none，表示 list-style-type属性指定的列表项目符号；url()表示url 指定的图像取代列表项目符号，如果图像无效， list-style-type属性会生效

ul {
list-style-image: url(img/square.png);
}
<ul>
<li>list-style-type属性</li>
<li>list-style-position属性</li>
<li>list-style-image属性</li>
ul
代码中，使用图像 square.png 作为列表项标记

list-style-image属性效果
就这么简单，只需一个 url() ，可使用图像作为项目符号不过，在选择图像时要当心，选择合适尺寸的图片，否则项目符号不清晰

通常，为了防止一些意外情况，如图像未能加载、或被破坏、或浏览器无法识别图像的格式等等，列表定义一个备用的 list-style-type 是一个很好的实践。

ul {
list-style-image: url(img/square.png);
list-style-type: square;
}
由于list-style-image属性具有继承性，所以，内层的所有列表都会使用该图像作为项目符号。如果不希望这种情况发生，假如希望内层列表使用实心矩形

就需要把内层列表的 list-style-type设置 square 另外，由于 list-style-image比 list-style-type属性的优先级高。因此，还需要把内层列表的 list-style-image属性为 none。

ul ul {
list-style-image: none;
list-style-type: square;
}

">

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

css 样式引入 href="css/layout.css?id=7" 是什么意思？

CSS list-style 属性的用法

css list-style 属性的用法

list-style 用作上述属性的简写。 list-style 允许您将所有列表属性指定到单个表达式中。

示例

<html>
   <head>
   </head>
   <body>
      <ul>
         <li>Table</li>
         <li>Chair</li>
      </ul>
   </body>
</html>

登录后复制

以上就是CSS list-style 属性的用法的详细内容，更多请关注php中文网其它相关文章！

css list-style-image属性怎么用

css list-style-image 属性用于指定图像作为有序或无序列表项的标志。通常使用 list-style-position 属性控制图像标记的位置。需始终规定一个 "list-style-type" 属性以防图像不可用。

css list-style-image属性怎么用

css list-style-image属性怎么用？

list-style-image 属性使用图像来替换列表项的标记。

基本语法：

立即学习“前端免费学习笔记（深入）”；

list-style-image:URL|none;

登录后复制

属性值：

●　URL：图像的路径。

●　none：默认。无图形被显示。

说明：这个属性指定图像作为一个有序或无序列表项标志。通常使用 list-style-position 属性控制图像相对于列表项内容的放置位置。

注释：请始终规定一个 "list-style-type" 属性以防图像不可用。所有浏览器都支持 list-style-image 属性。

css list-style-image属性示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul 
{
list-style-image:url(&#39;sqpurple.gif&#39;);
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

登录后复制

效果图：

以上就是css list-style-image属性怎么用的详细内容，更多请关注php中文网其它相关文章！

CSS list-style-type 属性

关于有序列表type 属性兼容，CSS的list-style-type属性样式可以解决有序列表<ol> 元素的 type 属性兼容问题。

有序列表的项目符号的类型，包括1，A，a，I，i，常用的有阿拉伯数字1,2,3，英文字母a,b,c，大写英文字母A,B,C，罗马字母i,ii,iii,iv，大写罗马字母I,II,III,IV

前面说过，尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性。

<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>CSS的list-style-type</title> <style type="text/css"> ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} </style> </head> <body> <p>Type circle:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Type square:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Type upper-roman:</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <p>Type lower-alpha:</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>

通过CSS设置不同的列表样式，从而达到有序列表<ol>的type属性相同的效果。

【有序列表和无序列表均可以应用】

兼容：所有浏览器都支持 list-style-type 属性。

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01,02,03,等。)
lower-roman	小写罗马数字(i,iv,v,等。)
upper-roman	大写罗马数字(I,IV,V,等。)
lower-alpha	小写英文字母The marker is lower-alpha (a,c,d,e,等。)
upper-alpha	大写英文字母The marker is upper-alpha (A,C,D,E,等。)
lower-greek	小写希腊字母(alpha,beta,gamma,等。)
lower-latin	小写拉丁字母(a,等。)
upper-latin	大写拉丁字母(A,等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an,ban,gan,等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a,i,u,o,ka,ki,等。（日文片假名）
katakana	标记是：A,I,U,O,KA,KI,等。（日文片假名）
hiragana-iroha	标记是：i,ro,ha,ni,ho,he,to,等。（日文片假名）
katakana-iroha	标记是：I,RO,HA,NI,HO,HE,TO,等。（日文片假名）

拓展：有序列表<ol>的新属性

<ol> 有序列表

【H5新属性】

①reversed---规定列表顺序为降序。(9,8,7...)

兼容：目前只有 Chrome 和 Safari 6 支持 reversed 属性。

<ol reversed> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

②start---规定有序列表的起始值

兼容：尽管不赞成使用 start 属性，不过所有浏览器都支持 start 属性。注释：目前，仍然没有 start 属性的 CSS 替代方案。

<ol start="5" reversed> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </ol>

③type----规定有序列表的项目符号的类型，包括1，A，a，I，i

注意：尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性

<ol type="I"> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </ol>

我们今天的关于405 css样式的研究 list-style-type 属性研究和cssstyledeclaration的分享就到这里，谢谢您的阅读，如果想了解更多关于、CSS list-style 属性的用法、css list-style-image属性怎么用、CSS list-style-type 属性的相关信息，可以在本站进行搜索。

本文标签：