2020 June 17 HTML与CSS

CSS第一篇：CSS简介、三种样式、CSS常用属性

CSS简介

  1. 什么是CSS
    1. CSS的作用是：可以给网页中的每一个元素设置样式（化妆、排版布局），让网页更加精美
    2. 完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片
    3. CSS的全称是Cascading Style Sheets，层叠样式表
  2. CSS简史
    1. CSS1 -> CSS2-> CSS2.1 ->CSS2.2
    2. CSS3: 是CSS2.x以后对某一些CSS模块进行升级更新后的称呼，比如CSS Color Module Level 3、Selectors Level 3、CSS Namespaces Module Level 3，目前并不存在真正意义的CSS3 （即并不是CSS 2.X里面所有的东西都升级为level3了，只是某些模块）
    3. CSS书籍推荐
      1. CSS权威指南(中电出版社)
      2. 精通CSS：高级Web标准解决方案（人民邮电）
  3. CSS样式的书写格式

    1. CSS提供了各种各样，丰富多彩的CSS样式，书写格式如下所示：

       color: red
    2. 冒号:左边是样式名，冒号:右边是样式值
    3. css属性都是小写
  4. 如何将CSS样式应用到元素上？
    1. CSS提供了3种方法，可以将CSS样式应用到元素上
      1. 内联样式:(inline style)
      2. 文档样式表:(document style sheet)
      3. 外部样式表: (external style sheet)

CSS三种样式

内联样式(inline style)

  1. 将样式直接写在元素的style属性上

     <div style="color: white; background:red;">文字内容</div>
  2. CSS样式之间用分号;隔开,建议每条CSS样式后面都加上分号;
  3. 在很多国内外资料中，CSS样式与CSS属性是同义词
  4. 有些人也把inline翻译为：行内，其实这里，用内联更合适，表示内部自带的意思

文档样式:(document style sheet)

  1. 将样式写在head元素的style元素中
  2. <style>元素的type属性值，默认是text/css

  3. 举例：

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>文档样式表</title>
     <!-- 文档样式 -->
     <!-- type可以默认不写 -->
     <!-- <style type="text/css"> -->
     <style>
         div {
             /* 设置颜色 */
             color: white; 
             /* 设置背景 */
             background:red;
         }
     </style>
 </head>
 <body>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
 </body>
 </html>

外部样式表: (external style sheet)

  1. 将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
  2. <link rel="stylesheet"> 元素的type属性值默认text/css，因此可以省略
  3. 在css文件中使用@charset指定文件编码，一般都是UTF-8
  4. 代码举例：

    1. html代码：

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>文档样式表</title>
     <!-- 外部样式表：将css写到一个单独的文件中，通过link引入 -->
     <link rel="stylesheet" href="./index.css">
     <!-- type可以省略 -->
     <!-- <link rel="stylesheet" href="./index.css" type="text/css"> -->
 </head>
 <body>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
    <div>文字内容</div> <br>
 </body>
 </html>

    2. index.css代码

       @charset "UTF-8";
 div {
     /* 设置颜色 */
     color: white; 
     /* 设置背景 */
     background:red;
 }

@import

  1. 可以在style元素或者css文件中使用@import导入其他的css文件
  2. 不建议使用@import导入css文件，他的效率比link元素低
  3. 举例使用：

    1. html代码：

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>文档样式表</title>
        
     <!-- <link rel="stylesheet" href="./index.css">
     <link rel="stylesheet" href="./index2.css"> -->
        
     <style>
         /* @import "./index.css";
         @import "./index2.css"; */
         /* @import "./index3.css"; */
         /* 也可以这么写 */
         @import url("./index3.css");
     </style>
 </head>
 <body>
    <div>文字内容</div> <br>
    <p>我是p标签</p>
 </body>
 </html>

    2. index.css

       @charset "UTF-8";
 div {
     /* 设置颜色 */
     color: white; 
     /* 设置背景 */
     background:red;
 }

    3. index2.css

       @charset "UTF-8";
 p {
     color: blue;
 }

    4. index3.css

       @charset "UTF-8";
 @import "./index.css";
 @import "./index2.css";

