HTML+CSS学习

覆盖样式的方法

1. 在发生冲突时，浏览器会使用最后的 CSS 声明。
2. id 属性总是具有更高的优先级。
3. 行内样式也可以覆盖style里面定义的所有css。
4. !important强力设置最高级别。

颜色表示法

1. 单词；
2. Hex code；
3. rgb（a,b,c）值。

Bootstrap Fluid Containers

你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

• 我们需要把所有的HTML内容放在class为container-fluid的div下；
• 通过Bootstrap，我们要做的只是给图片添加**img-responsive**class属性这样图片的宽度就能完美地适配你的页面的宽度了；
• text-center class属性使文字居中；
• **btn**class使按钮变样子；
• **btn-block**class使按钮变成块级元素；
• 深蓝色btn-primary使按钮变成蓝色；
• 浅蓝色 btn-info；
• 红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片；
• col-xs-? ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），? 是你需要填写的数字，代表在一行中,各个元素应该占的列宽；
• 把 Like, Info 和 Delete 三个按钮一并放入一个
  元素中；然后，其中的每一个按钮都需要各自被一个

  元素包裹；
• col-md-?应用于大屏幕；
• 用span标签来创建行内元素，可以用此为一个元素的不同部分指定样式；
• Bootstrap 有一个 class 属性叫做well，它的作用是为设定的列创造出一种视觉上的深度感:要单独创建一个div，包容
  和
  之间的东西；
• Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default

Font Awesome 是一个非常方便的图标库

你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

• i 元素指代图标，你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标fa和fa-thumbs-up以及fa-info-circle；
• 给你表单的文本输入框增加 class**form-control**；

记住，你可以像这样赋予一个元素 id：

• 设置块级元素的 max-width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

#main {
  max-width: 600px;
  margin: 0 auto; 
}

• 一劳永逸的使box不再改变之法：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}