zoukankan      html  css  js  c++  java
  • CSS教程:解析CSS列表样式属性liststyle

    网页制作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

  • 相关阅读:
    emqttd的启动脚本
    vue2的全局变量
    windows 上优雅的安装 node 和 npm
    Intent数据清理
    android 滑动刷新的实验总结
    Android 音量键拦截
    多进程通讯笔记 android aidl
    perl-Thread-Queue for openwrt
    openwrt的编译环境
    高德地图白屏的问题
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/2352735.html
Copyright © 2011-2022 走看看