CSS、Bulma介绍

一、序章

1. CSS 基础
2. Bulma 布局介绍
3. Bulma 组件运用
4. TODO 例子

二、CSS 基础

1. CSS 介绍

层叠样式表（英语：Cascading Style Sheets）

简而言之：美化网页的语言

2. CSS 语法

HTML语法是<div></div>	
 而CSS语法是div{key(属性):value(值);}

请使用 英文符号

举个例子：div{
width:100px;
heigeht:100px;
background-color:black;
}

显示100像素*100像素的黑色正方形。

如果不用css写，用HTML写这个黑正方呢？
每个HTML语句都可以有id、class、style。

<div style="width:100px;height:100px;background-color:black;"></div>

3. CSS常用元素

1.颜色

 <div 
     style="width:100px;
     height:100px;
  	background-color:black;
 	color:white">
 		HELLO!Bmatch
 </div>

默认字体颜色为黑色，黑底黑字看不见时请你写上color:white

——小技巧:如何获得页面的颜色？——
只有Google–右键检查–选中整个一条的–右下角的background-color:#0078D7就是颜色：这是颜色的标准表达方式：颜色一般用3个像素组成，每个像素16位。用3个16位的颜色组成一个复杂的颜色

还可以使用#0078D7左边的取色器Toggle color picker选中后点击任意颜色可以取色，颜思真的会变哦，也可以把颜色代码复制到我们自己的codepen里哦

2.字体大小

<div 
style="font-size:12px">
Hello Bmatch

10px和12px没有区别，因为在网页中默认最小是12px，不能再小了.
再小的字体可以用其他的语法来解决

3.宽高

4.盒模型(单独拿出来讲)

• 边框

• 内边距

• 外边距

5.背景

background-color:yellow;
background-image:url(http://*******.png);
background-repeat:no-repeat;

找图，右击图片——审查元素
background-image:url(https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);