今天我们的教学内容是：
掌握文字与排版样式属性设置
掌握颜色与背景样式属性设置
掌握列表样式属性设置
理解CSS盒模型概念
掌握边界、边框、填充样式属性设置
下面让我们来开始学习第一个内容;
文字样式属性
在上节课中我们了解到了css的基本语法与使用，下面我们来看看文字样式的设置在css中如何设置CSS样式属性由多个单词构成时，单词之间是使用“-”字符来进行连接的，比如：
font-size 设置字体大小
font-family 设置字体
font-style 设置字体样式
font-weight 设置字体加粗
font-variant 设置字体变体
font 设置字体的综合属性
在设置字体大小的时候是根据自己的需求来进行设置的，而字体的单位也分为很多种
绝对大小：in、cm、mm、pt、pc为单位
相对大小：em(元素字体高度)、ex(字母x的高度)、px、%表示相对大小
排版样式属性
样式的排版也是用css来进行控制的，使用方法也和文字样式属性的设置一样
一些控制样式的属性
text-indent 首行缩进属性
letter-spacing 字符间距属性
line-height 行距属性
text-transform 转换英文大小写
text-align 水平对齐属性
vertical-align 垂直对齐属性
text-decoration 设置文字效果属性
关于上面所提到的这些控制样式的属性只是冰山一角，我们也没有时间去对那么多的标签进行记忆，多只是对经常用的熟悉，然而具体的我们还要去查看html的开发手册，在上面有对html的所有标签进行介绍，
颜色与背景
CSS定义颜色的方法：
十六进制数;
RGB函数(整数);
RGB函数(百分比);
颜色名称
背景
background-color：设置背景颜色
background-image : 设置背景图像
background-attachment : 设置背景图像是否固定或者随着页面的其余部分滚动
background-repeat : 只有垂直方向重复background-image
background-position：属性设置背景图像的起始位置
列表样式
列表样式主要是对列表的样式进行设置
list-style-type:属性设置列表项标记的类型。对<ol><ul>列表均有效
list-style-image : 属性设置一个元素的背景图像
list-style-position : 属性指示如何相对于对象的内容绘制列表项标记
Css盒子模型
什么是CSS盒模型?
W3C组织建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域MBPC：边界(margin) 、边框(border) 、填充(padding)和内容(content) 。
盒子模型层次的3D示意图
CSS盒模型设置
CSS盒模型涉及到边界[margin]、边框[border]、填充[padding]三个关键概念
边界[margin]
Margin：顶(margin-top)、右(margin-right)、底(margin-bottom)、左(margin-left)--四个边距按顺时针方向排列
基本语法：
margin-top：长度单位 | 百分比单位 | auto
margin:20px 40px 60px 80px;/* 上|右|下|左*/
margin:20px 40px 60px;/* 上|右左|下*/
margin:20px 40px; /* 上下|左右*/
margin:20px; /* 上右下左均相同*/
边框[border]
border-width: thin、medium、thick 、length ;复合属性，分top、right、bottom、left四个子属性;
border-style :none|dotted|dashed| solid|double|groove[凹型线]|ridge [凸型线] |inset [嵌入线] |outset [嵌出线];
border-color: 颜色关键字 | RGB值 ;
Border:边框粗细 边框样式 边框颜色;
填充[padding]
元素内边界主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。
基本语法：
padding:长度 | 百分比
padding-top、padding-right、padding-bottom:同上
padding:20px 30px 40px 60px;/**/
padding:20px 30px 40px; /* 上|右|下|左*/
padding:20px 30px; /* 上|左右|下*/
padding:20px; /* 上右下左均相同*/
热点新闻
前端开发技术库
