css详解1

1、css的三种引入方式：

1.1、行内引入

<div style="color:red;">魔降风云变</div>

<html>
<head>
    <Meta charset="UTF-8"></head>
<body>
    <div style="color:red;">魔降风云变</div>
</body>
</html>

用的是行内的

<html>
<head>
    <Meta charset="UTF-8"></head>
    <style>
        #Box{
            color:gold;
        }
    </style>
<body>
    <div id="Box" style="color:red;">魔降风云变</div>
</body>
</html>

没有找到它的样式

1.2内嵌式：

head中写    
<style>
        #Box{
            background-color: gold;
        }
    </style>

<head>
    <Meta charset="UTF-8"></head>
    <style>
        #Box{
           background-color: gold;
        }
    </style>
<body>
    <div id="Box" style="color:red;">魔降风云变</div>
</body>

换了就有了，不能覆盖，优先级没它高

1.3外接式：

外接式是定义在head标签中，并且不在style中。

<link href="css/index.css" rel="stylesheet" >

index.css文件

#Box{
    background-color: black;
}

<html>
<head>
    <Meta charset="UTF-8"></head>
    <style>
        #Box{
            background-color: gold;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
<body>
    <div id="Box" style="color:red;">魔降风云变</div>
</body>
</html>

1.4、三种样式的优先级

行内样式>内嵌式和外接式
内嵌式和外接要看谁在后面，在后面的优先级高，会覆盖前面的。

2、基础选择器

2.1、id选择器

唯一的

#xxx

id选择器就是在标签里面加个id,可以和class同名 #id名字{css}

<html>
<head>
    <Meta charset="UTF-8"></head>
    <style>
        .Box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
    #Box{ color:blue; } </style>

<body>
    <div class="Box active" id="Box">小马过河</div>
    <hr>
    <div class="Box"></div>
    <hr>
    <div class="Box"></div>
</body>
</html>

2.2、类选择器

可以重复，归类，类也可以设置多个

.xxx

<html>
<head>
    <Meta charset="UTF-8"></head>
    <style>
        .Box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 200px;
        }
    </style>

<body>
    <div class="Box active"></div>
    <div class="Box"></div>
    <hr>
    <div class="Box"></div>
</body>
</html>

border-radius边框圆角，似乎当边框圆角和正方形div的宽高一致的时候就会成圆形

        .active{
            border-radius: 40px; #将200改为40
        }

2.3标签选择器

标签{css}

<html>
<head>
    <Meta charset="UTF-8"></head>
    <style>
        .Box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
        #Box{
            color:blue;
        }
 div{ border: 1px solid #000;
        }
    </style>

<body>
    <div class="Box active" id="Box">小马过河</div>
    <hr>
    <div class="Box"></div>
    <hr>
    <div class="Box"></div>
</body>
</html>

1、css的三种引入方式：

1.1、行内引入

1.2内嵌式：

1.3外接式：

1.4、三种样式的优先级

相关推荐