细节问题

  1. 文档样式表，外部样式表，为什么比内联样式多了个表字
    1. 内联样式只针对某个特定的元素
    2. 文档样式表、外部样式表可以针对一堆元素
  2. 注释：
    1. CSS的注释和HTML的注释是不一样的:/*注释内容*/
  3. HTML和CSS的编写准则
    1. 结构(html)、样式(css)分离
    2. 不要使用HTML元素的属性来给元素添加样式，比如body的bgcolor、img的width、height等
    3. CSS的一个很大的作用是取代之前的font元素（当前已经废弃）
  4. 设置网页图标
    1. link元素除了可以用来引入css文件，还可以设置网页的图标（href的值是图标链接）
    2. link元素的rel属性不能省略，用来指定文档与链接资源的关系
    3. 一般rel确定的话，相应的type也会默认确定，所以可以省略type
    4. 网页图标支持的格式是ico、png，常用大小是16*16、24*24、32*32(单位：像素)
    5. 使用步骤:
      1. 图标命名为favicon.ico，然后放到项目的根目录下

      2. 在head中引入代码：

                    
 <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">-->
 <!-- rel 为icon，type默认为"image/x-icon"，可以不写 -->
  <link rel="shortcut icon" href="favicon.ico">
    6. 查找常用的图标: 百度搜索”图标引擎“
    7. 制作ico图标
      1. 首先把我们想要的切成图片。
      2. 要把图片转换为 ico 图标，我们借助于第三方转换网站：http://www.bitbug.net/。 比特虫

颜色

  1. 颜色，有以下几种表示方法

    1. 基本颜色关键字：只提供了上百种基本颜色的关键字

       red、black、yellow、blue、purple、white....
    2. RGB颜色
      1. 十进制：rgb(red,green,blue)
      2. 十六进制：#rrggbb、#rgb
    3. RGBA颜色
      1. rgba(red,green,blue,alpha)

RGB颜色

  1. RGB颜色：通过R(red)、G(green)、B(blue)三种颜色通道的变化、叠加产生各种各样的颜色
  2. 十进制表示形式
    1. rgb(red,green,blue)，每一种取色值范围：0~255

    2. 举例：

       红色：rgb(255,0,0)
 绿色：rgb(0,255,0)
 蓝色：rgb(0,0,255)
 黄色：rgb(255,255,0)
 黑色：rgb(0,0,0)
 白色：rgb(255,255,255)
    3. 注意：
      1. 如果值超过255，比如300，会默认转成255

      2. 也可以写百分比：

         div {
     color: rgb(255, 0, 0);  
 }
 /* 100%表示255，0%表示0 */
 span {
     color: rgb(100%, 0%, 0%);
 }
 /* rgb(51,102,255) */
 p {
     color: rgb(20%, 40%, 255);
 }
  3. 十六进制表示形式

    1. #rrggbb，每一种颜色的取值范围都是：0~FF，大小写都可以

       红色：rgb #ff0000
 绿色：rgb #00ff00
 蓝色：rgb #0000ff
 黄色：rgb #ffff00
 黑色：rgb #000000
 白色：rgb #ffffff
    2. #rgb样式，会自动转化成#rrggbb
    3. 建议：
      1. 尽量使用#rgb取代#rrggbb,比如使用#345取代#334455
      2. 可以减缩CSS代码的体积，从而减少文件大小，节省用户流量，加快网页响应速度
颜色规律
  1. RGB颜色值越大，越靠近白色，越浅色
  2. RGB颜色值越小，越靠近黑色，越深色
  3. RGB颜色值一样，一般是灰色

RGBA颜色

  1. RGBA颜色在RBG颜色基础上加了个alpha，实现带有透明度的颜色
    1. rgba(red,green,blue,alpha)
    2. alpha取值范围为0~1，0代表完全透明，1代表完全不透明

  2. 关键字transparent等价于rgba(0,0,0,0),完全透明

     p {
     color: transparent;
 }

