1. 什么是CSS，有什么作用？ 01
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
2、CSS我们要求掌握到什么程度？ 01
* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。
3、在HTML页面中嵌套使用CSS的三种方式：02
3.1 第一种方式： 02
在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;...">
代码在 001 html中引入css样式的第一种方式 04
<!--在html中引入css样式的第一种方式 04-->
<!doctype html>
<html>
<head>
<title>在html中引入css样式的第一种方式:内联定义方式</title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
border-color 边框颜色
border-width: 边框宽度
border_style 边框风格 solid是实线
-->
<div style="width : 300px; height: 300px; background-color: #CCFFFF; display: block;
border-color: red;border-width: 1px;border-style: solid;"></div>
<br><br>
<!--
样式还能这样写：
border : 1px solid black;
-->
<div style="width : 300px; height: 300px; background-color: #CCFFFF; display: block;
border: 1px solid black"></div>
</body>
</html>
3.2 第二种方式： 02
在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>
}
代码在 002 html中引入css样式的第二种方式 05-06
<!-- html中引入css样式的第二种方式 05-06-->
<!doctype html>
<html>
<head>
<title>html中引入css样式的第二种方式：样式块</title>
<!--方式二：样式块-->
<style type="text/css">
/*
这是CSS的注释。
*/
/*
id选择器 05
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
*/
#usernameErrorMsg{
color:red;
font-size:12px;
}
/*
标签选择器 06
语法格式：
标签名 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
标签选择器作用的范围是网页中所有的此标签 比id选择器广。
*/
div{
background-color : red;
border: 1px solid black;
width:100px;
height:100px;
}
/*
类选择器 06
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
同标签的都可以被修饰
*/
.student{
border: 1px solid red;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<!--
设置样式字体大小12px，颜色为红色！
-->
<!--id选择器示例-->
<span id="usernameErrorMsg">对不起，用户名不能为空</span>
<!--标签选择器示例-->
<div></div>
<div></div>
<div></div>
<!--类选择器示例-->
<br><br>
<input type="text" class="student"/>
<br><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
3.3 第三种方式： 03
链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径" />
这种方式易维护，维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
代码在 003 在html中使用css样式的第三种方式 07
<!-- 在html中使用css样式的第三种方式 07-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在html中使用css样式的第三种方式：引入外部独立的css文件</title>
<!-- 这里引入css文件 -->
<link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
<a href="http://baidu.com">百度</a>
<br><br>
<span id="myspan"> 这里是span </span>
</body>
</html>
css文件 1.css 07
/* 这是一个标签选择器 07 */
a {
text-decoration: none;
}
/*这是一个id选择器*/
/*
cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#myspan{
text-decoration: underline;
cursor: pointer; /*鼠标放在数据上编程小手*/
}4. 列表样式 08
就是改变列表的符号样式
代码在 004列表样式
<!-- 列表样式 08 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
/* 标签选择器 */
ul{
/* list-style-type:none;/*去掉列表的符号 */
list-style-type:circle;/*改列表为圆圈
/* list-style-type: square; /*改列表为方块 */
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
5. 绝对定位 09
代码在 005css样式的绝对定位
<!-- css样式的绝对定位 09 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式的绝对定位</title>
<style type="text/css">
#div1{
background-color:red;
border: 1px black solid;
width: 300px;
height: 300px;
position:absolute;/*绝对定位 我们的案例定位是左上角的坐标点*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1" ></div>
</body>
</html>
