重新撸一遍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:0; padding:0;}
选择器的集体声明
h1,h2,h3,h4,h5,h6{color:#900;}
选择器的嵌套
.test1 #test2 span{background:#eee;}
块状元素block
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素inline
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
时间： 2024-08-10 21:21:58