CSS常用属性

  1. CSS属性可用性
    1. 由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的
    2. 可以到https://caniuse.com查询CSS属性的可用性范围。
  2. CSS常用属性简介

    1. 按照CSS属性的具体用途，大致可以分类为：

       1. 文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
 2. 字体：font、font-family、font-style、font-size、font-variant、font-weight
 3. 背景：background、background-color、background-image、background-rpeat、background-attachment、background-position
 4. 盒子模型：width、height、border、margin、padding
 5. 列表：list-style
 6. 表格：border-collapse
 7. 显示：display、visibility、overflow、opacity、filter
 8. 定位：vertical-align、position、left、top、right、bottom、float、clear
  3. CSS参考资料
    1. 中文参考手册
      1. http://css.doyoe.com
      2. https://www.runoob.com/css/css-tutorial.html
    2. 官方文档
      1. https://www.w3.org

最常用的CSS属性

  1. 想要深刻理解所有常用CSS属性，最好先学会以下几个最基础最常用的CSS属性

     color: 前景色（文字颜色），前景包含：文字、边框、下划线
 background-color：背景色
 width：宽度
 height：高度
 font-size：字体大小
    1. 注意：color不仅仅表示文字颜色，前景色包含：文字、装饰线、边框、下划线等

文本

text-decoration

  1. 作用：text-decoration 用于设置文字的装饰线
    1. none：无任何装饰线（可以取出a元素默认的下划线）
    2. underline：下划线
    3. overline:上划线
    4. line-through：中划线（删除线）

  2. a、u、ins元素默认就是设置了text-decoration为underline

    pic

    1. 凡是浏览器检查代码，某个标签出现：user agent stylesheet字的，说明该标签浏览器设置了自带样式。

  3. 举例:

     <style>
    div {
        text-decoration: line-through;
    } 
    a {
        text-decoration: none;
    }
 </style>

letter-spacing、word-spacing

  1. letter-spacing、word-spacing分别用于设置字符、单词之间的距离
  2. 默认是0，可以设置为负数

  3. 举例

     div {
    /* 设置字符之间的距离,每个汉字、字母 */
    /* letter-spacing: 10px; */
    /* 设置单词之间的间距：以空格为分割为一个单词，比如：我是 div  则这是2个单词 */
    word-spacing: 10px;
 }

text-transform

  1. 用于设置文字的大小写转换

  2. 可以设置以下属性值：

     capitalize：将每个单词的首字母大写
 uppercase: 全部变为大写
 lowercase: 全部变为小写
 none： 没有任何影响
  3. 建议通过text-transform属性来控制网页中英文字母的大小写，不要直接在HTML中固定死书写形式

  4. 举例：

     div {
    /* 将每个单词的首字母大写 */
     text-transform: capitalize;
 }

text-indent

  1. 用来设置第一行内容的缩进
  2. text-indent:2em; 刚好是缩进2个字
  3. em是什么单位?
    1. em是相对单位，是相对于当前元素的font-size来计算的，当前元素没有设置就是父类的，往上寻找
    2. px是绝对单位
    3. em转化为px：px = em * font-size
    4. 比如：当前div标签内容的font-size为40px，设置width为2em，这实际像素为：40*2 = 80px

  4. 举例：

     div {
     font-size: 30px;
     /*首行缩进2个字*/
     text-indent: 2em;
     /* 实际宽度为 2*30 = 60rpx */
     width: 2em;
 }

text-align

  1. 设置元素内容在元素中水平方向上的对齐方式
    1. 为何要强调元素中？
    2. 因为对齐的前提条件是内容与元素之间必须有空间
    3. 即元素的尺寸要大于内容的尺寸才有效果
    4. 比如div元素默认占据一行，所以设置有效
    5. span元素默认包裹内容，因此设置无效
    6. 同理：span元素内容设置text-indent缩进也是无效的
  2. 常用属性值：
    1. left：左对齐
    2. right：右对齐
    3. center：正中间显示
    4. justify：两端对齐

  3. 举例：

     div {
     width: 200px;
     height: 200px;
     background-color: red;
     /* 设置内容在水平方向上居中 */
     text-align: center;
 }

