CSS列表属性

CSS列表:


属性


描述


list-style


简写属性。用于把所有用于列表的属性设置于一个声明中。


list-style-image


将图象设置为列表项标志。


list-style-position


设置列表中列表项标志的位置。


list-style-type


设置列表项标志的类型。


marker-offset

1. 列表类型:list-style-type属性

(1)作用:修改用于列表项的标志类型;

(2)可能的值:



描述


none


无标记。


disc


默认。标记是实心圆。


circle


标记是空心圆。


square


标记是实心方块。


decimal


标记是数字。


decimal-leading-zero


0开头的数字标记。(01, 02, 03等)


lower-roman


小写罗马数字(i, ii, iii, iv, v等)


upper-roman


大写罗马数字(I, II, III, IV, V等)


lower-alpha


小写英文字母The marker is lower-alpha (a, b, c等)


upper-alpha


大写英文字母The marker is upper-alpha (A, B, C等)


lower-greek


小写希腊字母(alpha, beta, gamma等)


lower-latin


小写拉丁字母(a, b, c,等)


upper-latin


大写拉丁字母(A, B, C,等)


hebrew


传统的希伯来编号方式


armenian


传统的亚美尼亚编号方式


georgian


传统的乔治亚编号方式(an, ban, gan等)


cjk-ideographic


简单的表意数字


hiragana


标记是:a, i, u, e, o, ka, ki等。(日文片假名)


katakana


标记是:A, I, U, E, O, KA, KI等。(日文片假名)


hiragana-iroha


标记是:i, ro, ha, ni, ho, he, to等。(日文片假名)


katakana-iroha


标记是:I, RO, HA, NI, HO, HE, TO等。(日文片假名)

(3)浏览器支持性:所有浏览器都支持 list-style-type  属性。

Ps:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"。

 

2. 列表项图像:list-style-image属性

(1)作用:使用图像来替换列表项的标记。

(2)可能的值:



描述


URL


图像的路径。


none


默认。无图形被显示。


inherit


规定应该从父元素继承 list-style-image 属性的值。

(3)浏览器支持性:所有浏览器都支持 list-style-image 属性。

Ps: 请始终规定一个 "list-style-type" 属性以防图像不可用。

 

3. 列表标志位置:list-style-position属性

(1)作用:设置在何处放置列表项标记;

(2)可能的值:



描述


inside


列表项目标记放置在文本以内,且环绕文本根据标记对齐。


outside


默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。


inherit


规定应该从父元素继承 list-style-position 属性的值。

(3)浏览器支持性:所有浏览器都支持 list-style-position 属性。

4. 简写列表样式:list-style属性

(1)作用:在一个声明中设置所有的列表属性;

(2)顺序:type,position,image;

Ps: list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

时间: 2024-12-27 18:37:35

CSS列表属性的相关文章

css列表属性与display属性

list-style:none 内联标签不能设宽高 display:"inline-block" 有内联标签不独占一行的属性和块级标签可设宽高的属性 display:none 不显示,位置也没了 display是显示.展示的意思 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

css 列表属性详细总结

列表类型(list-style-type) 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型. 在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序列表中,标志可能是字母.数字或另外某种计数体系中的一个符号. 属性值有以下: list-style-type:none无标记 list-style-type:disc默认,标记是实心圆 list-style-type:circle 空心圆 list-style-type:square实心方块 lis

CSS 列表样式详解

CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小方框等) 有序列表 - 列表项的标记有数字或字母 list-style-type:设置列表标志类型. 1:无序列表实例 ul.a {list-style-type:circle;} ul.b {list-style-type:square;} <p>无序列表实例:&

Css3之基础-10 Css列表(列表项标志 、列表项图像、列表项位置、列表属性)

一.CSS 列表样式 列表项标志 list-style-type - list-style-type 属性用于控制列表中列表项标志的样式 - 无序列表: 出现在各列表项旁边的圆点 - 有序列表: 可能是字母.数字或另外某种计数体系中的一个符号 - 无序列表取值 - none    : 无标记 - disc    : 实心圆,为默认值 - circle  : 空心圆 - square  : 实心方块 - 有序列表取值 - none    : 无标记 - decimal : 无标记 - lower-

【转】CSS z-index 属性的使用方法和层级树的概念

文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 这个星期我们团队做了一次内部的技术分享

CSS float 属性

Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 注释: 假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为

#3 CSS常用属性

CSS里面的样式非常多,但是常用的样式并不是很多. 下面主要是以下常用的,当然这个没涉及到考虑兼容性的问题.兼容性的主要还是要了解不懂浏览器之间的差异,具体我也半桶水,在努力学习中,等学会了,在总结一下分享给大家. -------2014.07.29 这个上课主要讲的布局,就是关于页面的布局,现在90%的网站都是用DIV+CSS布局的.所以应该好好掌握这次课的知识. 在学习DIV之前,我们还要熟悉一些常见的CSS样式. CSS的常用样式 字体: 1,line-height:50px      

CSS box-flex属性,然后弹性盒子模型简介

一.here we go 看到大神写的关于box-flex的介绍,忍不住收了,大神介绍的很详细,新技能get! 二.box-flex属性(和谐版) 有道桌面词典显示,"flex"一词中文有"收缩"之意.不过,从此属性实际上产生的效果来看,无论怎样用"收缩"一词解释都显得很牵强.所以,这 里,直接抛开字面意思,我们可以将"box-flex"理解为"房子-分配".box为"盒子"的意思,我们

CSS常用属性和值

下载高清图:css常用属性和值(思维导图总结) 1.字体 <html> <head> <title>font</title> <style> h1{ font-family:times,courter; font-size:150% font-style:italic; font-variant:normal; font-weight:normal; } h2{ font-family:serif,times; font-size:1cm; fo