CSS样式div

页面中，有很多样式标签：div标签，对标签定位的地方有：

　　1.<head>标签里加<style>标签，在<style>标签中添加样式。如：

　　<style>
        .c1{
            background-color: pink;
            height: 100px;
            width: 100px;
        }
    </style>

　　2.在<div>标签里直接加sytle属性，在属性中添加style样式。如：<div style=‘xxx’>

　　3.在head标签里添加<link>标签，如： <link rel='stylesheet' href='xxx.css'>

对div定位的方式分：

1.id选择器：用#标记，对id为il块进行定义样式，首先保证body中必须定义一个id='il'。注：一个html页面中，不可用存在相同的Id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #il{
            border: 1px red solid;
            height: 20px;
            width: 20px;
            background-image: url('http://ui.imdsx.cn/static/image/icon.png');
            background-repeat: no-repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div id="il"></div>    #必须在body中定义一个id为il


</body>
</html>

预览图如下：

2.class选择器。用点.来标记，在body中对class属性进行定义，然后再style样式里定义属性的样式。如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            border: 1px red solid;
            text-align: center;
            line-height: 100px
        }
</style>
</head>
<body style="margin: 0 auto">
    
    <div class="c1">1</div>   #必须在body中定义class的属性

</body>
</html>

显示样式如图：

3.标签选择器。在style里定义标签后，这个样式将会影响所有的样式，只是假如有其他Id或class属性同时定义时，标签选择器的优先级将低于id或class的定义方式<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{                             #这里定义标签选择器div，在body里的所有的div标签将会受到影响，但是当div标签里有定义id或class时，div定义的样式优先级低于id或class标签的样式
            height: 100px;
            width: 100px;
            border: 1px red solid;
            background-color: greenyellow;
        }
　　　　　.c1{

　　　　　　height: 50px;
　　　　　　width: 50px;
　　　　　　background-color: greenyellow;
　　　　　　border: 1px solid rebeccapurple;

　　　　　}

     </style>
</head>
<body style="margin: 0 auto">
    <div> </div>
    <div class="c1"></div>         #这里定义class="c1",因此在style里.c1的样式定义优先级要高于style中div的样式
    <div style="width: 100px;height: 48px;background-color: red;float: left"></div>

</body>
</html>

猜你喜欢