CSS的声明，内外联样式以及CSS的优先级
css学习.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<!-- 这是其中一种外联样式 -->
<style type="text/css">
/*CSS声明、CSS声明块、CSS选择器*/
/*body为CSS选择器 ，此处为元素选择*/
body{
/*{}中所有的内容为一个声明块*/
/*CSS声明（属性名称:值;）*/
background-color:#56ADDC;
}
</style>
<!-- 这是最常用的一种外联样式的使用 -->
<link rel="stylesheet" href="CSS学习.css">
</head>
<body>
<!-- 直接加入style内联样式 -->
<p style="background-color: #C82424;font-size: 25px;">这是一个段落内容发</p>
<p>这是外联样式的测试</p>
</body>
</html>
css学习.css
p{
background-color: #C82424;
font-size: 25px;
}
CSS选择器
选择器的优先级，内联选择器 > 外联选择器（ id选择器 > class选择器 > 元素选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
/*id选择器*/
#myid {
color:#FD0000;
}
/*class选择器*/
.myclass {
color:#000FFA;
}
/*元素选择器*/
span{
color:#FFB900;
}
/*属性选择器*/
[title] {
color:#00F7AA;
}
/*后代选择器，父代选择器之下的所有后代选择器 选择器之间加空格*/
#id1 span{
color: #FF0000;
}
/*子元素选择器,只作用于儿子*/
#id2 > span{
color: #A70000;
}
/*兄弟元素选择器，只作用于其兄弟且只作用于一个相邻兄弟 */
#myspan + span{
color: #FF0000;
}
/*伪类选择器，改变a元素点击过程中的各种变化*/
/*改变未访问是的内容*/
a:link{
color: #00C9FF;
text-decoration: none;
}
/*鼠标划入时的变化*/
a:hover{
color: #FF0000;
}
/*点击后的变化*/
a:active{
color: #58FF00;
}
/*点击后的效果*/
a:visited{
color: #E8FF00;
}
/*伪元素*/
/*::before会在当前元素创建一个子元素（第一个位置）作为伪元素*/
/*::after会在当前元素创建一个子元素（最后一个一个位置）作为伪元素*/
/*content显示的内容*/
q::before{
content: "<<";
color:#00FFC4;
}
q::after{
content: ">>";
color:#00FFDE;
}
</style>
</head>
<body>
<p id="myid">这是一段文本内容</p>
<p class="myclass">这是一段文本内容</p>
<span>这是一段文本内容</span>
<p title="this is p.">这是一段文本内容</p>
<div id="id1">
<span>span1.
<span>span2.</span>
</span>
</div>
<div id="id2">
<span>span1.
<span>span2.</span>
</span>
</div>
<span id="myspan">span1.</span>
<span>span2.</span>
<span>span3.</span>
<br>
<a href="http://www.imooc.com">伪类选择器，改变a便签的前后状态</a>
<br>
<q>一些引用</q>,他说,<q>比没有好。</q>
</body>
</html>