1、CSS概述
CSS指层叠样式表（Cascading Style Sheets）
2、CSS的引入方式
a.行内样式：<h1 style="color: red;font-size: 50px;">CSS美妆</h1>
b.页面内样式：在HTML文件<head>标签中定义<style>样式
<style>
h1{
color: blue;
font-size: 30px;
}
</style>
c.外部样式：<link href="CSS文件的路径" rel="stylesheet" type="text/css"/>
3、CSS的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!-- CSS选择器 -->
<style>
/*元素选择器 标签名*/
p{
border:1px solid red;
width: 40px;
height: 40px;
}
/*id选择器 属性id的值*/
#d2{
border: 2px solid blue;
}
/*类选择器 属性class的值*/
.pClass{
border: 3px solid yellow;
}
/*后代选择器 */
ul h4{
color: pink;
}
</style>
</head>
<body>
<!--
CSS选择器：
01 元素选择器：以标签的名称为选择
02 id选择器：以标签中的id属性名称为选择
03 类选择器：以标签中的class属性名称为选择
04 后代选择器：以标签中的子标签名称为选择
-->
<p>p1</p>
<p id="d2">p2</p>
<p class="pClass">p3</p>
<p class="pClass">p4</p>
<p class="pClass">p5</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<h4>四级标题</h4>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
4、CSS的其它选择器
<html>
<head>
<meta charset="UTF-8">
<title>CSS其他选择器</title>
<style>
/*分组选择器*/
#f1,#p1{
font-size: 25px;
color: red;
}
/*属性选择器*/
input[type=text]{
background-color: red;
}
/*子元素选择器 找ul中第一层级的h6元素*/
ul>h6{
color: red;
}
</style>
</head>
<body>
<!-- 分组进行控制 -->
<font id="f1">我是字体</font>
<p id="p1">
图片查看：
<img src="../img/header.png" />
</p>
<!-- 属性选择器 -->
<form>
用户：<input type="text" name="username"/> <br />
密码：<input type="password" name="password" />
</form>
<!-- 子元素选择器 -->
<ul>
<li>列表1</li>
<li>列表2</li>
<p>
<h6>六级标题</h6>
</p>
<h6>六级标题</h6>
<li>列表3</li>
</ul>
</body>
</html>
5、图片的浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动效果</title>
<style>
.pClass{
border: 1px solid red;
width: 200px;
height: 200px;
}
#d1{
float: left;
}
#d2{
float: left;
}
#d3{
float: left;
}
#d4{
float: left;
}
#d5{
float: left;
}
#clear{
clear: both;
}
</style>
</head>
<body>
<!--
CSS浮动：
float属性
left 向左
right 向右
none 不浮动(默认)
CSS清除浮动
clear属性
left 清除左边
right 清除右边
both 清除两边浮动
none 不清除(默认)
-->
<p id="d1" class="pClass">p1</p>
<p id="d2" class="pClass">p2</p>
<p id="d3" class="pClass">p3</p>
<p id="clear"></p>
<p id="d4" class="pClass">p4</p>
<p id="clear"></p>
<p id="d5" class="pClass">p5</p>
</body>
</html>
6、CSS中的盒子模型
A. 内边距：padding.
B. 边框：border
C. 外边距：margin
7、CSS中的定位
position属性设置定位：
* relative:相对定位 相对于此元素外面一层级的元素(盒子)定位
* absolute:绝对定位 相对于浏览器左上角定位
使用另外两个属性:left(离左边的距离),top(离上边的距离)
8、伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括： 活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
