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 元素中,把它变成一个图标fafa-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;
}
原文地址:https://www.cnblogs.com/endymion/p/9090412.html