white-space

  1. white-space用于设置空白处理和换行规则
    1. 意思就是如何处理一段文字的空格和换行

    pic

    1. normal：合并所有连续的空白，允许单词超屏时自动换行
      1. 换行（New lines）、空格和tab空格（Spaces and Tabs）都压缩（Collapse），保证单词的完整性（Wrap）
      2. 多个空格、换行会合并成一个空格
      3. 当一个单词(注意:是单词，不是字符，单词以空格为界限)非常长不够当前行显示时，直接换下一行显示
    2. nowrap：合并所有连续的空白，不允许单词超屏时自动换行
      1. 换行（New lines）、空格和tab空格（Spaces and Tabs）都压缩（Collapse），不保证单词的完整性（NO Wrap）
      2. 多个空格、换行会合并成一个空格
      3. 当一个单词非常长不够当前行显示时，不换下一行显示
      4. 本质功能就是让所有内容一行显示，不允许换行
    3. pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
      1. 换行（New lines）、空格和tab空格（Spaces and Tabs）都保留（Preserve）不压缩，不保证单词的完整性（NO Wrap）
      2. 多个空格、换行不压缩直接显示
      3. 当一个单词非常长不够当前行显示时，不换下一行显示
    4. pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
      1. 换行（New lines）、空格和tab空格（Spaces and Tabs）都保留（Preserve）不压缩，保证单词的完整性（Wrap）
      2. 多个空格、换行不压缩直接显示
      3. 当一个单词非常长不够当前行显示时，直接换下一行显示
    5. pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行
      1. 换行（New lines）保留（Preserve）、空格和tab空格（Spaces and Tabs）压缩（Collapse），保证单词的完整性（Wrap）
      2. 当一个单词非常长不够当前行显示时，直接换下一行显示

  2. 代码举例

      div {
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     /* 空格、tab、换行合并，超出单词换行 */
     /* white-space: normal; */
     /* 空格、tab、换行不合并，超出单词不换行  */
     /* white-space: pre; */
     /*空格、tab、换行合并，超出单词不换行 */
     /* white-space: nowrap; */
     /* 空格、tab、换行不合并，超出单词换行  */
     /* white-space: pre-wrap; */
     white-space: pre-line;
 }
 <div>
     哈哈哈哈哈中国中国Englishxxxxxxx    English
     哈哈哈哈
 </div>

pic

text-overflow

  1. text-overflow通常用来设置文字溢出时的行为(处理那部分不可见的内容)
    1. clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
    2. ellipsis：溢出那行的结尾处用省略号表示
  2. text-overflow生效的前提是overflow不为visible
    1. overflow属性不能设置为visible。
  3. text-overflow的效果受direction的影响

  4. 思考：如何让一个有固定宽度的元素永远只显示一行文字，并且溢出结尾处显示省略号？

     /*保证内容只显示一行*/
 white-space: nowrap;
 /*保证超出的内容不显示*/
 overflow: hidden;
 /*也可以设置超出直接减掉 clip*/
 /* 超出内容用省略号 */
 text-overflow: ellipsis;

字体

