前言
以前刚接触css的时候，总觉得一个元素对应着它相应的属性，并且与对应的html文件结合，大概就能出现你想要的漂亮页面把。但在CSS身上，“事与愿违”简直就是新手对它的代名词。
在css的世界里，不管是前端老手，还是资质尚浅的前端新手，都一定会犯“只知其一不知其二”这样的错误。以此，CSS也常被戏称为“不是科学，是艺术”。
要知道，“只知其一不知其二”这种错误真的是致命的，因为你永远不知道你明明检查了几万遍的正确的元素属性，到底是哪里出错了。所以在学习CSS之前，请先看一下方应杭老师回答的这篇，你就会对接下来学习CSS语法有更多的心理准备。
CSS那么难学竟然是因为它“不正交”：
为什么 CSS 这么难学？
这里先搞清楚几个基本概念：
标签、元素、属性，有很多人会搞不清出哪个是指着哪个，一图释所有：
一、CSS介绍
1、什么是css？
CSS（Cascading Style sheets），是用来为网页添加样式的代码
2、盒模型：
（1）内边距（
padding）：围绕着内容的空间，比如围绕段落的空间
（2）边框（
border）：紧接着内边距的实体线段
（3）外边距（
margin）：围绕元素外部的空间
（4）宽度（
width）：这个涉及了IE盒模型和标准盒模型
（5）高度（
height）
二、应用
1、简单示例：
css
hello css!
css 很6666
/style.css/
h1{
padding:10px;
background-color: orange;
border:1px solid black;
}
2、CSS的工作原理
三阶段：
浏览器输入url——浏览器向服务器发送请求——服务器将相关数据处理返返至浏览器——浏览器拿到并加载页面——解析html的字符串，词法分析解析成树状结构——create Dom tree
解析html时，加载css，文件被下载——解析css文件对其分析——attach style to Dom nodes，加入create Dom tree
两树状结构对应起来——新的dom树（节点相关的元素、参数）——渲染、绘制页面
？：白屏、加载顺序、加载时机
3、css应用方式
（1）外部样式表（推荐）
A、链接方式：通过引入css
如：
css
hello css!
css 很6666
B、导入方式：通过@import引入样式，放入css中，不要忘记分号
可选择以下几种方式：如
@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);
/*加入条件限制，如媒体查询属性 */
@import url('landscape.css') screen and (orientation:landscape);
（2）内部样式（内嵌方式） 你好
即将CSS放在页面的
hello css!