# 样式

## Kico Style 的内置样式

# 常用元素

## 标题：

# H1 超大标题

## H2 大标题

### H3 小标题

#### H4 标题

##### H5 标题

###### H6 标题

查看代码：

    <h1>H1 超大标题</h1>
    <h2>H2 大标题</h2>
    <h3>H3 小标题</h3>
    <h4>H4 标题</h4>
    <h5>H5 标题</h5>
    <h6>H6 标题</h6>

## 文字：

正文文字

链接文字

提示文字

较小文字

加粗文字

引用文字

斜体文字

强调文字

加亮文字

含删除线文字

键盘符号 `Ctrl + S`

> 这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~

查看代码：

    <p>正文文字</p>
    <p><a href="#">链接文字</a></p>
    <p><abbr title="Kico Style 自带的提示功能">提示文字</abbr></p>
    <p><small>较小文字</small></p>
    <p><b>加粗文字</b></p>
    <p><cite>引用文字</cite></p>
    <p><i>斜体文字</i></p>
    <p><em>强调文字</em></p>
    <p><mark>加亮文字</mark></p>
    <p><del>含删除线文字</del></p>
    <p>键盘符号 <kbd>Ctrl + S</kbd></p>
    <hr/>
    <blockquote>这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~</blockquote>

## 图片：

Kico Style 将所有图片响应式处理了，确保图片不会出现过大而溢出页面的现象。

查看代码：

    <img src="static/saratoga.jpg"/>
    <img src="static/test-image-1.jpg"/>
    <img src="static/test-image-2.jpg"/>

## 文章：

Kico Style 默认将所有 `article` 标签的子元素做了排版优化，增加间距、设置新的换行机制等，减少重复编写对应的排版样式代码。

早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？

> 原神这么火 我还是遇不到一个玩原神的女朋友 😭

都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！

> 有没有一种可能，你是遇不到女朋友 😂

主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！

查看代码：

    <article>
      <p>早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？</p>
      <blockquote>原神这么火 我还是遇不到一个玩原神的女朋友 😭</blockquote>
      <p>都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！</p>
      <blockquote>有没有一种可能，你是遇不到女朋友 😂</blockquote>
      <p>主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！</p>
    </article>

## 按钮：

给 `a` 元素、`input` 按钮元素或 `button` 元素添加 `btn` 类，即可让此元素变成一个按钮。

a 按钮
查看代码：

    <input class="btn" type="button" value="input 按钮"/>
    <button class="btn">button 按钮</button>
    <a class="btn">a 按钮</a>

给按钮添加 `small` 和 `large` 扩展类，可以使按钮变小和变大。

查看代码：

    <button class="btn blue small">小按钮</button>
    <button class="btn blue">一般按钮</button>
    <button class="btn blue middle">中按钮</button>
    <button class="btn blue large">大按钮</button>

按钮默认为纯白色，给按钮添加 `red`，`yellow`，`blue`，`green` 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色。

查看代码：

    <button class="btn red">一枚红色按钮</button>
    <button class="btn yellow">一枚黄色按钮</button>
    <button class="btn blue">一枚蓝色按钮</button>
    <button class="btn green">一枚绿色按钮</button>
    <button class="btn transparent">一枚透明按钮</button>

禁用的按钮：

查看代码：

    <button class="btn red" disabled>禁用的按钮</button>

## 漂浮提示：

漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息，将鼠标移入文字内容后展示。

上方显示 底侧显示 右侧显示 左侧显示
查看代码：

    <span ks-tag="top" ks-text="我在上方显示">上方显示</span>
    <span ks-tag="bottom" ks-text="我在底侧显示">底侧显示</span>
    <span ks-tag="right" ks-text="我在右侧显示">右侧显示</span>
    <span ks-tag="left" ks-text="我在左侧显示">左侧显示</span>

它们还可以自由组合使用呢：

左上方显示 右下方显示
查看代码：

    <span ks-tag="top left" ks-text="我在左上方显示（top left）">
      左上方显示
    </span>
    <span ks-tag="bottom right" ks-text="我在右下方显示（bottom right）">
      右下方显示
    </span>

## 代码块：

`alert("Hello World!")`

    function Drawer({ visible, children }) {
      return (
        <div className={clsx(styles.drawer, visible && styles.active)}>
          {children}
        </div>
      );
    }