font-size

  1. font-size决定文字的大小
  2. 常用设置
    1. 具体数值+单位
      1. 比如：100px
      2. 也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50%
    2. 百分比：
      1. 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
      2. 注意：每个元素都默认的有font-size大小，即就算父元素没有设置font-size，那么他也有font-size值。
  3. 一般给body设置font-size就代表设置网页的默认字体大小
    1. 其他元素可以基于父元素设置字体大小
    2. 到时候只需要改变body字体的大小，其他元素就会按照比例改变

  4. 代码示例：

     <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>字体属性</title>
       
     <style>
         /* 父元素 */
         div {
             /* 就算不设置，也有默认值 */
             font-size: 20px;
             /* 注意：如果父元素也为em单位，那么就接着向上找父元素，直到body元素 */
             /* font-size: 2em; */
         }
         /* 子元素 */
        span {
               
            /* 1. 百分比： 这个百分比参照的是父元素div的默认font-size，实际大小为：20px * 200% */
            /* font-size: 200%; */
    
            /* 2. em：前面讲过，em的值相对于当前元素的font-size */
             /* font-size: 20px; */
             /* width = 2*20px */
             /* width: 2em; */ 
    
             /* 但是如果通过em设置自己的font-size呢？ --- em相对的是父元素的font-size */
             /* 实际值等于：font-size = 2*父元素div的20px = 40px*/
             font-size: 2em;
        }
     </style>
 </head>
 <body>
     <div>
         <span>我是span</span>
     </div>
 </body>
 </html>

font-family

  1. font-family用于设置文字的字体名称
  2. 可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）
    1. 可用的字体：指你当前电脑系统是否有相对应的字体
  3. 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
    1. 所以，如果希望中英文分别使用不同的字体，应该先将英文字体放在前面，中文字体放在后面

  4. 代码举例：

     div {
     /* 设置多个字体类型，从左到右，若果第一个字体系统存在那么就使用第一个
         courier New、consolas： 这两种字体只支持英文
      */
    font-family: "courier New","consolas","微软雅黑";
 }

@font-face

  1. @font-face可以让网页支持自定义字体（网络上下载的字体），不再局限于系统自带字体
  2. 常见字体种类
    1. TrueType字体：拓展名是.ttf
    2. OpenType字体： 拓展名是.ttf、.otf,建立在TrueType字体之上
    3. Embedded OpenType 字体: 拓展名是.eot,OpenType字体的压缩版
    4. SVG字体：拓展名是.svg、.svgz
    5. web开放字体：拓展名是.woff,建立在TrueType字体之上
  3. 并不是所有浏览器都支持以上字体，使用时要多加测试
  4. 字体下载：http://font.chinaz.com
  5. 使用举例：
    1. 下载自定义字体资源到本地，比如:PangMenZhengDaoCuShuTi-2.ttf
    2. 项目中新建资源文件夹：fonts，并将上面下载的字体拖入

    3. 代码：

       !DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>字体属性</title>
     <style>
         /* 加载下载的字体文件 */
         @font-face {
             /* 给这个字体自己起个名字 */
             font-family: "庞门粗体" ;
             /* 自定义字体文件的位置 */
             src: url("./fonts/PangMenZhengDaoCuShuTi-2.ttf");
             /* 可以同时设置该字体的多种格式 */
             /* src: url("./fonts/PangMenZhengDaoCuShuTi-2.ttf"),url("./fonts/PangMenZhengDaoCuShuTi-2.otf"); */
         }
         div {
             font-family: "庞门粗体";
         }
     </style>
 </head>
 <body>
     我是body
     <div>我是div</div>
 </body>
 </html>

font-weight

  1. 用于设置文字的粗细（重量）

     100、200...900每一个数字表示一个重量
 normal等于400
 bold等于700

  2. 举例：

     div {
     //font-weight: 600;
     font-weight: normal;
 }
  3. strong、b、h1~h6等标签的font-weight默认就是bold
    1. 可以通过浏览器检查代码，发现：user agent stylesheet默认设置font-weight属性
  4. 总结：从上面可以看出，HTML某些特殊的元素，仅仅是在普通的元素上加了一些默认样式

font-style

  1. 设置文字的常规、斜体显示
  2. normal：常规显示
  3. italic：用字体的斜体显示（字体类型有斜体样式，没有则无效）
  4. oblique：文本倾斜显示（不管字体有没有，直接将文本斜体）
  5. em、i、cite、address、var、dfn等元素的font-style默认就是italic
  6. 设置font-style为italic的span元素，使用效果等价于em元素

