志达IT网站css样式表的三种样式
1、行内款式表（行内式）
2、内部款式表（嵌入式）
3、外部款式表（链接式）
1、行内款式表
运用【style】属性引入CSS款式。示例：
style属性的运用
直接在HTML标签中设置的款式
实际在写页面时不提倡运用，在测试的时分能够运用。
例如：
2、内部款式表
在【style】标签中书写CSS代码；【style】标签写在【head】标签中。
示例：
3、外部款式表
CSS代码保存在扩展名为【.css】的款式表中HTML文件引用扩展名为【.css】的款式表，有两种方式：【链接式】和【导入式】。
语法：
1、链接式：
2、导入式：
【链接式】和【导入式】的差异：
1、归于XHTML
2、优先加载CSS文件到页面
@import
1、归于CSS2.1
2、先加载HTML结构在加载CSS文件。
css盒子模型有几种
盒子模型
CSS盒子模型便是在网页设计中经常用到的CSS技术所运用的一种思维模型。盒子模型（BoxModle）可以用来对元素进行布局，包含内边距，边框，外边距，和实际内容这几个部分。
盒子中的区域
一个盒子中主要的特点就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
盒子模型的示意图：
代码演示：
上面这个盒子，width:200px;height:200px;但是实在占有的宽高是302*302。这是由于还要加上padding、border。
注意：宽度和实在占有宽度，不是一个概念！来看下面这比方。
规范盒模型和IE盒模型
盒子模型分为两种：
第一种是W3c规范的盒子模型（规范盒模型）
第二种IE规范的盒子模型（奇怪盒模型）
我们现在所学习的常识中，以规范盒子模型为准。
规范盒子模型：
IE盒子模型：
上图显现：
在CSS盒子模型(BoxModel)规定了元素处理元素的几种办法：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型的差异：
在规范盒子模型中，width和height指的是内容区域的宽度和高度。添加内边距、边框和外边距不会影响内容区域的尺度，但是会添加元素框的总尺度。
IE盒子模型中，width和height指的是内容区域+border+padding的宽度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，假如你会一点Android，应该比较好了解吧。差异在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
标签也有margin
标签有必要着重一下。很多人认为标签占有的是整个页面的悉数区域，其实是错误的，正确的了解是这样的：整个网页最大的盒子是，即浏览器。而是的儿子。浏览器给默许的margin巨细是8个像素，此刻占有了整个页面的一大部分区域，而不是悉数区域。来看一段代码。
Document
div{
width:100px;
height:100px;
border:1pxsolidred;
padding:20px;
margin:30px;
}
有生之年
冤家路窄
上面的代码中，我们对div标签设置了边距等信息。翻开google浏览器，按住F12，显现效果如下：
知道width、height
必定要知道，在前端开发工程师眼中，国际中的一切都是不同的。
比方说，测量稿纸，前端开发工程师只会测量内容宽度：
下面这两个盒子，实在占有宽高，都是302*302：
盒子1：
.box1{
width:100px;
height:100px;
padding:100px;
border:1pxsolidred;
}
盒子2：
.box2{
width:250px;
height:250px;
padding:25px;
border:1pxsolidred;
}
实在占有宽度=左border+左padding+width+右padding+右border
上面这两个盒子的盒模型图如下：
假如想保持一个盒子的实在占有宽度不变，那么加width的时分就要减padding。加padding的时分就要减width。由于盒子变胖了是灾难性的，这会把其他盒子挤下去。
知道padding
padding区域也有色彩
padding便是内边距。padding的区域有布景色彩，css2.1前提下，并且布景色彩必定和内容区域的相同。也便是说，background-color将填充一切border以内的区域。
效果如下：
padding有四个方向
padding是4个方向的，所以我们能够别离描绘4个方向的padding。
办法有两种，第一种写小特点；第二种写归纳特点，用空格隔开。
小特点的写法：
padding-top:30px;
padding-right:20px;
padding-bottom:40px;
padding-left:100px;
归纳特点的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是相同的）
padding:30px20px40px100px;
假如写了四个值，则次序为：上、右、下、左。
假如只写了三个值，则次序为：上、右、下。??和右相同。
假如只写了两个值，比方说：
padding:30px40px;
则次序等价于：30px40px30px40px;
要懂得，用小特点层叠大特点。比方：
padding:20px;
padding-left:30px;
上面的padding对应盒子模型为：
下面的写法：
padding-left:30px;
padding:20px;
第一行的小特点无效，由于被第二行的大特点层叠掉了。
