css-doodle入门（一）

位置: 首页 > 马黑教程
[发布: 2023.4.16 作者: 马黑黑阅读: 149]

css-doodle入门（一）

八行代码写出 8*8 的表格：

<css-doodle>
:doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
}
background: tan;
:after { content: @index; }
</css-doodle>

运行上述代码，会得到 8*8 的表格，表格的每一个单元格都填充了序号。你可以到下面的页面尝试一下，将上述代码粘贴到代码区，然后点击运行代码按钮查看效果：

http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html

是不是太简单了？先别激动，还是让我们我们来理解上述代码，理解了，就算正式入门十分之一了：

一、css-doodle 标签

前面的代码，头尾两行是 css-doodle 标签，它的位置是在 HTML 代码中，即网页的 <body> 和 </body> 之内任何需要的地方：

<html>

<body>

<css-doodle>
  
</css-doodle>

</body>
</html>

<css-doodle>...</css-doodle> 标签表明使用 css-doodle Web组件。这个组件由国人袁川先生开发与维护，组件使用 CSS 的 grid 布局属性生成一个主元素，主元素下可以拥有众多的子元素，这些元素在主元素的约束下可以构成简单的图表或复杂多样的图形图案、动画图表。实现精彩的图形图案效果，需要 css-doodle 代码去完成。

二、css-doodle 主元素代码

:doodle {} 选择器，用来制定主元素：

  :doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
  }

:doodle{} 里的代码，@grid 属性规范了两个内容，用反斜杠 / 隔开。第一个内容是 8x8，表示在主元素里建立 8*8 的网格（64个单元格），360px 300px 表示主元素的宽高尺寸。grid-gap 属性表示网格的行列间隙。主元素还可以设置很多东西，比如，边框、背景色、阴影等等，和 grid-gap属性一样，都是标准的CSS写法，写边框，border: 1px solid green;，写背景色，background: gray;，写阴影，box-shadow: 2px 2px 4px #000; 等等。

:doodle{} 之外的代码，则是针对子元素——

三、css-doodle 子元素代码

:doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
}
background: tan;
:after { content: @index; }

background: tan; 这句，设定子元素即各个单元格的背景色。:after{} 则是封装好的单元格的伪元素（注意在 css-doodle 里伪元素的前缀只需要一个小角冒号），它遵循标准的CSS伪元素语法使用 content 属性带出伪元素的内容，代码中的内容用单元格的索引号 @index 填充，@index 索引号从  1  开始。

【附】

一、如果想在本地运行 css-doodle，请在网页代码中引用 css-doodle 组件，引用方法：

<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"></script>

上行代码可以写在  <head> 和 </head> 之间（建议），也可以写在 <body> 和 </body> 之间（一般紧挨着 </body>）。

二、如果想在脱网的状况下使用 css-doodle，请将 css-doodle.min.js 保存为本地文档且引用它，例如放在一个 js 子目录里：

<script src="./js/css-doodle.min.js"></script>

前一篇: css-doodle入门（二）
下一篇: css-doodle入门（六）

发表评论:

评论列表 [0条]