css-doodle入门（四）
css-doodle属性
css-doodle 提供若干有用的属性，通过这些属性可以很方便地设置 css-doodle 图形图案（正如使用 CSS 描述HTML标签一样）。这些属性中，有一些在前面的教程中已经接触过了，这里将官网介绍的属性都一一梳理一下。
这里需要注意属性的语句结构。css-doodle的属性语句构成是这样：
属性名称: 值; 【例】@grid: 6x6;
这和原生 CSS 属性的表达方法完全一致。
一、@grid 属性
@grid 属性写在 :doodle {} 代码块内，用于设定网格行列数。以下代码设置 6x6 的 css-doodle 图案：
<css-doodle>
:doodle {
@grid: 6;
gap: 1px;
width: 200px;
height: 200px;
}
background: gray;
</css-doodle>
@grid: 6; 也可以写成 @grid: 6x6; 或者@grid: 6,6; ，需要留意的是，使用多个数值表示行列时，遵循列先行后的规则，至少当前 pencil code (freeee.ml) 页面所使用的css-doodle组件是这样。
@grid 属性优先于 <css-doodle grid="6"> 里的 grid 设置，当二者都有设置， grid="6" 的设定会被 @grid: 6; 所覆盖。
二、 @size, @min-size, @max-size 属性
先说 @size 吧。
属性 @size 名称中，size是大小之意，该属性用于设定 css-doodle 图形（父元素）或单元格（子元素）的大小，同等于 CSS 的 width 和 height 值，下例设置父元素宽 240px 、高 180px，而第一列第二行的单元格也通过 @size 属性将其设置大小为 30x30 px的尺寸：
<css-doodle grid="4">
:doodle {
gap: 1px;
@size: 240px 180px;
}
background: gray;
@at(1,2) {
@size: 30px;
}
</css-doodle>
@size 值设定宽高不一样的值是，用空格将两个值隔开，也可以用小角逗号：@size: 240px,180px; ，效果一样。
至于 @min-size 和 @max-size 这两个属性，由 @size 派生出来，和 CSS 的 min-width， max-width，min-height，max-height 道理一致，表示最小尺寸和最大尺寸的设定：
@min-size: 100px; /* 最小尺寸为 100x100 */
@max-size: 200px; /* 最大尺寸为 200x200 */
三、@place-cell 属性
这是一个用来定位单元格位置的属性，相当于同时设置了单元格的CSS中的 left 和 top 属性。以下代码，我们将第一个单元格挪动了位置：
<css-doodle grid="4">
:doodle {
gap: 1px;
@size: 240px;
}
background: gray;
:after { content: @index(); }
@nth(1) {
background: green;
@place-cell: 40px 80px;
z-index: 100;
}
</css-doodle>
选择器 @nth(1) {} 代码块设定第一个单元格的诸多属性，背景色绿色、用 @place-cell 属性定位到 left:40px; top: 80px 的位置，同时设置了 z-index 属性提升其在 Z轴 上的层级地位以避免移位之后该单元格会被其他单元格挡住。运行上面的代码，你还会发现文档流的自动“流窜”现象，这是因为，前方有一个单元格脱离了文档流、“让出”了自己的位置，后面的单元格就会争先恐后地挪位，不过这些行为是要秩序的。
四、@shape 属性
css-doodle 图形效果很大程度上因为 @shape 属性而更为精彩纷呈。使用 @shape 属性可以轻松定义单元格的形状：
circle 圆
triangle 三角形
rhombus 菱形
pentagon 正五边形
hexagon 六边形
heptagon 七边形
octagon 八角形
cross 十字形
star 五角星
diamond 钻石
infinity 无限大号
heart 心形
fish 鱼儿
whale 鲸鱼
pear 梨形
bean 豌豆
(hypocycloid, 3) 三角圆内螺线形
(hypocycloid, 4) 四角圆内螺线形
(hypocycloid, 5) 五角圆内螺线形
(hypocycloid, 6) 六角圆内螺线形
bicorn 双角兽形
(clover, 3) 三叶草
(clover, 4) 四叶草
(clover, 5) 五叶草
(bud, 3) 三角花蕾
(bud, 4) 四角花蕾
(bud, 5) 五角花蕾
(bud, 10) 十角花蕾
（注：花蕾最多可以有11个角）
比如下面的代码，第一个单元格我们设置其形状为六角花蕾：
<css-doodle grid="4">
:doodle {
gap: 1px;
@size: 240px;
}
background: gray;
:after { content: @index(); }
@nth(1) {
background: green;
@place-cell: 40px 80px;
@shape: bud 6;
z-index: 100;
}
</css-doodle>
@shape 属性值当存在数字是，数字与形状名称之间可以用空格或逗号隔开。
五、@use 属性
@use 属性允许以特定方式将 css-doodle 的设置写在 CSS 代码块中，即 <style> ... </style> 省略号所处的地方，然后，用 @use 属性通过预定义的样式名称从CSS里引用预设的样式。请看代码加以理解：
<style>
css-doodle {
--basic: (
:doodle { @grid: 2 / 200px; }
background: purple;
@shape: fish;
transform: rotate(-30deg);
cursor: pointer;
);
}
</style>
<css-doodle>
@use: var(--basic);
:hover { transform: rotate(30deg); }
</css-doodle>
上面的代码，前面部分是 <style> ... </style> 标签，该标签里面的代码中，我们有一个 css-doodle 属性，就是 css-doodle 的标签选择器，和 p 、span 等选择器一样。该选择器下，设计了一个 CSS 变量 --basic，结构为 --basic: (代码);，这个变量值就写在小角括号内，建议分行以方便阅读。代码是标准的 CSS+css-doodle代码，我们设计了 2x2 、200x200的网格，单元格紫色背景、鱼儿形状、旋转 -30度、鼠标指针为手型。
然后，在 <css-doodle> 标签代码块中，通过 @use 属性引用CSS预定义的变量值 --basic，引用语句是标准的CSS使用变量是的规范，@use: var(--basic); ；最后，我们给单元格设计一个鼠标指针划过时的样式：旋转 30度。
css-doodle的属性有一些也可以使用纯CSS表达，例如 @size 属性，直接用 width 和 height 来定义也是可以的。
“使用多个数值表示行列时，遵循列先行后的规则”
这个提醒很必要{:4_187:} “后面的单元格就会争先恐后地挪位，不过这些行为是要秩序的。”
去试了一下，果真后面的单元格自动顶上去了呢。 小辣椒们快来把理论基础打扎实{:4_173:} @use 属性可否理解套在<style>里的是个块，真正的css-doodle调用这个块？ 红影 发表于 2023-4-13 10:32
“使用多个数值表示行列时，遵循列先行后的规则”
这个提醒很必要
这个，css-doodle 将来定型了是不是作调整现在不清楚 红影 发表于 2023-4-13 10:37
“后面的单元格就会争先恐后地挪位，不过这些行为是要秩序的。”
去试了一下，果真后面的单元格自动顶上去 ...
这符合文档流流动特征。使用 CSS float 属性会这样，有元素设置了 position: absolute; 或其它绝对定位是后面的元素也会这样。 红影 发表于 2023-4-13 11:12
@use 属性可否理解套在里的是个块，真正的css-doodle调用这个块？
@user 属性实际上是通过声明变量 var(--变量名称) 调用 css-doodle 定义的选择器即你所理解的 选择器 {} 代码块里定义的对应变量值。 樵歌 发表于 2023-4-13 11:09
小辣椒们快来把理论基础打扎实
{:4_190:} 马黑黑 发表于 2023-4-13 12:17
这个，css-doodle 将来定型了是不是作调整现在不清楚
现在就照它的来啊，肯定不会错的。 马黑黑 发表于 2023-4-13 12:19
这符合文档流流动特征。使用 CSS float 属性会这样，有元素设置了 position: absolute; 或其它绝对定位是 ...
文档流，你在以前 的讲授里提到过。 马黑黑 发表于 2023-4-13 12:22
@user 属性实际上是通过声明变量 var(--变量名称) 调用 css-doodle 定义的选择器即你所理解的 选择器 {}...
感觉是整个儿拿来用的{:4_173:} 马黑黑 发表于 2023-4-13 13:02
怎么样，这个助理还行么{:4_189:} 樵歌 发表于 2023-4-13 17:56
怎么样，这个助理还行么
可以可以 红影 发表于 2023-4-13 16:29
感觉是整个儿拿来用的
是的哦 红影 发表于 2023-4-13 16:28
文档流，你在以前 的讲授里提到过。
文档流就是按顺序排列元素。元素分行内、块等等，不同的特点排列的方式不一样，但无非就是按自下而上、自右向左这几个方向进行排列。 红影 发表于 2023-4-13 16:27
现在就照它的来啊，肯定不会错的。
他会有修正，修正了再说 新课程出来了。。晚上学{:4_173:} 雨中悄然 发表于 2023-4-13 18:25
新课程出来了。。晚上学
这个东东学学就会，练练就上手，再练练就是高手 马黑黑 发表于 2023-4-13 18:10
是的哦
所谓的use就是 “都别动，让我自己来”呗{:4_173:}
页:
[1]
2