css样式、选择器

1.样式：
1.1内联式（行内）
<div style="color:red";></div>

1.2内嵌式（写在<head>内）
<style>
div{color:red;}
</style>

1.3外链式（写在.css文件内，加载引用）在head内写
<link rel="stylesheet"(样式表) href="./XXX.css">
xxx.css文件：div{color:red;}

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="test.css"> <!--外部加载引用 test.css  : h3{color: green} -->
    <style>                                 /*内嵌式*/
        h2{color: blue}
    </style>
</head>
<body>
    <h1 style="color:red">行内式</h1>        <!--行内式-->
    <h2>内嵌式</h2>
    <h3>外链式</h3>
</body>

2.标签选择器

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    /*    *{color:red;}               所有标签*/
    /*    p{color:blue}               标签选择*/
    /*    #id1{color:green}           id选择*/
    /*    .cla1{color:aqua}           class选择器*/
    /*    p[name="nm1"]{color:yellow} 属性选择*/
    /*    p,h4{color:red}             并列选择*/
    /*    div p{color:aqua}           子孙元素选择 （权值可以相加）*/
    /*    div>p{color:green}          子元素选择*/
    /*    P+span{color:red}           下一个兄弟元素*/
    /*    p~span{color:aqua}          所有兄弟元素*/
        div p:nth-of-type(2){color:aqua} /* 第二个P元素*/
        
        a:link{color:aqua}        /*未访问链接*/
        a:visited{color:green}    /*访问过链接*/
        a:active{color:yellow}    /*正在跳转的链接*/
        a:hover{color:darkorchid} /*鼠标在链接上面时*/    
        inupt:checked{height: 50px;width: 50px;}
    </style></head>

<body>
    <div>
        <p name="nm1">哈哈哈哈</p>
        <span id="id1">嘿嘿嘿嘿</span>
        <span>
            <p>呼呼呼呼</p>
            <h4 class="cla1">呵呵呵呵</h4>
        </span>
        <p>啊啊啊啊</p>
    </div>
    <a id="id1" href="02.jianli.html">简历</a>
    <a href="a.html">A网站</a></body>

3.优先级（权值）

内联：1000 id:100 class:10 标签名（属性）：1 通用：0