CSS 是一个用来修饰HTML的文件，用法也很简单。一般建议将HTML和CSS分开编辑，首先在HTML文件的header中用<link>引入对应的CSS文件。 然后在CSS文件中，使用selector选中要修饰的对象，并给相应的属性赋值。例如

selector{

　　Property:value;

}

虽然CSS 中有147中built in颜色，但是颜色的名字并不容易记忆。 常用的颜色命名方法有两种：1 Hexdecimal 2 RGB

1 Hexdecimal 有六位 color:#XXXXXX 其中每两位分别代表Red，Green，Blue；

2 RGB 与上面类似，区别是用十进制表示三原色。 e.g. color : RGB(red,green,blue) range(0,255);

另一种特殊的RGB颜色是RGBA(X,X,X,X) 前三位不变，最后一位用来表示颜色的透明度。

几种常用的属性：

1 Background 的值可以是 1 颜色：rgb（255，0，0） 2 图片：URL（“img.png"）;

2 Border: 2px solid purple;

CSS常用的selector

1 ID=“ID” 　　#ID{}

2 Class = "class"　　.class{}

3 element 　　element name {}

4 a:link => anchors tags that have not been clicked on; a:visited => ones have been clicked on.

5 X Y {} 表示 X 元素中的所有Y元素 e.g. ol li

6 X > Y {} 表示X元素中所有直接的子Y元素

7 X ~ Y similar to X + Y ，但是选中X之后的所有Y元素

8 * {} 全选

9 X + Y 选中Y元素后的第一个X元素

10 X[xxx] & X[xxx="mm"] 选中有XXX属性的X元素 & 选中 xxx属性值位“mm”的X元素

11 X:not(selector) 选中X元素中除去selector以外的所有元素

12 X::pseudoElement e.g. X::first-line(first-letter)

13 X:nth-of-type(n) e.g. li:nth-of-type (3) the paramter is not zero based. 选中第三个 list item

14 X:first-child/last-child 选中第一个或者最后一个X元素。

make all elements UPPERCASE: text-transform:uppercase;

tip:<span></span>可以将一些文字包围起来用以单独修饰，而不影响其他地方。

FONT：

font-family

font-size

font-weight: 文字加粗的程度

text_align: 对齐方式

text_decoration: 文字修饰的方式 e.g. line-through 下划线

Margin: X X X X 依次是top right bottom right

Margin: 0 auto 0 auto auto可以自动居中

Padding：内容与边界之间的距离

Float：left/right 一个元素靠左或靠右

Letter-space:可以决定每个字母之间的空隙大小

rem单位是相对于root element的大小， e.g. 2rem代表两倍于root element的大小

Max-width限定最大宽度，width:80% 为parent的80%宽度

--------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap

Bootstrap 常用的框架，提供了常用的font button nav等elements。 通过给HTML的某一元素赋值 Bootstrap特定的class，可以自动加载对应的属性，一个element可以同属于多个class。

e.g. <button class="btn btn-success btn-xs"> 规定这个button属于三个btn相关的类，btn-success 修饰了button的style， btn-xs 规定了buttn的大小

Jumbotron：

A lightweight flexible component that can optionally extend the entire viewport to showcase key content on your site

简单来说就是一个用来展示网页内容的component

Bootstrap还提供了Navbar，一般用法就是先复制bootstrap提供的例子代码然后进行相应的修改。

Grid System

<div class = "container">

　　<div class="row">

　　<div class="col-lg-6"></div>

　　<div class="col-lg-6"></div>

　　</div>

</div>

每一个row里最多可以均分为12份

<div class="col-lg-6 col-md-2 col-sm-6 "></div>

lg md sm对应不同大小的浏览器尺寸：

当界面缩小到mid时，每个part占2个单位

当界面缩小到small时，每个part占6个单位

关于设置背景图片：

Background-size : cover;

Background-position : center;

使整张图片居中并覆盖全部html的范围

为了使背景图片能够覆盖整个浏览器，需要令

Html{

Height:100%;

} （默认的html高度与body的高度相同）