CSS入门学习笔记（一）

CSS（Cascading Style Sheets）层叠样式表。

一、简单介绍CSS的发展

1、两个人合作发明了CSS

1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。

2、W3C 开始接管CSS

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。

3、CSS 2.1 （目前应用最广泛的CSS版本）

1998年5月W3C发表了CSS2。CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。

4、CSS 3 在2011年推出的，不算什么新的工具了。从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有：

CSS 选择器level 3

CSS 媒体查询level 3

CSS Color level 3

更多关于CSS的信息资料搜索 CSS spec，主要还是英文。

5、CSS 4?

并没有 CSS 4，只有各个模块的level 4。

二、关于CSS周边工具

1、LESS CSS

一种简化、功能更多的 CSS 语言中文官网英文官网

2、SASS

一种简化、功能更多的 CSS 语言（搜索中英文官网）

3、PostCSS

一种 CSS 处理程序。

在学习CSS的初期最好先不看周边工具，学好最原始的 CSS，然后升级就很容易了。

三、CSS的学习资源

1、Google: 关键词MDN

2、CSS Tricks

3、Google: 阮一峰 css 最开始学的时候就看着两个人的东西

4、张鑫旭的 240 多篇 CSS 博客

5、Codrops 炫酷 CSS 效果效果真的很好

6、CSS揭秘（老外写的一本书，翻译成的中文）

7、CSS 2.1 中文 spec

8、Magic of CSS（免费在线书）

资料的使用方法：中文学习资源只看大V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。看书的效果并不大，最权威的书其实是文档。

四、CSS的实际操作

1、引入CSS的方法

1.0、没有CSS之前，添加样式是在标签上直接添加。

比如<body bgcolor=”gry”>:body一大块的背景颜色都变为了灰色，<h1><center><font

color="red">Hello</font></center></h1>：Hello会变为红色并且居中。

引入CSS有如下四种方法

1.1、引入内联样式，通过将CSS写在标签上进行引入。

比如：<body style="background-color:grey;">和<h1 style="text-align:center;

color:red;">Hello</h1>，能实现1.0中的所有相同的功能。引入内联的方式一般在改动的时候会非常的麻烦的，每一句都要改，不是很方便。

1.2、使用标签<style></style>，一般而言，style标签是写在<head></head>里面的。

比如：

<style>

body{

background-color: grey;

}

h1{

text-align:center; color:red;

}

</style>

这样就会使得标签变得比较短。

1.3、引入外部文件，外联的意思把<link rel="stylesheet" href="./a.css">，其中 rel指的是relationship，在CSS文件中写入需要的样式。

1.4、在已经引入的CSS文件中再引入一个CSS文件，@import url(./b.css)；其中url中的是相对路径，也可以是绝对路径，在引入的这一个文件中编辑相关的样式。这样就能再次编辑样式了。

在HTML中引用CSS使用最多的是第2、3中方法，而第三中引入方式更能够简化程序的结构，在需要对样式做出改变的时候只需要修改CSS文件中对应的语句即可，相当方便，使用最多。

五、CSS的使用知识点

1、如何做横向布局

（float + clearfix）

在需要布局的子元素里引入float属性，但是仅仅使用float属性会出现bug，具体的表现形式会是，本来处于小面的元素会自动的跑到上面去，解决这个问题就需要在布局的子元素的父元素上引入clearfix属性，具体的例子是：

</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</nav>

</div>

还需要在CSS文档中添加样式

.clearfix::after{

content: ' ';

display: block;

clear: both;

}

2、常见的CSS属性

font-family、font-size、font-weight

ul、body 的默认 margin 和padding

color、background-color、margin、padding

line-height