查看代码：

    <p><code>alert("Hello World!")</code></p>
    <pre><code>function Drawer({ visible, children }) {
      return (
        <div className={clsx(styles.drawer, visible && styles.active)}>
          {children}
        </div>
      );
    }</code></pre>

## 项目列表：

> PS：给 ul 元素添加 `clear` 扩展类可以去除左侧小点点

### 自驾游采购清单：

- 帐篷
- 吃的
  - 零食
  - 钓上来的鱼
  - 鱼丸、火腿肠
- 旅行背包
- 烧烤、钓鱼装备

查看代码：

    <h3>自驾游采购清单：</h3>
    <ul>
      <li>帐篷</li>
      <li>
        吃的
        <ul>
          <li>零食</li>
          <li>钓上来的鱼</li>
          <li>鱼丸、火腿肠</li>
        </ul>
      </li>
      <li>旅行背包</li>
      <li>烧烤、钓鱼装备</li>
    </ul>

### 明天要做的事情：

1. 去公司上班
   1. 和同事问好
   2. 完善项目代码
   3. 和项目组交谈事务
2. 和公司同事去吃下午茶
3. 和女朋友约会（并不可能）

查看代码：

    <h3>明天要做的事情：</h3>
    <ol>
      <li>去公司上班
        <ol>
          <li>和同事问好</li>
          <li>完善项目代码</li>
          <li>和项目组交谈事务</li>
        </ol>
      </li>
      <li>和公司同事去吃下午茶</li>
      <li>和女朋友约会（并不可能）</li>
    </ol>

### 我的梦想：

拥有一只女朋友
  长相可爱，愿意相互包容
开发属于自己的 CSS 框架
  已实现，也就是 Kico Style
建立缤奇科技公司
  主要业务是做游戏的

查看代码：

    <h3>我的梦想：</h3>
    <dl>
      <dt>拥有一只女朋友</dt>
      <dd>长相可爱，愿意相互包容</dd>
      <dt>开发属于自己的框架</dt>
      <dd>已实现，也就是 Kico Style</dd>
      <dt>建立缤奇科技公司</dt>
      <dd>选址在珠三角地区为宜</dd>
    </dl>

## 表单：

活动的文本框： 数字形文本框： 超出数字的文本框： 搜索形文本框： 日期形文本框： 日期 + 时间形文本框： 禁用的文本框： 只读的文本框： 滑动条： 开关按钮： 上传文件： 上传多文件： 选择颜色： 多选选项 单选选项 禁用的多选选项 禁用的单选选项 个人介绍： 选择适合你的英雄：
选择适合你的伙伴：
原生进度条：
查看代码：

    <fieldset>
      <label>
        <span>活动的文本框：</span>
        <input type="text" value="奇趣保罗" />
      </label>
      <label>
        <span>数字形文本框：</span>
        <input type="number" value="5678" />
      </label>
      <label>
        <span>超出数字的文本框：</span>
        <input type="number" min="1" max="100" value="101" />
      </label>
      <label>
        <span>搜索形文本框：</span>
        <input type="search" placeholder="搜索..." />
      </label>
      <label>
        <span>禁用的文本框：</span>
        <input type="text" value="2333" disabled />
      </label>
      <label>
        <span>只读的文本框：</span>
        <input type="text" value="2333" readonly />
      </label>
      <label>
        <span>滑动条：</span>
        <input type="range" name="points" min="1" max="10" value="5" />
      </label>
      <label>
        <span>开关按钮：</span>
        <input type="checkbox" class="switch" />
      </label>
      <label>
        <span>上传文件：</span>
        <input type="file" />
      </label>
      <label>
        <span>上传多文件：</span>
        <input type="file" multiple />
      </label>
      <label>
        <span>选择颜色：</span>
        <input type="color" />
      </label>
      <label>
        <input type="checkbox" />多选选项
      </label>
      <label>
        <input type="radio" />单选选项
      </label>
      <label>
        <input type="checkbox" disabled />禁用的多选选项
      </label>
      <label>
        <input type="radio" disabled />禁用的单选选项
      </label>
      <label>
        <span>个人介绍：</span>
        <textarea placeholder="在此编写你的个人介绍" rows="3"></textarea>
      </label>
      <label>
        <span>选择适合你的英雄：</span>
        <select>
          <option>小缤</option>
          <option>小奇</option>
          <option>保罗</option>
          <option>路人甲</option>
          <option>路人乙</option>
        </select>
      </label>
      <label>
        <span>选择适合你的伙伴：</span>
        <select multiple>
          <option>拉菲</option>
          <option>索菲</option>
          <option>阿卡林</option>
          <option>混沌老师</option>
          <option>埃尔德里奇</option>
        </select>
      </label>
      <label>
        <span>原生进度条：</span>
        <progress value="10" max="50"></progress>
      </label>
    </fieldset>

