<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*type="text/css"可以不写*/
*{margin: 0;
padding: 0;}
/* *是通配符，以上用于样式初始化，不同网站有不同规则定义初始化*/
/*类*/
.p{
font-size: 24px;
color: blue;
}
.div1{
width: 100px;
height: 100px;
background-color: black;
}
.test{
font-size: 20px;
color: red;
}
/*元素*/
div{
width: 200px;
height: 200px;
background-color: blueviolet;
}
p{
font-size: 26px;
color: red;
}
/*id*/
#p{
font-size: 26px;
color: red;
}
/*伪类*/
a：link{color: red;} /*未访问的效果，即打开浏览器看到值的效果*/
a:hover{color: blue;} /*鼠标放在值上的效果*/
a：action{color: yellow;} /*鼠标点击上值未松开的效果*/
a:visited{color: green;} /*鼠标点击上值松开后的效果*/
</style>
</head>
<body>
<!--css三种引入方式:优先级 内联>嵌入式>外部引入-->
<!--内联样式:直接在行元素或块元素后面添加样式-->
<p style="color: #00AFFF">css</p>
<div style="width: 100px;height: 100px">css</div>
<!--嵌入式样式：在head中写入style-->
<p class="p">css</p>
<div class="div1"></div>
<!--外部引入样式：通过新建.css的文件来引入-->
<!--在head中 加入<link rel="stylesheet" type="text/css" href=" like html的连接"/>
rel="stylesheet" 表示引入css
-->
<!--css选择器：元素，类，ID，伪类：优先级：id>类〉元素-->
<!--元素选择器:样式名和标签名一致-->
<div></div>
<p>css</p>
<p>css</p>
<!--类选择器：. class-->
<p class="test">css</p>
<div class="test">css</div>
<!--可以多次引用-->
<!--id选择器：# id-->
<div id="p">css</div>
<!--显示元素div及id的样式-->
<!--id是唯一值，只能引用一次-->
<!--伪类选择器: ：hover :visted-->
<a href="#">百度</a>
<!--也可以对块级元素使用伪类： 样式中：div：hover等等-->
