CSS入门

                                  第一章 CSS介绍与div效果演示

1.1 CSS介绍

CSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中，把样式加到html4.0中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中，多个样式定义可层叠为一。

1.2 div效果演示

div它是一个html标签，一个块级元素（单独显示一行），它单独使用没有任何意义，必须结合CSS来使用，主要用于页面的布局。

 

 当再style中进行了大小配置之后

 

如果不指定大小的话，边框还是会将内容包裹住

如果里面没有内容，边框将重合。

span也是一个html标签，一个内联元素（显示一行）。单独使用没有任何意义，必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。

                                        第二章 CSS的使用

2.1 CSS的使用方式

具体如下图，其中冒号与分号必须是英文的，分号的话前面的不能省，最后一个可以省，但是建议都写。

2.2 CSS的引入方式

<style>代表的是设置样式

1. 内部引入，type中如果是text/css的话，type可以省略。

2. 行内引入

style是任何标签都具有的属性，如果要设置多个，记得用分号隔开。

这时就发生了属性层叠，CSS设置样式的代码，谁近谁生效。

3. 外部引入

在.css中直接写样式代码就好，不用写别的。

      

最后通过link引入就可以了，stylesheet代表层叠样式表，href中的值代表引入的CSS样式表的名称

 

 

2.2 CSS的选择器

2.2.1 基本选择器

1. 元素选择器

选择所有的div元素，并修改效果。

 

2. 类选择器

前面加个点，然后后面写上类的名字即可。一般是用在部分元素的样式设置上。

 

3. id选择器

前面写上#号，然后加上对应的id属性值即可。一般用在单个的设置。但是写两个一样的id值也能实现效果，如下下图，但是不推荐这样。

2.2.2 其它选择器

1.  层级选择器

有些情况不能直接用标签，可以选择层级

 

 2. 属性选择器

首先写标签名称，然后写属性与属性的值，属性的值用单引号括起来

2.3 CSS浮动

我们都知道div标签会独占一行，我们要想让不同的div标签占一行的话，我们就要用到CSS的浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

使用浮动的话必须要设置float属性值。

页面代码：

情况一：碰到外边缘

向右浮动：

 

向左浮动：

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。下图便是重合了。

注意div不在同一级时没有影响。

 

 

情况二：碰到另一个浮动框

 

若宽度不够用会挤到下面去

若框1的高度高了还会卡住

清除浮动：

在浮动的下面清除浮动，便会取消浮动对下面的元素带来的影响。

 

2.4 CSS盒子模型

boder其实就是div的边框，padding就是div中的内容与div边框的距离，div与其它div的距离就是margin。

多个盒子即div在一起的情况

取值问题：

默认情况，padding、margin、border都是零，假如我们设置了区域内容的width和height，那么此时整个元素框即div即content的总尺寸就是该区域内容的宽高了，此时，如果设定了margin值，那么整合元素框的总尺寸会发生变化（变大了），如果我们希望整体布局不发生变化，那么我们可以修改区域尺寸的内容（原大小减去设定的margin值）。

假如我直接设置高为100px，那么初始的元素大小的值就是100px了，如果我们再设置margin的大小，比如设置了margin的值为10，那么元素的大小就变为了120px，如果我们想让本来的大小还是100px，那么我们可以将div的尺寸设置为80px。

如果直接设置padding：10px的话，代表上右下左都设置，如果设置两个值的话代表上右一个值，下左一个值。

如果要设置div外面的，要设置margin。

两个问题待更新：

1. div浮动时左右顺序是如何决定的。

2. 如果设置div边框里面的内容与边框的距离，使用margin是否可以。