css基础

1.CSS的属性设置
   背景属性设置

   文本属性

   字体设置：font-family:指定一个元素的字体样式【黑体  宋体....】
                            font-size:用于设置字体大小
                            font-style:指定文本的字体倾斜
                            italic--设置倾斜【正常字体】
                            oblique---设置倾斜【非正常字体】
                            normal---什么都有

超链接a样式使用的是伪类
                            a:link{} - 正常，未访问过的链接
                            a:hover{} - 当用户鼠标放在链接上时
                            a:active{} - 链接被点击的那一刻
                            a:visited{} - 用户已访问过的链接

列表属性设置
                            list-style-type:设置列表项标记的类型。
                            none【无】 disc【实心圆】 circle【空心圆】 square【实心方块】
                            decimal【数字】 lower-roman【小写罗马数字】upper-roman【大写罗马数字】
                            lower-alpha【小写英文字母】 upper-alpha【大写英文字母】
                            list-style-image：使用图像来替换列表项的标记
                            list-style-image：url('');
                            list-style-position:指示如何相对于对象的内容绘制列表项标记    
                            inside---包含列表标记
                            outside---不包含列表标记

列表属性设置
                            list-style-type:设置列表项标记的类型。
                            none【无】 disc【实心圆】 circle【空心圆】 square【实心方块】
                            decimal【数字】 lower-roman【小写罗马数字】upper-roman【大写罗马数字】
                            lower-alpha【小写英文字母】 upper-alpha【大写英文字母】
                            list-style-image：使用图像来替换列表项的标记
                            list-style-image：url('');
                            list-style-position:指示如何相对于对象的内容绘制列表项标记    
                            inside---包含列表标记
                           outside---不包含列表标记

边框属性设置
                       CSS边框属性允许指定一个元素边框的粗细，样式【实线，虚线，双实线】，颜色
                       1.border：粗细，样式【实线，虚线，双实线】，颜色【元素的4边相同样式】
                       2.border-width:边框粗细 / border-style:样式 / border-color:颜色
                       3.border-top-width:边框粗细 / border-top-style:样式 / border-top-color:颜色
                          border-right-width:边框粗细 / border-right-style:样式 / border-right-color:颜色
                          border-bottom-width:边框粗细 / border-bottom-style:样式 / border-bottom-color:                              颜色
                          border-left-width:边框粗细 / border-left-style:样式 / border-left-color:颜色
                       4.border-top:粗细，样式【实线，虚线，双实线】，颜色
                          border-right:粗细，样式【实线，虚线，双实线】，颜色
                          border-bottom:粗细，样式【实线，虚线，双实线】，颜色
                          border-left：粗细，样式【实线，虚线，双实线】，颜色

CSS盒子模型
                          所有HTML元素可以看作盒子
                          外边距---元素与元素之间的距离
                          边框粗细---边框的薄厚
                          内边距-----边框与内容之间的距离
                          盒子的内容--当前元素的内容
                          计算一个元素的宽高：
                          元素的宽度=内容宽度+左内边距+右内边框+左边距+右边框+左外边距+右外边距
                          元素的高度=内容高度+上内边距+下内边框+上边距+下边框+上外边距+下外边距

外边距---当前元素与其他元素之间的距离
                         margin属性来设置外边距
                        1.单独改变元素的上，下，左，右外边距：
                         margin-top  margin-right  margin-bottom margin-left
                         2.一次改变上，下，左，右外边距
                         margin：数字1;[上，下，左，右外边距相等]
                         margin：数字1 数字2;
                         [数字1--上，下外边距相等]
                         [数字2--左，右外边距相等]
                         margin：数字1 数字2 数字3;
                         [数字1--上外边距]
                         [数字2--左，右外边距相等]
                         [数字3--下外边距]
                         margin：数字1 数字2 数字3 数字4;
                         设置外边距的数字可以是负整数。【消除元素与body之间的默认缝隙】

内边距【填充】---设置的是元素内容与元素边框之间的距离
                         padding属性来设置内边距【填充】
                       1.单独改变元素的上，下，左，右内边距【填充】：
                         padding-top  padding-right  padding-bottom  padding-left
                       2.一次改变上，下，左，右内边距【填充】
                         padding：数字1;[上，下，左，右内边距【填充】]
                         padding：数字1 数字2;
                         [数字1--上，下内边距【填充】相等]
                         [数字2--左，右内边距【填充】相等]
                         padding：数字1 数字2 数字3;
                         [数字1--上内边距【填充】]
                         [数字2--左，右内边距【填充】相等]
                         [数字3--下内边距【填充】]
                         padding：数字1 数字2 数字3 数字4
                         设置父元素的padding会撑开当前的父元素

尺寸设置
                         width属性设置元素的宽度。
                         height属性设置元素的高度。
                         line-height 属性设置行高。

 Display(显示) 与 Visibility（可见性）