CSS基础复习

重新撸一遍CSS的基础，因为以前面试的时候被问到，突然发现某些概念搞不清楚，瞬间懵逼了，其实我都知道的，就是因为不会炒概念，导致面试官觉得我很low，你特么连这个都不知道还敢来面试，回家种田去好嘛！

样式分类

1.行内样式/行间样式

<p style="color:#F00; background:#CCC; font-size:12px;"></p>

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。

2.内嵌样式

<head>

    .test{background:#eee;}

</head>

3.链接样式

<link type="text/css" rel="stylesheet" href="style.css" />

4.导入样式

@import style.css

行内样式 > 内嵌样式 > 链接样式 > 导入样式

重要的事情说三遍...

选择器

标签选择器/元素选择器

a{text-decoration:none;}

ID选择器

#test{background:#eee;}

类选择器

.test1{background:#eee;}

.test2{background:#fff;}

.test3{background:#000;}

<div class="test1 test2 test3"></div>

通用选择器

*{margin:0px; padding:0px;}

不过这么用不太好，因为*会把HTML所有的标签都遍历一遍，太浪费了，最好是用到哪些再写哪些

body,div,p,a,ul,li{margin:; padding:;}

最好是这样

html, body, dl, dd, dt,

ul, ol, li,

h1, h2, h3, h4, h5, h6, pre, code,

form, fieldset, legend, input, textarea, optgroup,

p, blockquote, figure, hr, menu, dir,

thead, tbody, tfoot, th, td {

  margin:;

  padding:;

}

选择器的集体声明

h1,h2,h3,h4,h5,h6{color:#900;}

选择器的嵌套

.test1 #test2 span{background:#eee;}

派生选择器/后代选择器

div span{background:#eee;}

属性选择器

input[type="text"]{font-size:14px;}

子元素选择器

div>span{background:#eee;}

相邻兄弟选择器

div+span{background:#eee;}

块状元素block
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素inline
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

补充：

textarea 默认只能垂直拖动，防止宽度改变破坏布局。
small 元素字号不小于12px，汉字小于 12px 不易阅读。
label 元素默认光标设为「手型」，暗示此处可点击。

textarea {

    resize: vertical;

}

small {

    font-size: 85.7%; /* 12/14=0.8571428571 */

}

label {

    cursor: pointer;

}

字体

永远不要只写中文字体
西文字体保证在中文字体前面
字体顺序遵循 Mac →Linux→ Windows
不要 PSD 里什么字体就设定什么 font-family

body {

  font-family: sans-serif;

}

body { font-family:'helvetica neue', arial,

                   'hiragino sans gb', stheiti,

                   'microsoft yahei',

                   'wenquanyi micro hei',

                   sans-serif;

}