## 表单小组：

> PS：给使用 `form` 或 `fieldset` 标签的元素添加 `inline` 类可以使其子选项单行显示。

多行： 多选选项 1 多选选项 2 多选选项 3
单行： 单选选项 1 单选选项 2 单选选项 3
混搭：
查看代码：

    <form>
      <fieldset>
        <legend>多行：</legend>
        <label><input type="checkbox" />多选选项 1</label>
        <label><input type="checkbox" />多选选项 2</label>
        <label><input type="checkbox" />多选选项 3</label>
      </fieldset>
      <fieldset class="inline">
        <legend>单行：</legend>
        <label><input type="radio" name="radio" />单选选项 1</label>
        <label><input type="radio" name="radio" />单选选项 2</label>
        <label><input type="radio" name="radio" />单选选项 3</label>
      </fieldset>
      <fieldset>
        <legend>混搭：</legend>
        <div class="row s">
          <div class="col-m-4">
            <label>
              <input type="text" placeholder="名字：" />
            </label>
          </div>
          <div class="col-m-4">
            <label>
              <input type="text" placeholder="邮箱：" />
            </label>
          </div>
          <div class="col-m-4">
            <label>
              <input type="text" placeholder="网站：" />
            </label>
          </div>
          <div class="col-m-12">
            <label>
              <textarea placeholder="在这里留言吧"></textarea>
            </label>
          </div>
          <div class="col-m-12">
            <button class="btn yellow" type="submit">提交</button>
          </div>
        </div>
      </fieldset>
    </form>

## 表格：

Kico Style 自带响应式表格系统，须在 `table` 元素前添加一个类名为 `ks-table` 的 `div` 盒子。

> PS：表格默认为 100% 尺寸，待表格内文字空间不足时，将会自动出现滚动条以实现响应式。如果想限制表格宽度，请使用栅格系统。

姓名 | 性别 | 年龄 | 介绍
--- | --- | --- | ---
小缤 | 女 | 13 | 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 | 男 | 13 | 缤奇的全栈工程师，小明认为他是只大佬。
小明 | 男 | 17 | 缤奇的前端工程师，就是写这个框架的逗比。

查看代码：

> 在提交 a991a2 中，已经不会默认禁止元素换行了。如果想要回到此前的方式布局表格，你不妨可以尝试一下 `.text-nowrap` 类名。

姓名 | 性别 | 年龄 | 介绍
--- | --- | --- | ---
小缤 | 女 | 13 | 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 | 男 | 13 | 缤奇的全栈工程师，小明认为他是只大佬。
小明 | 男 | 17 | 缤奇的前端工程师，就是写这个框架的逗比。

查看代码：

给表格添加 `fill` 扩展类即可获得色彩版的效果。

姓名 | 性别 | 年龄 | 介绍
--- | --- | --- | ---
小缤 | 女 | 13 | 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 | 男 | 13 | 缤奇的全栈工程师，小明认为他是只大佬。
小明 | 男 | 17 | 缤奇的前端工程师，就是写这个框架的逗比。

查看代码：

如果想做一个内容复杂的表格，需要部分列换行，部分列固定，且不能出现滚动条，你可以结合 HTML 的 `colgroup` 标签，或者使用 `.text-nowrap` 类名。

Features | Description
--- | ---
Easy Customized | Use CSS Variable, you can modify the colors, paddings, and more thing.
Reset Default Styles | Just write HTML code, the default CSS style is just enough. It looks better than the browser's.
Lightweight Code | Use Kico Style, the base CSS filesize with GZIP can be less than 7kb. that isn't great?

查看代码：

## 多媒体：

一首随机动漫音乐：

查看代码：

一个小视频（来源自 cPlayer 项目）：

查看代码：