zoukankan      html  css  js  c++  java
  • 符号 | @counter-style.symbols (Counter Styles)

  •   CSS 中文开发手册

    符号 | @counter-style.symbols (Counter Styles) - CSS 中文开发手册

    symbols描述符用于指定指定的柜台系统将用来构造计数器表示的符号。符号可以是字符串,图像或标识符。描述符的值system是循环的,数字的,字母的,符号的或固定的,必须指定符号描述符。当使用添加剂系统时,使用additive-symbols描述符来指定符号。

    符号描述符的值可能包括:

    字符串 - 用单引号或双引号括起来的字符序列。反斜杠()可用于转义特殊字符。例如,可以用“ 24B6”格式指定Unicode字符。图像 - 格式为url(path-to-image.png)标识符

    Related at-rule

    @counter-style

    初始值

    N/A

    适用媒体

    all

    计算值

    as specified

    正规顺序

    order of appearance in the formal grammar of the values

    语法

    symbols: A B C D E;
    symbols: "B6" "B7" "B8" D E;
    symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
    symbols: url('first.svg') url('second.svg') url('third.svg');
    symbols: indic-numbers;

    <symbol>代表<symbol>在柜台系统内使用。

    正式语法

    <symbol>+where 
    <symbol> = <string> | <image> | <ident>
    where 
    <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
    where 
    <image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
    <image-set()> = image-set( <image-set-option># )
    <element()> = element( <id-selector> )
    <cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
    <gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
    where 
    <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
    <image-set-option> = [ <image> | <string> ] <resolution>
    <cf-mixing-image> = <percentage>? && <image>
    <cf-final-image> = <image> | <color>
    <linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
    <repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
    <radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
    <repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
    where 
    <rgb()> = rgb( <rgb-component>#{3} )
    <rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
    <hsl()> = hsl( <hue>, <percentage>, <percentage> )
    <hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
    <named-color> = <ident>
    <deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
    <side-or-corner> = [ left | right ] || [ top | bottom ]
    <color-stop-list> = <color-stop>{2,}
    <ending-shape> = circle | ellipse
    <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
    <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
    
    where 
    <rgb-component> = <integer> | <percentage>
    <alpha-value> = <number>
    <hue> = <number>
    <color-stop> = <color> <length-percentage>?
    <length-percentage> = <length> | <percentage>

    示例

    HTML

    <ul class="list">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ul>

    CSS

    @counter-style symbols-example {
      system: fixed;
      symbols: A "1" "B7" D E;
    }
    
    .list {
      list-style: symbols-example;    
    }

    结果

    规范

    Specification

    Status

    Comment

    CSS Counter Styles Level 3The definition of 'symbols' in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    No support

    33 (33)1

    No support

    No support

    No support

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    No support

    33 (33)1

    No support

    No support

    No support

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32161.html
  • 相关阅读:
    二线城市的创业人才之战
    小程序的风口到底如何?
    短视频广告一条上百万,揭秘短视频背后的故事
    让我们来看看这些企业的创始人,在互联网金融的十年里的故事
    背靠大树成为创业成功的显学
    草根站长的艰辛创业路
    互联网大佬们的创业重要选择时刻
    80后的罗敏已经在创业路上走了十几年
    CentOS7 通过 YUM 升级 VIM8
    matplotlib 画图中的basemap安装问题
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13222254.html
Copyright © 2011-2022 走看看