1、CSS样式的引用方式

内嵌式：

  1. <head>
  2.     <style type="text/css">
  3.     选择器{
  4.       属性1:属性值1;
  5.         属性2:属性值2;
  6.       ...
  7.     }
  8.   </style>
  9. </head>

外联式：

  1. <head>
  2.     <link href="CSS文件的路径"    type="text/css" rel="stylesheet"/>
  3.   href：可以是相对路径，也可以是绝对路径
  4.   type：定义所链接文档的类型，“text/css”表示外部连接外部文件为css
  5.   rel：定义当前文档和被链接文档之间的关系，“stylesheet”表示被连接的文档是一个样式表文件
  6. </head>

2、CSS选择器

标记选择器：

指用HTML标签名作为选择器，为页面中某一类标记指定统一样式（缺点：不能设计差异化样式）

  1. 标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

类选择器：

使用英文符号“.”进行标识，后边紧跟类名，类名即为html元素中的class属性值，大多数html元素都可以定义class属性（最大优点：可以为元素对象定义单独的或相同的样式）

  1. .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

id选择器：

使用“#”进行标识，后边紧跟id名，id即为html元素中的id属性值，大多数html元素都可以定义id属性（id唯一：只能对应文档中的某一个具体元素）

  1. #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

通配符选择器：

使用*标识，它是选择器中范围最广的，能匹配页面中所有的元素（该样式能清楚所有HTML标记的默认边距）

  1. *{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
  2. *{
  3.         margin:0;    //定义外边距
  4.         padding:0;    //定义内边距
  5. }

理解：
1、其他选择器的设置会覆盖掉通配符选择器的设置
2、类选择器和id选择器的设置会覆盖标签选择器的设置
3、id选择器的设置会覆盖掉类选择器的设置
优先级：优先级越高，范围越小
通配符选择器 < 标签选择器 < 类选择器 <id选择器

3、CSS常用属性

margin 用于定义对象的外边距，也就是对象与对象之间的距离
padding 用于指定对象的内边距，也就是对象的内容于对象边框之间的距离
background 用于设置背景颜色，背景图片，背景图片的排列方式，是否固定背景图片和背景图片的
font-family 规定元素的字体系列
border 用于设置边框的宽度，边框的样式和边框的颜色
font 用于设置字体样式，小型的大写字体，字体粗细，文字的大小，行高和文字的类型
height 用于指定对象的高度
line-height 用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高
color 用于指定文本的颜色
text-align 用于指定文本的对齐方式
text-decoration 用于指定文本的显示样式，其属性值包括line-through（删除线）overline（上划线）underline（下划线）blink（闪烁效果，Firefox，Opera和none（无效果））
vertical-align 用于设置元素的垂直对齐方式
display 用于指定对象的显示形式

显示属性：

display：设置元素的显示类型
常见取值：
none：此元素不会被显示
block：此元素将显示为块级元素
inline：默认显示方式，此元素会被显示为内联元素，在一行显示

浮动属性：

float：元素浮动（none：默认值）
clear：清除浮动（both：清除两边）

盒子模型：

前端中，所有的原色都可以称为盒子，因为元素可以有大小，所以要考虑盒子在页面所占据的位置问题
元素占据的页面大小=元素的宽高 + 边框线大小 + 外边距 + 内边距
边框线：
border
border-width：设置框线宽高
border-style：设置边框线样式
border-color：设置边框线颜色
背景样式：
background
background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片位置
background-size：设置背景图片的大小
background-repeat：设置背景图片是否重复
background-attachment：设置背景图片相对浏览器的定位位置
外边距：
margin
margin-left：距离左侧的距离
margin-right：距离右侧的距离
margin-top：距离顶部的距离
margin-bottom：距离底部的距离
当两个相对的原色，一个使用了margin-bottom，另一个使用了margin-top，两者之间的间距取最大值
当父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）
解决办法：
1、不让其作为第一个子元素（不合适，添加了空元素有内容时会影响实际的距离）
2、给父元素添加一条边框（不合适，边框线的大小也会影响元素占据的位置大小）
3、使用内边距代替（推荐）
内边距：
padding
padding：20px 10px 15px 25px 分别代表 上 右 下 左
padding：20px 10px 15px 分别代表 上 左右 下
padding：20px 10px 分别代表 上下 左右
padding：20px 代表 上下左右
padding在使用时，会将父元素撑开，撑开后会改变元素在页面所占据的位置大小
当使用了内边距之后，宽高减去对应的值，剩下的区域大小仍然能包裹内容大小，就合适，否则不合适