「ROAD 6」CSS-知识体系

ROAD 6
大前端
发布日期:   2021-12-13
文章字数:   3k
阅读时长:   18 分
阅读次数:  

语法研究

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Appendix G. Grammar of CSS 2.1

CSS 总体结构

CSS.png

CSS @规则的研究

CSS 规则的结构

  • Selector
  • Key
    • Properties
    • Variables
  • Value

收集 CSS 标准

// 从上面的网站收集CSS标准
let list = document.getElementById("container").children;

let result = [];
for (let li of list) {
  if (li.getAttribute("data-tag").match(/css/)) {
    result.push({
      name: li.children[1].innerText,
      url: li.children[1].children[0].href,
    });
  }
}
console.log(JSON.stringify(result));
结果
[
  {
    "name": "CSS Multi-column Layout Module Level 1",
    "url": "https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/"
  },
  {
    "name": "CSS Values and Units Module Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-values-4-20210930/"
  },
  {
    "name": "CSS Scrollbars Styling Module Level 1",
    "url": "https://www.w3.org/TR/2021/WD-css-scrollbars-1-20210908/"
  },
  {
    "name": "CSS Display Module Level 3",
    "url": "https://www.w3.org/TR/2021/CRD-css-display-3-20210903/"
  },
  {
    "name": "CSS Nesting Module",
    "url": "https://www.w3.org/TR/2021/WD-css-nesting-1-20210831/"
  },
  {
    "name": "CSS Cascading and Inheritance Level 5",
    "url": "https://www.w3.org/TR/2021/WD-css-cascade-5-20210829/"
  },
  {
    "name": "CSS Object Model (CSSOM)",
    "url": "https://www.w3.org/TR/2021/WD-cssom-1-20210826/"
  },
  {
    "name": "CSS Masking Module Level 1",
    "url": "https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/"
  },
  {
    "name": "CSS Color Module Level 3",
    "url": "https://www.w3.org/TR/2021/REC-css-color-3-20210805/"
  },
  {
    "name": "CSS Fonts Module Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-fonts-4-20210729/"
  },
  {
    "name": "CSS Fonts Module Level 5",
    "url": "https://www.w3.org/TR/2021/WD-css-fonts-5-20210729/"
  },
  {
    "name": "Worklets  Level 1",
    "url": "https://www.w3.org/TR/2021/NOTE-worklets-1-20210729/"
  },
  {
    "name": "CSS Counter Styles Level 3",
    "url": "https://www.w3.org/TR/2021/CR-css-counter-styles-3-20210727/"
  },
  {
    "name": "CSS Backgrounds and Borders Module Level 3",
    "url": "https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/"
  },
  {
    "name": "CSS Color Module Level 5",
    "url": "https://www.w3.org/TR/2021/WD-css-color-5-20210722/"
  },
  {
    "name": "CSS Color Adjustment Module Level 1",
    "url": "https://www.w3.org/TR/2021/WD-css-color-adjust-1-20210616/"
  },
  {
    "name": "Ready-made Counter Styles",
    "url": "https://www.w3.org/TR/2021/NOTE-predefined-counter-styles-20210609/"
  },
  {
    "name": "CSS Color Module Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-color-4-20210601/"
  },
  {
    "name": "CSS Box Sizing Module Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/"
  },
  {
    "name": "Web Animations",
    "url": "https://www.w3.org/TR/2021/WD-web-animations-1-20210518/"
  },
  {
    "name": "CSS Text Module Level 3",
    "url": "https://www.w3.org/TR/2021/CRD-css-text-3-20210422/"
  },
  {
    "name": "CSS Easing Functions Level 1",
    "url": "https://www.w3.org/TR/2021/CRD-css-easing-1-20210401/"
  },
  {
    "name": "CSS Cascading and Inheritance Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-cascade-4-20210319/"
  },
  {
    "name": "CSS Box Sizing Module Level 3",
    "url": "https://www.w3.org/TR/2021/WD-css-sizing-3-20210317/"
  },
  {
    "name": "CSS Basic User Interface Module Level 4",
    "url": "https://www.w3.org/TR/2021/WD-css-ui-4-20210316/"
  },
  {
    "name": "CSS Scroll Snap Module Level 1",
    "url": "https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/"
  },
  {
    "name": "CSS Ruby Annotation Layout Module Level 1",
    "url": "https://www.w3.org/TR/2021/WD-css-ruby-1-20210310/"
  },
  {
    "name": "Timed Text Markup Language 2 (TTML2) (2nd Edition)",
    "url": "https://www.w3.org/TR/2021/CR-ttml2-20210309/"
  },
  {
    "name": "CSS Cascading and Inheritance Level 3",
    "url": "https://www.w3.org/TR/2021/REC-css-cascade-3-20210211/"
  },
  {
    "name": "CSS Pseudo-Elements Module Level 4",
    "url": "https://www.w3.org/TR/2020/WD-css-pseudo-4-20201231/"
  },
  {
    "name": "CSS Box Model Module Level 3",
    "url": "https://www.w3.org/TR/2020/CR-css-box-3-20201222/"
  },
  {
    "name": "CSS Snapshot 2020",
    "url": "https://www.w3.org/TR/2020/NOTE-css-2020-20201222/"
  },
  {
    "name": "CSS Containment Module Level 1",
    "url": "https://www.w3.org/TR/2020/REC-css-contain-1-20201222/"
  },
  {
    "name": "CSS Grid Layout Module Level 1",
    "url": "https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/"
  },
  {
    "name": "CSS Grid Layout Module Level 2",
    "url": "https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/"
  },
  {
    "name": "CSS Images Module Level 3",
    "url": "https://www.w3.org/TR/2020/CRD-css-images-3-20201217/"
  },
  {
    "name": "CSS Containment Module Level 2",
    "url": "https://www.w3.org/TR/2020/WD-css-contain-2-20201216/"
  },
  {
    "name": "CSS Custom Highlight API Module Level 1",
    "url": "https://www.w3.org/TR/2020/WD-css-highlight-api-1-20201208/"
  },
  {
    "name": "CSS Conditional Rules Module Level 3",
    "url": "https://www.w3.org/TR/2020/CR-css-conditional-3-20201208/"
  },
  {
    "name": "TTML Media Type Definition and Profile Registry",
    "url": "https://www.w3.org/TR/2020/NOTE-ttml-profile-registry-20201119/"
  },
  {
    "name": "CSS Lists and Counters Module Level 3",
    "url": "https://www.w3.org/TR/2020/WD-css-lists-3-20201117/"
  },
  {
    "name": "CSS Scroll Anchoring Module Level 1",
    "url": "https://www.w3.org/TR/2020/WD-css-scroll-anchoring-1-20201111/"
  },
  {
    "name": "Requirements for Chinese Text Layout中文排版需求",
    "url": "https://www.w3.org/TR/2020/WD-clreq-20201101/"
  },
  {
    "name": "CSS Properties and Values API Level 1",
    "url": "https://www.w3.org/TR/2020/WD-css-properties-values-api-1-20201013/"
  },
  {
    "name": "CSS Inline Layout Module Level 3",
    "url": "https://www.w3.org/TR/2020/WD-css-inline-3-20200827/"
  },
  {
    "name": "Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版)",
    "url": "https://www.w3.org/TR/2020/NOTE-jlreq-20200811/"
  },
  {
    "name": "Media Queries Level 5",
    "url": "https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/"
  },
  {
    "name": "Media Queries Level 4",
    "url": "https://www.w3.org/TR/2020/CR-mediaqueries-4-20200721/"
  },
  {
    "name": "CSS Overflow Module Level 3",
    "url": "https://www.w3.org/TR/2020/WD-css-overflow-3-20200603/"
  },
  {
    "name": "Encoding",
    "url": "https://www.w3.org/TR/2020/NOTE-encoding-20200602/"
  },
  {
    "name": "Requirements for Hangul Text Layout and Typography : 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항",
    "url": "https://www.w3.org/TR/2020/NOTE-klreq-20200527/"
  },
  {
    "name": "Ethiopic Layout Requirements",
    "url": "https://www.w3.org/TR/2020/WD-elreq-20200526/"
  },
  {
    "name": "CSS Positioned Layout Module Level 3",
    "url": "https://www.w3.org/TR/2020/WD-css-position-3-20200519/"
  },
  {
    "name": "CSS Text Decoration Module Level 4",
    "url": "https://www.w3.org/TR/2020/WD-css-text-decor-4-20200506/"
  },
  {
    "name": "CSS Box Model Module Level 4",
    "url": "https://www.w3.org/TR/2020/WD-css-box-4-20200421/"
  },
  {
    "name": "CSS Box Alignment Module Level 3",
    "url": "https://www.w3.org/TR/2020/WD-css-align-3-20200421/"
  },
  {
    "name": "CSS Speech Module",
    "url": "https://www.w3.org/TR/2020/CR-css-speech-1-20200310/"
  },
  {
    "name": "CSS Conditional Rules Module Level 4",
    "url": "https://www.w3.org/TR/2020/WD-css-conditional-4-20200303/"
  },
  {
    "name": "CSS Transforms Module Level 2",
    "url": "https://www.w3.org/TR/2020/WD-css-transforms-2-20200303/"
  },
  {
    "name": "Resize Observer",
    "url": "https://www.w3.org/TR/2020/WD-resize-observer-1-20200211/"
  },
  {
    "name": "CSS Writing Modes Level 3",
    "url": "https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/"
  },
  {
    "name": "CSS Spatial Navigation Level 1",
    "url": "https://www.w3.org/TR/2019/WD-css-nav-1-20191126/"
  },
  {
    "name": "CSS Text Module Level 4",
    "url": "https://www.w3.org/TR/2019/WD-css-text-4-20191113/"
  },
  {
    "name": "CSS Text Decoration Module Level 3",
    "url": "https://www.w3.org/TR/2019/CR-css-text-decor-3-20190813/"
  },
  {
    "name": "CSS Generated Content Module Level 3",
    "url": "https://www.w3.org/TR/2019/WD-css-content-3-20190802/"
  },
  {
    "name": "CSS Writing Modes Level 4",
    "url": "https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/"
  },
  {
    "name": "CSS Table Module Level 3",
    "url": "https://www.w3.org/TR/2019/WD-css-tables-3-20190727/"
  },
  {
    "name": "CSS Syntax Module Level 3",
    "url": "https://www.w3.org/TR/2019/CR-css-syntax-3-20190716/"
  },
  {
    "name": "CSS Animation Worklet API",
    "url": "https://www.w3.org/TR/2019/WD-css-animation-worklet-1-20190625/"
  },
  {
    "name": "CSS Overscroll Behavior Module Level 1",
    "url": "https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/"
  },
  {
    "name": "CSS Values and Units Module Level 3",
    "url": "https://www.w3.org/TR/2019/CR-css-values-3-20190606/"
  },
  {
    "name": "WebVTT: The Web Video Text Tracks Format",
    "url": "https://www.w3.org/TR/2019/CR-webvtt1-20190404/"
  },
  {
    "name": "Non-element  Selectors  Module  Level 1",
    "url": "https://www.w3.org/TR/2019/NOTE-selectors-nonelement-1-20190402/"
  },
  {
    "name": "CSS Transforms Module Level 1",
    "url": "https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/"
  },
  {
    "name": "CSS Snapshot 2018",
    "url": "https://www.w3.org/TR/2019/NOTE-css-2018-20190122/"
  },
  {
    "name": "Motion Path Module Level 1",
    "url": "https://www.w3.org/TR/2018/WD-motion-1-20181218/"
  },
  {
    "name": "CSS Fragmentation Module Level 4",
    "url": "https://www.w3.org/TR/2018/WD-css-break-4-20181218/"
  },
  {
    "name": "Filter Effects Module Level 1",
    "url": "https://www.w3.org/TR/2018/WD-filter-effects-1-20181218/"
  },
  {
    "name": "CSS Fragmentation Module Level 3",
    "url": "https://www.w3.org/TR/2018/CR-css-break-3-20181204/"
  },
  {
    "name": "Geometry Interfaces Module Level 1",
    "url": "https://www.w3.org/TR/2018/CR-geometry-1-20181204/"
  },
  {
    "name": "Selectors Level 4",
    "url": "https://www.w3.org/TR/2018/WD-selectors-4-20181121/"
  },
  {
    "name": "CSS Flexible Box Layout Module Level 1",
    "url": "https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/"
  },
  {
    "name": "CSS Shadow Parts",
    "url": "https://www.w3.org/TR/2018/WD-css-shadow-parts-1-20181115/"
  },
  {
    "name": "Timed Text Markup Language 2 (TTML2)",
    "url": "https://www.w3.org/TR/2018/REC-ttml2-20181108/"
  },
  {
    "name": "Selectors Level 3",
    "url": "https://www.w3.org/TR/2018/REC-selectors-3-20181106/"
  },
  {
    "name": "CSS Paged Media Module Level 3",
    "url": "https://www.w3.org/TR/2018/WD-css-page-3-20181018/"
  },
  {
    "name": "CSS Animations Level 1",
    "url": "https://www.w3.org/TR/2018/WD-css-animations-1-20181011/"
  },
  {
    "name": "CSS Transitions",
    "url": "https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/"
  },
  {
    "name": "CSS Fonts Module Level 3",
    "url": "https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/"
  },
  {
    "name": "Cascading  Style  Sheets,  level 1",
    "url": "https://www.w3.org/TR/2018/SPSD-CSS1-20180913/"
  },
  {
    "name": "CSS Logical Properties and Values Level 1",
    "url": "https://www.w3.org/TR/2018/WD-css-logical-1-20180827/"
  },
  {
    "name": "CSS Painting API Level 1",
    "url": "https://www.w3.org/TR/2018/CR-css-paint-api-1-20180809/"
  },
  {
    "name": "CSS Basic User Interface Module Level 3 (CSS3 UI)",
    "url": "https://www.w3.org/TR/2018/REC-css-ui-3-20180621/"
  },
  {
    "name": "CSS Layout API Level 1",
    "url": "https://www.w3.org/TR/2018/WD-css-layout-api-1-20180412/"
  },
  {
    "name": "DOMMatrix interface",
    "url": "https://www.w3.org/TR/2018/NOTE-matrix-20180412/"
  },
  {
    "name": "CSS Typed OM Level 1",
    "url": "https://www.w3.org/TR/2018/WD-css-typed-om-1-20180410/"
  },
  {
    "name": "CSS Overflow Module Level 4",
    "url": "https://www.w3.org/TR/2017/WD-css-overflow-4-20170613/"
  },
  {
    "name": "CSS Image Values and Replaced Content Module Level 4",
    "url": "https://www.w3.org/TR/2017/WD-css-images-4-20170413/"
  },
  {
    "name": "CSS Fill and Stroke Module Level 3",
    "url": "https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/"
  },
  {
    "name": "CSS Rhythmic Sizing",
    "url": "https://www.w3.org/TR/2017/WD-css-rhythm-1-20170302/"
  },
  {
    "name": "CSS Snapshot 2017",
    "url": "https://www.w3.org/TR/2017/NOTE-css-2017-20170131/"
  },
  {
    "name": "CSS Round Display Level 1",
    "url": "https://www.w3.org/TR/2016/WD-css-round-display-1-20161222/"
  },
  {
    "name": "Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification",
    "url": "https://www.w3.org/TR/2016/WD-CSS22-20160412/"
  },
  {
    "name": "CSS Device Adaptation Module Level 1",
    "url": "https://www.w3.org/TR/2016/WD-css-device-adapt-1-20160329/"
  },
  {
    "name": "CSSOM View Module",
    "url": "https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/"
  },
  {
    "name": "CSS Custom Properties for Cascading Variables Module Level 1",
    "url": "https://www.w3.org/TR/2015/CR-css-variables-1-20151203/"
  },
  {
    "name": "CSS Will Change Module Level 1",
    "url": "https://www.w3.org/TR/2015/CR-css-will-change-1-20151203/"
  },
  {
    "name": "CSS Snapshot 2015",
    "url": "https://www.w3.org/TR/2015/NOTE-css-2015-20151013/"
  },
  {
    "name": "CSS Page Floats",
    "url": "https://www.w3.org/TR/2015/WD-css-page-floats-3-20150915/"
  },
  {
    "name": "Priorities for CSS from the Digital Publishing Interest Group",
    "url": "https://www.w3.org/TR/2015/WD-dpub-css-priorities-20150820/"
  },
  {
    "name": "CSS Template Layout Module",
    "url": "https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/"
  },
  {
    "name": "CSS Exclusions Module Level 1",
    "url": "https://www.w3.org/TR/2015/WD-css3-exclusions-20150115/"
  },
  {
    "name": "Compositing and Blending Level 1",
    "url": "https://www.w3.org/TR/2015/CR-compositing-1-20150113/"
  },
  {
    "name": "Fullscreen",
    "url": "https://www.w3.org/TR/2014/NOTE-fullscreen-20141118/"
  },
  {
    "name": "CSS  Marquee  Module  Level 3",
    "url": "https://www.w3.org/TR/2014/NOTE-css3-marquee-20141014/"
  },
  {
    "name": "CSS Presentation Levels Module",
    "url": "https://www.w3.org/TR/2014/NOTE-css3-preslev-20141014/"
  },
  {
    "name": "CSS  Mobile  Profile 2.0",
    "url": "https://www.w3.org/TR/2014/NOTE-css-mobile-20141014/"
  },
  {
    "name": "Behavioral Extensions to CSS",
    "url": "https://www.w3.org/TR/2014/NOTE-becss-20141014/"
  },
  {
    "name": "CSS3 Hyperlink Presentation Module",
    "url": "https://www.w3.org/TR/2014/NOTE-css3-hyperlinks-20141014/"
  },
  {
    "name": "CSS  TV  Profile 1.0",
    "url": "https://www.w3.org/TR/2014/NOTE-css-tv-20141014/"
  },
  {
    "name": "The CSS ‘Reader’ Media Type",
    "url": "https://www.w3.org/TR/2014/NOTE-css3-reader-20141014/"
  },
  {
    "name": "CSS Regions Module Level 1",
    "url": "https://www.w3.org/TR/2014/WD-css-regions-1-20141009/"
  },
  {
    "name": "CSS Line Grid Module Level 1",
    "url": "https://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/"
  },
  {
    "name": "CSS Font Loading Module Level 3",
    "url": "https://www.w3.org/TR/2014/WD-css-font-loading-3-20140522/"
  },
  {
    "name": "CSS Generated Content for Paged Media Module",
    "url": "https://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/"
  },
  {
    "name": "SVG Integration",
    "url": "https://www.w3.org/TR/2014/WD-svg-integration-20140417/"
  },
  {
    "name": "CSS Scoping Module Level 1",
    "url": "https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/"
  },
  {
    "name": "CSS Shapes Module Level 1",
    "url": "https://www.w3.org/TR/2014/CR-css-shapes-1-20140320/"
  },
  {
    "name": "CSS Namespaces Module Level 3",
    "url": "https://www.w3.org/TR/2014/REC-css-namespaces-3-20140320/"
  },
  {
    "name": "CSS Style Attributes",
    "url": "https://www.w3.org/TR/2013/REC-css-style-attr-20131107/"
  },
  {
    "name": "Selectors  API  Level 2",
    "url": "https://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/"
  },
  {
    "name": "CSS Print Profile",
    "url": "https://www.w3.org/TR/2013/NOTE-css-print-20130314/"
  },
  {
    "name": "Media Queries",
    "url": "https://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"
  },
  {
    "name": "A MathML for CSS Profile",
    "url": "https://www.w3.org/TR/2011/REC-mathml-for-css-20110607/"
  },
  {
    "name": "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification",
    "url": "https://www.w3.org/TR/2011/REC-CSS2-20110607/"
  },
  {
    "name": "Cascading Style Sheets (CSS) Snapshot 2007",
    "url": "https://www.w3.org/TR/2011/NOTE-css-beijing-20110512/"
  },
  {
    "name": "Cascading Style Sheets (CSS) Snapshot 2010",
    "url": "https://www.w3.org/TR/2011/NOTE-css-2010-20110512/"
  },
  {
    "name": "Associating Style Sheets with XML documents 1.0 (Second Edition)",
    "url": "https://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/"
  },
  {
    "name": "CSS Techniques for Web Content Accessibility Guidelines 1.0",
    "url": "https://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/"
  },
  {
    "name": "Aural Cascading Style Sheets (ACSS) Specification",
    "url": "https://www.w3.org/TR/1999/WD-acss-19990902"
  },
  {
    "name": "Positioning HTML Elements with Cascading Style Sheets",
    "url": "https://www.w3.org/TR/1999/WD-positioning-19990902"
  },
  {
    "name": "CSS Printing Extensions",
    "url": "https://www.w3.org/TR/1999/WD-print-19990902"
  },
  {
    "name": "List of suggested extensions to CSS",
    "url": "https://www.w3.org/TR/1998/NOTE-CSS-potential-19981210"
  }
]

收集 CSS 属性标准？？

文章作者: 阿汪同学
文章链接: https://httishere.github.io/2021/12/13/yuque/gh2gze/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 阿汪同学 !
ROAD 6
赏
评论
  目录