本文所编写的CSS是嵌入在HTML中的样式块，在html文件中编写CSS代码需要在
<style></style>中编写。
选择器的优先级：
id选择器 > 类选择器 > 标签选择器
id选择器：
#id名，id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
类选择器：.
类名，类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
标签选择器：
标签名{样式1；样式2；........}，会将当前网页内的所有该标签增加相同的样式。
外补丁：
margin：检索或设置对象四边的外延边距
margin-top：检索或设置对象顶边的外延边距
margin-right：检索或设置对象右边的外延边距
margin-bottom：检索或设置对象下边的外延边距
margin-left：检索或设置对象左边的外延边距
内补丁：
padding：检索或设置对象四边的内部边距
padding-top：检索或设置对象顶边的内部边距
padding-right：检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left：检索或设置对象左边的内部边距
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的常见样式</title><style>/*将百度两个字下面的下划线去掉none表示没有下划线underline有下划线*/ .baidu{ text-decoration:none; }/* :hover这个专门用来设置鼠标悬停效果的 当鼠标悬停的时候，执行样式，当鼠标离开的时候样式取消 */ #xiao:hover{ color:red; cursor:pointer; } .mydiv{ width:100px; height:100px; background-color:#555; border:1px red solid; /*外补丁，在元素外面打补丁，效果和移动元素位置差不多*/ margin-top:100px; margin-left:100px; /*内补丁，在元素内部打补丁，效果跟增加长度宽度一样 */ padding-right:100px; } /*float样式是用来设置当前元素在父元素当中的浮动效果*/ #outdiv{ width:300px; height:300px; background-color:red; float:right; } #innerdiv{ width:100px; height:100px; background-color:blue; /*设置当前节点元素的浮动效果，只是浮动于当前元素的父元素内部*/ float:left; } #mydiv2{ width:100px; height:100px; background-color:red; /*绝对定位 例：设置在浏览器最右上角*/ position:absolute; top:0px; right:0px; }</style></head><body><!--内补丁，外补丁--><div class="mydiv"></div><div id="div1"></div><!--文本装饰--><a class="baidu" href="http://www.baidu.com">百度</a><br><br><!--浮动效果float样式--><!--外部div--><div id="outdiv"> <!--内部div--> <div id="innerdiv"> </div></div><br><br><!--设置鼠标悬停效果鼠标移动到以下文本上，希望字体颜色变成红色，鼠标变成小手--><span id="xiao">红色小手</span><div id="mydiv2"></div></body></html>