目录
1.CSS
CSS（Cascade Style Sheet，层叠样式表）
html负责的是一个页面的结构，css主要负责了页面的数据样式。
注释格式：/*注释内容*/
1.1 CSS的引入方式
行内样式：直接在html标签中使用style属性编写。（只能用于本标签中，复用性较差）
例：
<a style="color:#0F0; text-decoration:none" href="#">小华的笔记1</a>
内部样式：在style标签中编写css代码。（只能用于本页面中，复用性不强。）
例：
<style type="text\css">
a{
color:#F00;
text-decoration:none;
}
</style> 外部样式：可以引入外部的css文件。（推荐使用）
方式1： 使用link标签。（推荐使用） 例：
<link href="1.css" rel="stylesheet" type=”text/css” />方式2：使用<style>引入 例：
<style type="text/css" >
@import url("1.css");
</style>link和@import引入外部样式的区别：
①link属于HTML标签，而@import是CSS提供的一种方式
②@import只能引入31次css文件。
③当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
④由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，link标签无此问题
⑤当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
注：如果三种样式都存在，则行内样式 > 内部样式 > 外部样式，即符合就近原则。
1.2 CSS选择器
CSS选择器：找到对应的数据进行样式化。
格式：选择器{ 属性：属性值; }
常见选择器
①标签选择器：找到所有指定的标签进行样式化。
格式：
标签名{
样式1；
样式2....
}
例:
div{
color:#F00;
font-size:24px;
}②类选择器: 使用类选择器首先要给html标签指定对应的class属性值。
格式：
.class的属性值{
样式1；
样式2....
}
例：
.a{
color:#F00;
font-size:24px;
}注：1. html元素的class属性值不能以数字开头.
2.类选择器的样式优先于标签选择器的样式。
③ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值。
格式：
#id的属性值{
样式1；
样式2....
}
例：
#a{
color:#F00;
font-size:24px;
}注：1.ID的属性值不能以数字开头。
2.ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
3.ID的属性值在一个html页面中只能出现一次。（ID唯一）
④交集选择器：对选择器1中的选择器2里面的数据进行样式化。
格式：
选择器1 选择器2{
样式1；
样式2....
}
例：
.a span{
color:#F00;
font-size:24px;
}⑤并集选择器：对指定的选择器进行统一的样式化。
格式： 例：
选择器1,选择器2{
样式1；
样式2....
}
例：
span，a{
color:#F00;
font-size:24px;
}⑥通用选择器:
格式：
*{
样式1
样式2....
}
例：
*{
color:#F00;
font-size:24px;
}⑦伪类选择器：对元素处于某种状态下进行样式化。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */注：1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后
1.3 CSS的盒子模型
用于操作内边距(padding)与外边距（margin）
例：
<style type="text/css">
div{
border-style:solid;
width:100px;
height:100px;
padding: 10px 0.8em 10px 2%;/*内边距*/
margin: 2px 30px 30px 20px;/*外边距*/
}
</style>
1.4 CSS的属性
以定位为例：
①相对定位：相对于元素原本的位置进行移动。
②绝对定位：相对于整个页面进行移动。
③固定定位：相对于整个浏览器进行移动。 例：
/*The study road of xiao hua */
<style type="text/css">
div{
border-style:solid;
width:100px;
height:100px;
}
.one{
background-color: #FF0004;
position: relative;/*相对定位*/
top:10px;
left:10px;
}
.two{
background-color: #05FC21;
position: absolute;/*绝对定位*/
top:100px;
left:100px;
}
#ad{
background-color:#0D0C0C;
position:fixed;/*固定定位*/
top:600px;
left:10px;
}
</style>
<body>
<div class="one">one</div>
<div class="two">tuo</div>
<div id="ad">this is a ad</div>
</body>