CSS教程:解析CSS列表样式属性list-style

网页制作Webjx文章简介:平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它

 

平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它提出来重新学习一下,故整理如下。

● list-style

定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。

相关 : list-style-image || list-style-position || list-style-type

● list-style-image
说明: 设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时,list-style-type 属性将发生作用。

取值:

none :  默认值。不指定图像
url ( url ) :  使用绝对或相对 url 地址指定图像

● list-style-position
说明: 设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。

取值:

outside :  默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐

● list-style-type
说明: 设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。

取值:

disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenian :  CSS2 传统的亚美尼亚数字
cjk-ideographic :  CSS2 浅白的表意数字
georgian :  CSS2 传统的乔治数字
lower-greek :  CSS2 基本的希腊小写字母
hebrew :  CSS2 传统的希伯莱数字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序号
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序号
lower-latin :  CSS2 小写拉丁字母
upper-latin :  CSS2 大写拉丁字母

补充:此CSS2.1提出的.IE6,Firefox1.5+,Opera9+支持此属性,所以以数字方式显示列表也可以用ul来指定,并不一定必需要用ol来写。

来源:http://www.webjx.com/css/divcss-11359.html

时间: 2024-11-08 20:05:22

CSS教程:解析CSS列表样式属性list-style的相关文章

关于CSS列表样式属性list-style

● list-style定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象).相关 : list-style-image || list-style-position || list-style-type● list-style-image说明: 设置或检索作为对象的列表项标记的图像.若此属性值为 none 或指定 url 地址的图片不能被显示时,list-style-ty

如何使用jquery修改css中带有!important的样式属性_jquery

<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px");和 $("div.test").css("width&

CSS教程:汇总CSS属性的缩写

高效的css写法中的一条就是使用简写.通过简写可以让你的CSS文件更小,更易读.而了解CSS属性简写也是前端开发工程师的基本功之一.今天我们系统地总结一下CSS属性的缩写. 色彩缩写 色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个: 1 color:#113366 可以简写为 1 color:#136 所有用到16进制色彩值的地方都可以使用简写,比如background-color.border-color.text-shadow.box-shadow等. 盒子

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

css教程:CSS背景background属性的应用

The CSS background properties define the background effects of an element. CSS的background属性可为元素定义背景效果. 设置背景颜色 Set the background color This example demonstrates how to set the background color for an element. 实例:  代码如下 复制代码 body {background-color: ye

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示:   可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span.而是使用li标签的border-right.但是最后一个需要隐藏,否则效果不是很理想. 最原始的写法是: 1: #tabnav li:last-child 2: { 3: border-right:none; 4: } <li id="sub_nav_user" class="dcontent lastitem" ><a >D Con

CSS教程:闭合CSS浮动元素的几种方法

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 网页教学网 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :after 伪类动态的

CSS教程:关于CSS渐变的一些要点

译自:Quick Tip: Understanding CSS3 Gradients 中文:理解CSS3渐变请尊重版权,转载请注明来源,多谢! 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法.但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久.多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变.在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同. PS:本文

css教程:CSS伪类

CSS pseudo-classes are used to add special effects to some selectors. CSS伪类可用来给一些选择器加上特殊效果. Hyperlink 如何在文档内给超级连接加上不同的颜色 This example demonstrates how to add different colors to a hyperlink in a document. Examples 实例:  代码如下 复制代码 Source Code to Run []