font-variant

  1. font-variant可以影响小写字母的显示形式
  2. 可以设置的如下:
    1. normal：正常显示
    2. small-caps：将小写字母替换为缩小过的大写字母

font

  1. font是一个缩写属性

  2. font-style font-variant font-weight font-size/line-height font-family

     div {
     font: italic small-caps 700 20px/40px "微软雅黑";
 }
    1. font-style、font-variant、font-weight可以随意调换顺序，也可以省略
    2. /line-height可以省略，如果不省略，必须跟在font-size后面
    3. font-size、font-family不可以调换顺序，不可以省略

line-height

  1. line-height用于设置文本的最小行高
  2. 行高可以先简单理解为一行文字所占据的高度
  3. 行高的严格定义是：两行文字基线（baseline）之间的距离
    1. 基线（baseline）：与小写字母x最底部对齐的线(就是假设这里写了一个小写字母x，然后底部对准的线，n、s与x相同)

    pic

  4. 可以设置以下值：
    1. 具体的数值+单位：比如40px
    2. 百分比：比如200%，最终的行高值是用百分比乘以元素的字体(font-size)大小
      1. 如果继承，那么继承的值不是父元素的百分比，是父元素的计算结果值
    3. 具体数值：比如1、2.5，最终的行高值是用数字乘以元素的字体(font-size)大小
      1. 如果继承，继承的值是父元素的数值，而不是父元素的计算结果

    4. normal：常规显示，浏览器会基于元素字体调整成一个合理值，范围在1.0~1.2

       div {
     /* 文字内容高度就是font-size的值*/
     font-size: 20px;
     /* 这么写 行高=字体大小，就是让div的内容高度去除内边距 !!!! */
     /* line-height: 20px; */
     /* 1*font-size = 20px */
     line-height: 1em;
     background-color: #ff0;
     width: 200px;
     height: 200px;
 }
  5. 注意区分height与line-height的区别
    1. height：元素的整体高度
    2. line-height： 只元素每一行文字所占高度
  6. 应用实例
    1. 假设div中有一行文字，如何让这行文字在div内部垂直居中

    2. 让line-height等于height的值

       div {
     background-color: #ff0;
     width: 200px;
     height: 200px;
     /*line-height=height,垂直居中   */
     line-height: 200px;
 }
  7. line-height设置的仅仅是最小行高，不能决定最终的行高
    1. 比如div的内部有个img标签，img图片尺寸很大，那么div就会被撑得很大
  8. 行高对齐
    1. 给同一行的一个元素设置行高。该行的其他元素也会自动对齐，即自动设置行高
    2. 如果同一行的各个元素都设置了行高，那么以行高值最大的那个为基准，其他元素对齐
     <style>
     div {
         background-color: #ff0;
         width: 400px;
         height: 200px;
            
     }
     span {
         background-color: #f00;
         font-size: 30px;
         /* 给同一行的一个元素设置行高。该行的其他元素也会自动对齐，即自动设置行高 */
         line-height: 80px;
     }
     strong {
         background-color: #0f0;
         font-size: 30px;
         /* 这个行高没用，以上面80px行高为准 */
         line-height: 50px;
     }
 </style>
 <div>
     <span>我是span</span>
     <strong>我是strong</strong>
 </div>
  9. line-height可以继承
    1. 如果父元素设置的为百分比，那么继承的结果为父元素计算值
    2. 如果父元素设置为具体数值（比如1.5），那么继承的结果就是父元素的值
     <style>
     div {
         background-color: #ff0;
         width: 400px;
         height: 200px;
         font-size: 20px;
         /* 计算结果值：40px */
         /* line-height: 200%; */
         line-height: 1.5;
     }
     span {
         background-color: #f00;
         font-size: 30px;
         /* 父元素为200%该值为父元素计算结果值：40px ； 父元素为1.5，该值为1.5*30= 45*/
         line-height: inherit;
     }
 </style>
 <div>
     <span>我是span</span>
 </div>

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents