CSS实践07：字体和添加页脚

1、美食页效果

定义页面字体，定义标题样式，修改导航栏内容和样式（字体变大，鼠标放上去有背景颜色），添加页面尾部，效果如下：

2、CSS设置

为body定义字体样式，改变页面的字体颜色，纯黑色比较突兀，一般用深灰色

body{
	background: #333333 url(images/bg-body.jpg) top left repeat;
	/* 简写:font-style/font-weight */
	/* font: normal normal 14px/24px  微软雅黑, 黑体, Verdana, Arial, sans-serif; */
	font: 14px/24px  微软雅黑, 黑体, Verdana, Arial, sans-serif;
	color:#333333;
}

p,a,li标签等都使用了该样式，因为CSS中有些属性是有继承特性的，子标签没有定义的，会继承父标签的样式，如果父标签没有定义，则会继承父标签的父标签的字体样式。但h2，h3没有使用定义的字号，使用的是浏览器的默认样式1.5em。可以使用开发者工具查看哪些样式会被继承。越往后定义的，优先级越高。

初始化页面的字体样式

html,body,h1,h2,h3,p,ol,ul,li,a{
	 padding: 0; /* 0可以省略px */
	 border: 0;
	 margin: 0;
	 font-size: 100%; /* 和父标签一样 */
	 font-weight: normal;
}

等价写法如下：

html,body,h1,h2,h3,p,ol,ul,li,a{
	 padding: 0; /* 0可以省略px */
	 border: 0;
	 margin: 0;
	/* font-size: 100%; */  /* 和父标签一样*/
	/* font-weight: normal; */
	 /* 等价上面二行代码: */
	 font:inherit;
}

定义标题样式

h2{
	margin: 10px 0 20px 0;
	color:#79B1A3;
	text-align: center;
	font-size: 30px;
	line-height: 50px;
	font-weight: bold;
}

h3{
	margin: 15px 0;
	border-bottom: 1px solid #cccccc; /* 三部分相等,不是00和ff都是灰色,越接近0越深 */
	padding-bottom: 3px;
	color:#79B1A3;
	font-size: 20px;
	line-height: 36px;
	font-weight: bold;
}

添加页脚

设置页脚样式

.footer{
	padding: 10px 0 30px 0;
}
.footer p{
	color:#aaaaaa;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	font-style: italic;  /* 不包含字体名称,不能使用简写 */
	text-transform: uppercase;
}

修改导航栏样式（变大，鼠标放上去有背景色）

.nav a{
	color: #ffffff;/* #00B2C5; */
	text-decoration: none;
	display: inline-block;
	height: 56px;
	line-height: 56px;
	font-weight: bold;
	font-size: 19px;
	width: 56px;
}
.nav a:hover{
	background-color: #a0000f;
}

修改导航栏内容，菜单改成“美食列表、发布美食”，效果不太好。
不要定义宽度，让其自由伸缩，定义padding，内容会自由伸缩，并还有一定的补白。

.nav a{
	……
	/* width: 56px; */
	padding: 0 26px;
}