前面讲的HTML，接下的章节是CSS

---

一.CSS

层叠样式表（Cascading Style Sheets）

CSS可以用来为网页创建样式表，通过样式表可以对网页进行装饰。

层叠：可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的，而CSS就可以分别为网页的各个层次设置样式。

二.CSS三种样式表写法

第一种：内联样式 ，编写到元素的style属性中

内联样式中只对当前元素内容起作用，不方便复用，不方便后期维护，因此，开发中不常使用，常用于小的测试中。

内联样式

第二种：内部样式，编写到head中的style标签里

可以对CSS选择器中指定的元素,一起设置样式，方便复用，只对当前页面起作用，对其他页面不起作用，在开发中第二推荐使用开发样式。

内部样式

第三种：外部css文件样式，编写到外部CSS文件中

通过link标签将外部的css文件引入到当前页面中，完全使结构和表现分离，使样式表在不同页面中使用，最大限度进行复用，利用浏览器缓存，加快访问速度，提高用户体验，也是开发中最推荐使用的方式。

外部样式

总结:

三种样式总结

三.CSS的语法

css注释格式： /* cs的注释 /*  ； 作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

css的语法：选择器 声明块

选择器：-通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。

声明块：-声明块紧跟在 选择器的后边，使用一对｛ ｝括起来，声明块中实际上就是一组一组的名值对结构。这一组一组名值对我们称为声明。在一个声明块中可以写多个声明，多个声明之间使用 ；隔开，声明的样式名和样式值之间使用 ： 来连接

例如：p｛ color：red；font-size:50px；｝

总结：

语法总结

四.内联和块元素

div就是一个块元素，所谓块元素就是会独占一行的元素,无论他的内容有多少，他都会独占一整行。除此之外，还有其他的块元素例如： p h1 h2 h3...

但是，div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式，div元素主要用来对页面进行布局的

例如，

<div style="background-color:red; width:200px;"> 我是一个div </div>

<div style="background-color:yellow; width:200px;"> 我是一个div </div>

块元素：独占一行，用于页面布局

span是一个内联元素（行内元素），所谓的行内元素，指的是只占自身大小的元素，不会占一行。常见内联元素：a img iframe span 

同样，span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式

例如，

<span>我是一个span</span>

<span>我是一个span</span>

span不会独占一行，用于选中文字设置样式

块元素和内联元素的作用：

块元素主要用来作业面中的布局，

内联元素主要用来选中文本设置文本样式，

一般情况只是用块元素去包含内联元素，而不会使用内联元素去包含块元素

注意：

a 元素可以包含任意元素，但是除了他本身

p元素不可以包含任何其他的块元素

例如，

<a href="#">

     <div style="background="red"; width:200px;"我是一个div </div>

</a>

则，文字和背景都被选入超链接中

总结：

块元素和内联元素总结