~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
* a:所有狀態下都有的樣式
*/
a
{
color:black;
text-decoration:none ;
}
/**
* 超鏈接的偽類需要有順序： link, visited, hover, active
*/
a:link
{
font-size: 18px;
}
a:visited
{
background: transparent;
}
/**
* hover:懸停，光標移動到身上
*/
a:hover
{
background: dodgerblue;
font-size: 16px;
}
/**
* active:光標點下未抬起
*/
a:active
{
background-color: yellow;
font-size: 16px;
}
#div1
{
width:100px;
height:100px;
border:1px solid blue;
}
#div1:hover
{
background-color: blue;
}
#div1:active
{
background-color: yellow;
}
/**
* css2規范：偽類和偽對象：
* css3規范：偽類： 偽對象::
*
* html4-> html5
* css2 -> css3
* 原則：高版本兼容低版本，向下兼容
*/
#p1::first-letter
{
color:red;
}
#p1::first-line
{
background-color: pink;
}
</style>
</head>
<body>
<a class="blink" href="http://www.baidu.com">百度</a>
<div id="div1"></div>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam molestias amet nostrum repellendus culpa facere voluptate ab nisi nemo vel ipsum aliquam accusamus commodi. Saepe repudiandae sapiente iste magnam. Provident?</p>
</body>
</html>
~~~
