什么是CSS，有什么作用？
- CSS(Cascading Style Sheet)：层叠样式表语言。
- CSS的作用是：
- 修饰HTML页面，修饰HTML页面张的某些元素的样式，让HTML页面更好看。
- CSS好比是HTML的化妆品一样。
- HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML。所以新建的文件还是xxx.html文件。
CSS我们要求掌握到什么程序？
- 常见的CSS样式要求会写。
- 别人写的CSS样式要能看懂。
在HTML页面中嵌套使用CSS的三种方式
- 第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
<标签> style="样式名:样式值;样式名:样式值;样式名:样式值;..."</标签>
- 第二种方式：在head标签中使用style块，这种方式称为样式块方式。
<head>
<style type="text/css">
选择器{
样式名 : 样式值;
样式名 : 样式值;
......
}
选择器{
样式名 : 样式值;
样式名 : 样式值;
......
}
</style>
</head>
- 第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
- 这种方式容易维护，维护成本较低。
- xxx.css文件
- 1.html中引入了
- 2.html中引入了
- 3.html中引入了
- 4.html中引入了
- 语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径"/>
HTML中引入CSS样式的第一种方式
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red; border-width : 1px; border-style : solid"></div>
<br><br>
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border : 1px solid black"></div>
</body>
</html>
HTML中引入CSS样式的第二种方式
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第二种方式：样式块</title>
<style type="text/css">
#usernameErrorMsg {
color : red;
font-size : 12px;
}
div {
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
}
.myclass{
border : 1px solid red;
width : 400px;
height : 30px;
}
</style>
</head>
<body>
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div>
<br>
<input type="text" class="myclass"/>
<br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
HTML中引入CSS样式的第三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中引入CSS样式的第三种方式： 引入外部独立的CSS文件</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<span id="baiduSpan">点击我链接到百度哦!</span>
</body>
</html>
1.css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: pointer;
}
列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中引入CSS样式的第三种方式： 引入外部独立的CSS文件</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<span id="baiduSpan">点击我链接到百度哦!</span>
</body>
</html>
CSS样式的绝对定位
<!DOCTYPE html>
<html lang="en">
<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>