Bootstrap 3.2.0 源码试读 2014/08/10-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

第一部分 normalize.css

167至171行

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}

表单分组标题的内添充为上 .23em，下 .75em，左右 .625em。外边距为上下0，左右2px，边框为#c0c0c0、实心的1px宽。

分组标题的内添充为0，边框为0。

176至178行

textarea {
  overflow: auto;
}

多行文本框在需要滚动条的时候再显示

179至181行

optgroup {
  font-weight: bold;
}

选项组的字体样式为加粗。

182至189行

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

表格table标签的相距单元的边框之间的距离为0，并且合并。单元格、标题行的单元格的内添充为0.

可以设置2个值，第1个为左右，第2个为上下。如果想继承自父容器则设为inherit

border-collapse是说如何处理相临单元格之间的边框样式。这里设置的是合并。

有3个值可选。

1、separate，这个是默认值，就是单元格独立显示自已的边框。

2、collapse，单元格之间合并显示边框

3、inherit，继承。

还有1个属性 empty-cells，如果2行2列的表格，你只用了3个单元格，第4个格没内容，那你不希望第4个没用的格子也显示边框，就是通过这个控制的

1、show

2、hide

3、inherit，继承。

第二部 @media print

这部分是用来设置打印的通用样式的（190至262行）。

使用的是媒体查询语法，举例如下：

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* 样式规则 ... */

}

解析：

1、only是说如果浏览器不支持媒体查询的语法就不要加载下面的样式了。

还可以设成not ，取反的意思。

2、screen这块是设备的类型

screen，屏幕；print，打印；all，所有；还有tv等等。

3、and ...( ...) 这块是就是条件的设定了。常用的有下面的这些，与浏览器的支持程序有关

min-width，最小可见区域

max-width，最大可见区域

min-device-width，最小设备宽度

max-device-width，最大设备宽度

orientation，屏幕方向，landscape（竖屏），portrait（横屏）

下面看一下这块的设置

191至197行

  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

实在是很讨厌*。

全局设定，字体颜色黑，清除字体及盒标签的阴影，背景透明。

！important，设置为最高优先级，覆盖同类型的样式设置。

198至211行

  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

1、链接的默认及访问过的样式为加上下划线。

2、链接的href属性内容后面加上属性href的值，举例子：

<a href="www.baidu.com">百度</a>，实际的显示内容为 百度(www.baidu.com)

3、链接的title属性的内容后面加上属性title的值。

4、如果链接的href的值是以javascript和#开头的，那清除掉插入的任何值，以免调用js及跳转锚点出错。

5、缩写abbr的title属性的内容后面加上属性title的值。

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

待续。。。

转载于:https://my.oschina.net/moyung2014/blog/299708