前端基础（二.CSS 上）

CSS引入方式

内联样式

使用内联样式时，将样式写在中，放在.html文件的中。

<style>
        div{
     
            width: 200px;
            height: 200px;
            background: green;
        }
</style>

外部样式

使用外部样式时，将样式写在单独的.css文件中，将该文件引入至.html文件中，将引入语句写在.html文件的中。

<link rel="stylesheet" href="test.css">

test.css:

div{
     
    width: 300px;
    height: 300px;
    background: pink;
}

CSS选择器

假设有如下html：

<div id="div1">我是divdiv>
    <div>我是div 2div>
    <div class="list">我是div 3div>

    <ul>
        <li class="list">我是li1li>
        <li>我是li2li>
        <li class="list">
            <div>1111div>
            <div class="list">2222div>
        li>
    ul>

    <a href="http://www.baidu.com">百度a>
    <h2 id="myH2" style="background: hotpink;">我是H2h2>
    <h3 class="aa">
        <span id="bb">哈哈哈span>
    h3>

标签选择器

例：

div{
     
        width: 200px;
        height: 200px;
        background: #ff0000;
    }

由上，选择所有

元素

id选择器

例：

#div1{
     
            width: 100px;
            height: 100px;
            background: #0000ff;
        }

由上，选择所有id = "div1"的元素

(class)类选择器

例：

.list{
     
           width: 100px;
           height: 50px;
           background: #0000ff; 
        }

由上，选择所有class = "list"的元素

后代选择器

例：

ul .list{
     
            width: 100px;
           height: 50px;
           background: orange; 
           border: 1px solid #000;
        }

由上，选择

下所有 class = "list"的后代元素
• 父代的子代，以及子代的子代等，都称为后代

子代选择器

例：

ul > .list{
     
            width: 100px;
           height: 50px;
           background: orange; 
           border: 1px solid #000;
        }

由上，选择

下所有 class = "list"的子代元素
• 仅有父代的子一代称为子代

伪类选择器

例：

 a:hover{
      
            background: palegreen;
            color: red;
        }

由上， 选择鼠标指针位于其上的链接
例：

 a:active{
      
            background: palegreen;
            color: red;
        }

由上，选择活动链接
例：

 a:visited{
      
            background: palegreen;
            color: red;
        }

由上， 选择所有已被访问的链接
例：

 a:link{
      
            background: palegreen;
            color: red;
        }

由上， 选择所有未被访问的链接

• 除此之外，伪类选择器还包括例如p:nth-child(2)，p:last-child等种类

(群组)分组选择器

例：

#div1,.list{
     
            color: seagreen;
        }

由上，选择所有class = "div1"的元素和id = "list"的元素



以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：[email protected]或
QQ：2635591841

更于2021.1.27