CSS三种引入样式与盒模型

CSS一共有三种引入方式：行内样式、内部样式、外部样式

•   行内样式

行内样式是在body标签里通过style属性引入css样式

示例如下图：

 

 

•   内部样式

内部样式是在style标签里面写入css样式

示例如下图：

 

•   外部样式

外部样式由css代码保存到电脑里的文件夹中，在html文件通过link标签引用刚保存好的css文件

示例如下图：

 

CSS盒模型介绍：CSS盒模型规定了元素处理元素的内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。

下图为盒模型模型图。

 

一、盒模型各部分说明：

1、content（内容）：盒子的内容，显示文本和图像。

2、padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。

3、margin（外边距）：盒子与邻元素的间距，外边距是透明的。

4、border（边框）：盒子的边框，可以设置边框的宽度、样式、颜色。

二、盒模型是每个HTML元素生成的透明矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。

一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：上(top)右(right)下(bottom)左(left)

三、边框相关属性：border-top(上边框) 、border-right(右边框)  

border-bottom(下边框) 、border-left(左边框)

内边距相关属性：padding-top(上内边距) 、 padding-right(右内边距)

padding-bottom(下内边距) 、padding-left(左内边距)

外边距相关属性：margin-top(上外边距) 、 margin -right(右外边距)

margin -bottom(下外边距) 、margin -left(左外边距)

简写样式：

例如给某个元素设置上外边距3px、右外边距4px、下外边距5px、左外边距7px。全写形式如下：

 

简写形式：

p{

margin:3px 4px 5px 6px

}；

写的时候不需要将4个值全部写出，哪一边没写，就用前面写出来的值。例如：

 

边框样式的用法：

 

 

简写形式：

p{  

 border:2px solid #B139E5；

}  

 边框样式：边框宽度2px 边框样式solid 边框颜色#B139E5