前端之css学习

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

 h1{
        color:red;
        font-size:40px;}

CSS四种引用方式

1、行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="background-color: red">AAAA</p>

2、嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    h1{
        color:red;
        font-size:40px;}
    </style>
</head>

3、链接式将一个.css文件引入到HTML文件中。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4、导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style>

CSS选择器

基本选择器

标签选择器 p：1；
class选择器 .class：10；
id选择器 #id ：100；
内嵌最高 style=" " 1000

相同优先级按顺序，下面的优先。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*

        标签选择器：1；
        class选择器：10；
        id选择器：100；
        内嵌：1000

        */

      p{
          color: red;
      }
       #id1{
           color: green;
       }
      .p1{
            color: yellow;
        }


        #d2{
            color: red;
        }
        .outer .div2{
            color: blue;
        }

       .outer .div2 p{
           color: darkgreen;
       }
       .div2 .p1{
           color: yellow;
       }

        .new{
            color: darkolivegreen;
        }

        body{
            color: gold;
        }


        /*相同优先级按顺序*/

       .div2 .p1{
            color: green;
        }

       .outer .p1{
           color: red;
       }

       .new p{
           color: green!important;
       }
    </style>
</head>
<body>

    <p class="p1" id="id1">I am P</p>


    <div class="outer">
        <div class="div1" id="d1">DIV1</div>

        <div class="div2" id="d2">
            <p class="p1" id="p1">PPP</p>
        </div>
    </div>

    <div class="new">
        newDIV
        <p style="color: aqua">new P</p>
    </div>




</body>
</html>

选择器优先级