HTML/CSS01

1.  divdiv元素，也被称作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 black0颜色缺失 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>