css-doodle 学习第二天，css-doodle能怎么使用

1、我们能怎么来使用css-doodle

css-doodle的使用有如下几种

1.1、Grid（表格形式）

1.2、Selectors（选择器形式）

1.3、Properties（属性形式）

1.4、Functions（功能（函数）形式）

1.5、JS API（应该是引用其它API形式）

2、Grid

2.1、先看一段使用Grid的代码（官网代码，size属性是我自己加的，这些属性都是CSS属性，不加size内容太小了）：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.2/css-doodle.min.js"></script><title></title></head><body><css-doodle grid="5">:doodle {grid-gap: 1px;width: 8em;height: 8em;}background: #60569E;</css-doodle></body>
</html>

第一次就完整的贴一下代码，以后只贴<css-doodle>到</css-doodle>之间的代码，下面是运行结果

在分析代码前先看一下官网的一段描述：

The number of rows and columns in the grid is defined by the "grid" attribute on the element, ranged from 1 to 32. It's default to be 1x1 when no value or 0 is given （译：表格的行、列数目是通过元素的“grid”属性进行设置的，取值范围是[1,32]，如果没有值或者设置值为0则默认显示1x1（1行1列）的表格）

这下道友们应该明白了grid属性的作用，但好像这些都是行、列数目相等的，如果我想来一个四行六列的怎么办呢？关键代码如下：

<css-doodle grid="4x6">:doodle {grid-gap: 1px;width: 8em;height: 8em;}background: #60569E;</css-doodle>

运行结果：

4x6的书写形式我不习惯，可不可以使用别的形式？别急，官网都给你写好了，下面图（官网偷的）中的书写形式都是能行的！

2.2、:doodle是什么呢？

它是一种特殊的选择器，代表的就是<css-doodle>元素，也就是用来控制整个表格属性的，比如，grid-gap控制的是每个单元格之间的间距，width和height控制的是整个表格格的宽高等等，详细的会在下一篇关于选择器的部分说哟。

2.3、特殊

官网有这样一句话

The row or column is limited up to 1024 only when the grid is 1-dimensional（译：当网格为1维的时候，行或列才被限制为1024）

然后官网给了这样一个例子：

     <css-doodle grid="35x1">:doodle {grid-row-gap: 1px;@size: 8em;}background: #60569E;width: @rand(5%, 100%);</css-doodle>

运行结果为：

乍一看完全不知所云，grid-row-gap属性设置行间距，@size设置的是整个表格的宽高，width则设置的一行的宽度，最短为5%，最长为100%，1024是什么鬼？等等，35是怎么回事？不是最高为32吗？原来是这样，当维度为1的时候，限制由32变为了1024。

2.4、通过@gird属性设置表格

官网给出的代码是

<css-doodle>:doodle {@grid: 5 / 8em;}background: #60569e;transform: scale(@rand(.2, .9));
</css-doodle>

运行结果是：

可能很多人不明白，不应该是5行8列吗？，我修改了一下代码，这样：

        <css-doodle>:doodle {@grid: 5x3 / 8em;}background: #60569e;transform: scale(@rand(.2, .9));</css-doodle>

运行结果：

8em指的是这个表格的长宽都为8个字节，transform是CSS3中的动画，scale指缩放效果。

2.5、浏览器中看运行结果

每一个单元格都是一个div元素，且含有一个cell属性，整个表格有一个container的类

3、结尾语

表格在介绍好像没有多难，但这应该是css-doodle中位于核心的功能，每一个单元格分别构成一个小图画，最后所有的小图画构成一个大图画，这是我自己的理解，下篇见咯

css-doodle 学习第二天，css-doodle能怎么使用相关推荐

CSS基础学习十七：CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念.文档流即是HTML的布局机制,块级元素占一行, 行内元素不占一行.将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素. 一CSS定位和 ...
CSS基础学习三：CSS语法
CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declarat ...
CSS入门学习笔记+案例(1)
CSS入门学习一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
html字体代码_第50天 HTML和css的学习
第65次(html和css) 第65次(html和css) 学习主题:html和css 学习目标: 1 掌握html5新增标签的使用 2 掌握css入门对应视频: http://www.itbaiz ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...
HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
Python学习 Day 040 - css选择器
主要内容 1.css的引入方式 2.css基础选择器 3.css高级选择器 4.css的继承性和层叠性 5.伪类选择器 1.css的引入方式 (1)css的介绍现在的互联网前端分三层: HTML:超 ...
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...

css-doodle 学习第二天，css-doodle能怎么使用

css-doodle 学习第二天，css-doodle能怎么使用相关推荐

最新文章

热门文章