CSS学习笔记（一） --CSS基础

CSS学习笔记（一） --CSS基础

本人大四渣前端一枚，目前还在求职状态，虽然小公司的offer也拿到了不少，但是次次在大公司面试时碰壁，并且均被指出基础不是特别扎实，因此最近在自我反省需要在重新将基础打扎实，希望自己在学习前端的过程中可以在CSDN上分享一些学习的笔记和心得，欢迎广大前端大佬前来指点，有错误和不足的地方指教！！！

CSS的出现

在早期的HTML中，过多的使用标签或者属性来表示文档中元素的样式，如 <font size="+3" color="red">等，带来了种种问题：

• HTML代码庞大，结构性降低。
• 样式维护困难，不存在公共的样式。

CSS 的样式表能大大减少web人员的工作量,可以将CSS样式表集中在页面的某处,便于维护.还能将同一样式表运用于多个页面上。

• 层叠：根据层叠的优先级，对于相同样式优先级高的会覆盖优先级低的，以此为基础可以创建相当复杂的样式表，以及浏览器的自带样式*（例如老人浏览器）*。
• 缩减文件大小：将HTML中表示样式的代码以样式表的形式分离出来，仅将HTML作为网页骨架，而单独再另行下载CSS样式表，可大大减少下载时间。
• 为未来做准备：W3C已经开始去除样式元素，如 font、s、strike、center等。
• 除此之外，很重要的一点，在使用CSS制作炫酷吊炸天的页面的时候务必记得，页面应当包含有某些结构含义的信息，才能让页面在一些极端情况下有更好的灵活度（定制浏览器、搜索引擎等）。

CSS基本术语

• 元素：HTML中的标签
• 替换元素和非替换元素：
  • 替换元素： 元素的内容本身并非文档的内容，如<img>、<input>
  • 非替换元素： 元素内容由文档内容直接指定，如<div>、<span>
• 块级元素和行内元素（分别对应 display的block和inline属性）：
  • 块级元素：粗略的来说，块级元素的两旁自动添加的换行符，如<div>、<p>。
  • 行内元素：行内元素不能定义宽高、不会填充其父容器的内容区。

在文档中引入CSS

• link标记：<link rel="stylesheet" type="text/css" href="./sheet1.css" media="all" />，link必须放置在head中，使浏览器能更早的加载外部样式表并加快renderTree的生成，其中
  • rel：当前文档和被连接文档之间的关系。
  • type：规定被链接文档的MIME类型。
  • href：规定被链接文档的地址。
  • media：代表该样式表所要应用于哪些媒体。
• style元素：<style type="text/css">...</style>，这种导入样式的方法称为文档样式表。
• @import：

<style>
	 @import './index.css' screen; 
</style>

@import出现在<style>标签中，并且只能出现在style的顶部，并且可以指定对应的加载的媒体类型。同时@import可以加载外部的CSS样式表。

CSS注释

<style>
	/* this is a  comment */
	...
</style>

内敛样式

	<div style="font-size:20px;color:white;"></div>

但是不推荐这种写法