CSS知多少

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、Cascading Style Sheets 层叠样式表

2、层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。

3、样式的5大来源：浏览器默认样式、浏览器用户自定义样式、行内样式、内部样式、引用样式

4、浏览器默认样式表

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul,center,
dir, hr, menu, pre{ display: block}
/* 以上按照block显示，没有规定的则按照默认的inline显示 */li { display: list-item}
/* 程序猿常用的display值是：inline/block/inline-block，很少用到 list-item
list-item到底是什么样的显示效果，可以通过例子验证。。。。
第一，你可以不用ul-li，而用其他标签实现list-item的效果
第二，要意识到，浏览器对待html只是把它当作一个dom树，至于显示成什么效果，是通过浏览器默认的css实现的，即样式全部通过css设计，和html无关 */head { display: none}
table { display: table }
/* display:table 和 block 最大的区别在于：包裹性。提到包裹性，就不得不提一下float和absolute*/tr { display: table-row}
thead { display: table-header-group}
tbody { display: table-row-group}
tfoot { display: table-footer-group}
col { display: table-column}
colgroup { display: table-column-group}
td, th { display: table-cell; }
/* 与table相关的其他display值，研究的意义不大，但是table-cell值得一说。
table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）
实际上table-cell是要依赖其他table相关的display，但是浏览器会为我们做这些工作，不必手动填写 */caption{ display: table-caption}
th { font-weight: bolder; text-align: center}
/* 标题默认设置了粗体和文字居中 */caption{ text-align: center}
body { margin: 8px; line-height: 1.12}
/* 不同浏览器的margin不一样，所以要设置【 *{margin:0} 】
line-height:1.12 针对英文没问题，但是中文看起来很别扭
另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值*/h1{ font-size: 2em; margin: .67em 0}
h2{ font-size:1.5em; margin: .75em 0}
h3{ font-size: 1.17em; margin: .83em 0}
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin:1.12em 0}
/* em是相对单位，1em就是一单位，浏览器默认的一单位是16px，
可以通过 body{font-size:20px} 来修改一单位的值
p的字体大小是1em，h1是2em，h2是1.5em，等等
另外，与文字相关的距离值，最好用相对单位，例如 line-height:1.4; margin:.5em等等，这样做的好处就是当自定义了1em的绝对px时，line-height也会跟着变 *//* 注意，如果我们自己写css【 * {margin:0} 】，可以把p、h1、h2等标签的margin覆盖掉
我们都知道，*选择器的权重是最低的，但是它却能覆盖掉标签选择器，说明浏览器已经在这里面做了手脚
浏览器没有让默认样式和用户自定义样式“公平竞争”，而是优先用户自定义样式 */h5{ font-size: .83em; margin: 1.5em 0}
h6{ font-size: .75em; margin: 1.67em 0}
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder}
/* 这里可以看到哪些标签文字是加粗的 */blockquote { margin-left: 40px; margin-right: 40px}
i, cite, em,
var, address { font-style: italic}
/* 这里可以看到哪些标签是斜体 */pre, tt, code,
kbd, samp { font-family: monospace}
pre{ white-space: pre}
button, textarea,
input, object,
select { display:inline-block; }
/* 不知道inline-block是什么样子的？或者不知道inline-block有什么特性？
在这里看看哪些标签是inline-block，就知道inline-block的用处了
具体inline-block的用途，我们会在后面详细介绍，此处只是点出来 */big { font-size: 1.17em}
small, sub, sup { font-size: .83em}
sub{ vertical-align:sub}
sup { vertical-align: super}
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle}
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through}
hr {border: 1px inset}
/* 为什么<hr/>默认是那么个难看的样子，特别是IE下，这就是罪魁祸首 */ol, ul, dir,
menu, dd { margin-left: 40px}
ol {list-style-type: decimal}
/* ul 和 ol 在默认情况下都会有一篇左边的间距，在这里可以看到为何会有间距，以及间距的具体大小是多少。
*/ol ul, ul ol,
ul ul, ol ol { margin-top:;margin-bottom:}
u, ins { text-decoration: underline}
br:before {content: "A"}
/* ？？？？？？？？？？？？？ */
:before, :after { white-space: pre-line }
/* <br/>为何能实现换行？浏览器得到html的br标签，只会解析成一个dom节点而已，
而“换行”这一功能是通过这里实现的？？？？？ */center{text-align: center}
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em}
:link, :visited { text-decoration: underline}
:focus {outline: thindottedinvert} /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override}
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override} *[DIR="ltr"] { direction: ltr; unicode-bidi: embed}
*[DIR="rtl"] { direction:rtl; unicode-bidi: embed}
/* 这些标签或属性都不常用 */@media print{
h1{ page-break-before:always}
h1, h2, h3,
h4, h5, h6{ page-break-after: avoid}
ul, ol, dl { page-break-before: avoid}
/* 对于打印页面时的设置，不常用 *//* 以下都是按照标签选择器来的，标签选择器比类、id选择器的权重都低。
所以，用户自定义的样式，无论是用标签、类还是id，都能覆盖默认的标签选择器 */浏览器默认样式