常见的CSS样式

本文所编写的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>

秒客网

常见的CSS样式

相关文章