【CSS简介】

Css它对html来讲做出了很多的贡献其中有一个很重要的贡献就是将所有标签中跟样式有关的属性都集中起来管理使用了。

我们在原来使用html的时候发现记住标签并不难，难的记住谁有什么属性。

【体验css】

《css要求》

首先css语言要求所有的css都需要写在一对style标签，这个标签可以加上一个属性type="text/css"，保证更好的兼容，但是这个不加现在也都能兼容了。

在css中文字控制三属性分别变成了

font-size 表示字号；

Color 仍然表示文字颜色，但是注意只表示文字颜色了。

font-family 表示字体设置替换了原来的face。在css中如果要设置中文必须要加引号。

Text-align 表示文本对齐方式。等同于以前的align也是左中右；

【CSS的语法】

简介：

我们要学习的css一共分成了两大部分，一个是css属性（核心），另外一个是css选择器。（也就是说这两部分学完了css就没有别的东西了）

语法要求：

第一：css需要都写在style标签内，并且style标签要位于head头部标签里。

第二：css一共分为两部分其中css属性重新定义了键值对的语法要求格式是

k:v;

注意：如果遇到中文类型的值例如字体名称需要加引号。

《盒子特性》

在css眼中一切标签都具备盒子特性， 盒子的类型包括两种，一个是div类型（大盒子）另外一个是span类型（小盒子） 这两个盒子的区别

Div相当于一个段落盒它会独占一行；

Span相当于一个文字盒（就像一个字）它可以在一行内存在多个。

Div尺寸可以接受人为修改；相当于人工盒子；

Span的尺寸只跟内容有关相当于它是一个自然盒子；

这两个盒子的特性在css眼里今后将被施加到所有标签身上

化简总结：

Div这种盒子 独占一行，然后又能接受人为尺寸。 block

Span这种盒子 能在一行内共存，然后它是一种自然尺寸，只跟内容有关 inline

Zaicss的世界里面又制作出了另外一种性质的盒子同时具备两者的优点； inline-block

《实体化三属性》

我们为什么要学习实体化三属性，就是因为将来可以将任何标签都画成盒子。 你今后注意一件事情只要你给标签添加了实体化三属性，那么这个标签就该现形。

实体化指的就是把标签画成盒子。

实体化三属性分别是：

Width宽度单位带px；

Height高度；

Background背景色；

《盒子的显示模式》

在css眼中所有的盒子只有显示模式的不同。显示模式需要用display属性来修改；

大盒子默认的显示模式是 display：block；小盒子显示模式是inline；

优缺点：

大盒子的优点是可以接受人为尺寸，缺点是不能在一行内显示；

小盒子的优点是可以在一行内显示但是不接受人为尺寸。

所以css针对这两个问题专门制造出了一种显示模式可以同时具备两者的优点；

Display：inline-block；

《知识点》

如果发现实体化没有成功，那么只有一种可能就是现实模式没有转换。一般来讲我们只有特殊需求才会转化为inline-block其他时候都是另外两者之间的转换。

内边距属性：padding；

外边距属性：margin；

【边框属性】

《border》

Border属性是用来设置盒子边框的，它一共有3个值，css语法键值对的值与值之间用空格隔开。有的特殊属性是拥有多个值的。

基本结构：   border：粗细 类型 颜色；

其中类型有两个值 solid表示固态是实线。Dashed 表示虚线。

浏览器是有一定的容错能力的，即便你写的不标准但是有的时候也可以解析，但是你尽量要写的没有错才是最终目标。

《知识点》

Css中所有的边框都由4部分组成，分别是 上右下左。 Top，right，bottom，left

边框的本质：

Css中实际上一个盒子一共有3条边框。内外边距实际上是两条透明的看不见的边框。所以说但凡是边框都分成4部分就是上右下左。也就是告诉我们 margin和padding也可以写成4个单独的部分 margin-top或者padding-top；

【css选择器】

介绍：

在css中所有的标签都可以起两种名称一个是类名通过class属性，特点是可以重复。另外一个是id名属性，特点是整个网页只能有一个。

类选择器和id选择器以及标签选择器统称css中的基础选择器；他们的关系和身份证上的信息很像。Class相当于姓名，id相当于身份证号。标签类型相当于民族。之前学习的显示模式display相当于性别。所有的标签只有两种性别。要么是block要么是inline；

《对应关系》

在css中类名称通过  .类名来书写；

Id名称通过   #id名称来书写；

Font-weight:bold; 文字加粗属性；bold表示最大值就是粗体。

【清空默认边距】

有些标签默认状态会带有一定的内外边距，例如标题或段落标签，这些边距在我们实际写网站的时候是不需要的，默认会清掉这些边距，那么这个时候我们就有一个问题怎么才能选中所有的不同类型的标签一起清掉他们。

方法就是使用 一种新的选择器-通配符     *  作用是选中所有类型的标签。

注意：清空默认边距的时候需要清空 三个属性，padding，margin，border都为0即可。

（在真正做网站的时候一般会做一些准备工作其中第一项就是清掉所有默认边距。）

【基础选择器权重】

解释：当一个标签同时拥有多个选择器的时候它的样式听谁的。

《权重规律》

所有的4个基础选择器当中选择器的针对性越单一权重就越高。

【css中的对齐方式】

***在css中有两种类型的对齐方式；一种是内容对齐；一种是自身对齐；其中自身对齐有很大价值因为可控性更高。（我们之前学习过的东西基本上全是内容对齐，还没有拥有自身对齐能力的属性）

《居中对齐》

通过margin属性左右为auto可以设置盒子居中显示。如果单独让左外边距为auto会右对齐显示。

《内外边距的简写方式》

网页设计师工作很久以后会发现对于网页制作来讲分区之间的内外间距会经常设置，使用频率非常高。所以w3c为我们准备了margin和padding的简写方式；

4值方式：上 右 下 左；

3值方式：上 左右 下；

2值方式：上下 左右；较为常用；

1值：四个方向都相同。

一个复杂的东西想要记住最好就是找里面的规律；