HTML/CSS01

1.  div
div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。
你可以用<div>来标记一个div元素的开始，然后用</div>来标记一个div元素的结束。
2. 设置背景颜色：
  如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的 style 元素中：
.green-background {
  background-color: green;
}
创建一个叫做 gray-background 的类选择器，设置其 background-color 为 gray，最后应用到 div 元素。
3. id
除了 class属性之外，每一个 HTML 元素还可以使用 id 属性。
id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的 id 属性。
下面举例说明了如何设置h2 元素的id属性为cat-photo-app。
 <h2 id="cat-photo-app">

4. id选择器
声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：
cat-photo-element {
  background-color: green;
}直接定义id
<from id = "cat-photo-element"></from>
5.
所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离。
6. 
.green-box {
    background-color: green;
    padding: 20px;//内边距 框内距离
    margin: 20px;//外边框  框距离界面的远近
  }将一个元素的 margin 设置为负值，元素将会变大。
 7. 
 .green-box {
    background-color: green;
    padding-top:40px;
    padding-left:40px;
    padding-bottom:20px;
    padding-right:20px;
  }
  padding: 10px 20px 10px 20px;
  顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
  ***
  8. margin:
     margin: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
9. css继承 body
每一个 HTML 页面都有一个 body 元素。
通过将其 background-color 设置为黑色，我们可以证明 body 元素的存在。
<style>
  body{
    background-color:black;
  }//全部页面黑色

</style>
10. 你可以像对其他 HTML 元素一样对你的 body 元素应用样式，并且所有其他元素将继承你的 body 元素的样式。
<style>
  body {
    background-color: black;
    font-family:Monospace;
    color:green;
  }

</style>
<h1 >Hello World</h1>
11. <style>
  body {
    background-color: black;
    font-family: Monospace;
F    color: green;
  }
  .pink-text{
    color:pink;

f  }
</style>
<h1 class="pink-text">Hello World!</h1> 以此调节冲突
12. 在 HTML 中这些 class 如何排序是无所谓的。
然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。
F<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
    .blue-text{
      color:blue;
    }

</style>
<h1 class="pink-text blue-text">Hello World!</h1>

13.
浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。
声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text{
    color: orange;
  }
</style>
<h1 class="pink-text blue-text" id = "orange-text">Hello World!</h1>
14. in-line style（行内样式） 使 h1 元素变为白色。覆盖id
<h1 style="color: green">
15.最终确定覆盖方式：
给 pink-text 元素的 color 声明加上关键字 !important，以便 100% 确保你的 h1 元素是粉色的。
.pink-text {
    color: pink !important;
  }
16. 颜色的6位十六进制表达方式  #000000 black
0颜色缺失 f最大亮度
  16 个值和 6 个位置意味着我们有 16 的 6 次方，或者说超过 1600 万种可能的颜色。
Hex code 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。
  hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
  第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。
  #FF0000纯红色 （#F00）（rgb(255, 0,0)） 
  #00FF00纯绿色（rgb(0,255,0)）
  #0000FF纯蓝色（rgb(0, 0,255)）
  #FFA500 橙色  （ rgb(255,165,0)）
  #808080灰色
  #111111 深黑色
  在 CSS 中表示颜色的另一个方法是使用 rgb 值。
代表黑色的 RGB 值看起来是下面的样子：
rgb(0, 0, 0)
代表白色的 RGB 值看起来是下面的样子：
rgb(255, 255, 255)
使用 rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。
如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的 rgb，和 hex code 一样有完全相同数量的可能数值。
让我们用黑色的 RGB 值 rgb(0, 0, 0) 替换掉 body 元素背景色的 hex code。

  17. 响应模式 适应电脑屏幕手机大小
  Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。 
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

    <div class = container-fluid>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    内容云云
    <div>