文件结构
网站中会包含多个.html文件和.CSS文件以及图片等多媒体文件，我们需要使用不同的文件夹分类进行管理
文件夹最基本的结构包括：
head内部配置
title标题
<title>前端学习路线</title>
标签页icon图标
大部分网站在标签页标题位置会添加网站的icon图标。
图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储。
使用方法，通过link标签进行引用，如下:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分级引入
CSS文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供多个HTML同时引用。公共的部分也可以划分范围，有的是所有网站能用的，有的是某几个网站的公共部分。
CSS常见的分层组织：清除默认样式的CSS，网站的公共样式CSS，每个页面自己独有的CSS。
注意：书写顺序。引入多层CSS时，需要按照后面的层叠前面CSS进行设置，使用页面独有的样式层叠公共的样式。
清除默认样式
使用范围：所有网站都能用
制作方法：自己工作中进行积累，或者使用网络上已有的资源
命名习惯：reset.css
注意：引入时必须作为第一层引入，这样网页中独有的样式就可以层叠掉reset中的样式
reset.css文件写完后不允许再次更改。
引用方式如下：
<link rel="stylesheet" type="text/css" href="css/reset.css">
内容可以参考Yahoo! (YUI 3) Reset CSS。内容如下：
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* https://cssreset.com/
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
color: #000;
background: #FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size: 100%;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }
公共样式
使用范围：单独的一个网站所有的页面或多个页面
制作方法：从设计图中观察，找到所有页面或多个页面公共的部分，划分不通的模块分别进行.css文件书写
命名习惯：common.css或者模块名.css
引入顺序：一般在reset.css后面，单独样式文件前面。
注意：多个网站页面的公共部分书写完之后不允许后期更改，一旦更改，多个引用的HTML页面都会发生变化。需要注意类名的使用，公共文件中的类名一般不要在其他的css文件中再用。
<link rel="stylesheet" type="text/css" href="css/common.css">
页面独有样式
使用范围：单独的一个HTML页面
制作方法：找到页面独有的而其他页面没有的样式，单独书写在一个.css文件中，只有对应的HTML文件能够引用。
命名习惯：一般文件名与HTML文件名保持一致，例如index.css，如果拆分的更细致可以使用多个单词拼写，例如index_banner.css等
引入顺序：在所有公共样式后面
注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重
<link rel="stylesheet" type="text/css" href="css/index.css">
整个css分层引入顺序
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
