什么是CSS？有什么作用？
-
CSS(Cascading Ctyle Sheet )：层叠样式表语言。
-
CSS的作用：
- 修饰
HTML页面，设置HTML页面中某些元素的样式，让HTML页面更好看。CSS好比是HTML的化妆品一样。
-
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
CSS要掌握到什么程度？
- 常见的CSS样式要求会写。
- 能看懂别人写的CSS样式。
在HTML页面中嵌套使用CSS的三种方式
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式成为内联式定义方式。
- 语法格式
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中引入CSS样式的第一种方式</title>
</head>
<body>
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none 表示隐藏，block表示显示）
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: ipx;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>
第二种方式：在head标签中使用style块，这种方式被称为样式块。
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
...
}
选择器{
样式名:样式值;
样式名:样式值;
...
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中引入CSS样式的第二种方式</title>
<style type="text/css">
/*
这是CSS的注释
*/
/*
id选择器
语法格式：
#id{
样式名：样式值;
样式名：样式值;
...
}
*/
#usernameErrorMsg{
color: red;
font-size: 12px;
}
/*
标签选择器
语法格式：
标签名{
样式名：样式值;
样式名：样式值;
...
}
标签选择器作用的范围比id选择器广。
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
类选择器
语法格式：
.类名{
样式名：样式值;
样式名：样式值;
...
}
*/
.myclass{
border: 1px solid red;
width: 400px;
height: 30px;
}
</style>
</head>
<body>
<!--
设置样式字体大小为12px，颜色为红色！
-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div>
<br><br><br>
<!--class相同的标签可以认为同一类的标签-->
<input type="text" class="myclass"/>
<br><br><br>
<select class="myclass">
<option>大学</option>
<option>初中</option>
</select>
</body>
</html>
第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.class文件当中，在需要的网页上直接引入CSS文件，样式就引入了）
- 语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径" />
- 这种方式易维护，维护成本较低。
a{
text-decoration: none;
}
<!--
cursor: 鼠标样式
pointer: 是小手
hand : 也是小手,但是hand有浏览器兼容问题. 建议使用pointer
-->
#baiduSpan{
text-decoration: line-through;
cursor: pointer;
}
<!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://www.baidu.com">百度</a>
<br><br>
<span id="baiduSpan">点击我链接到百度哦!</span>
</body>
</html>
CSS-列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</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>
CSS