CSS-01基础知识_clrc css-CSDN博客

本文链接：https://blog.csdn.net/xiaoai_tx/article/details/106372739

css基础知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css入门</title>

    <!--
        第二种方式：（内部样式表）
        将样式编写在head的style 标签
            - 通过css 选择器选中元素并赋予样式
            - 只能在当前网页使用
    -->

    <!--

        <style>
        p{
            color :red
            <font-size:30px></font-size:30px>
        }
        </style>

    -->

    <!-- 
        第三种方式：外部样式表
            - 将样式编写在外部的css文件中，并通过link 标签引用，能够加快网页加载速度
            - 可以在多个网页中复用（用的较多）
            
    -->
    
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <!--
        css 是一个立体结构
        css 元素用来修改网页样式
        
        第一种方式：（内联样式，行内样式）
            -标签内部通过style 来设置元素样式
    -->

    <p style="color: blue; font-size:30px;">我说过，我不闪躲。我非要这么做</p>
    <p>小酒窝，长睫毛</p>
</body>
</html>

复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /*
            这是在css style中的注释
            css 基本语法： 选择器 声明块
            选择器：选择页面中的元素 如 p元素，h1元素  p{} h1{} div{}
            声明块：设置文字的样式，由一个个声明组成，是一个名值对结构，如color：red
        */

        h1{
            color:firebrick;
            font-size: 30;
        }

        /*
            #id的属性  如：#ab  下面第一句话便设置了特定的样式
        */

            #ab{
                color: gold;
                font-size: larger;
            }

        /*
            .class的属性  如：.3a   给第三和第四句话设置了同样的类，可以使两句话有着同样的样式变化
                - 注：在定义id，class 等时。不能以数字开头
        */

            .a3{
                font-size: 35px;
            }

        /*
            通配选择符：选择该页面的所有元素     如： *{样式设置}
        */

        /*
            交集选择器:同时选中满足多个条件的选择器
                语法：选择器1选择器2···选择器n{}
                如：将class 为div 的h3 字体的颜色设置为红色   h3.div{}
                注：交集选择器有元素选择器，必须将元素选择器开头

        */
            h3.div{
                    color: red;
            }

        /*
            并集选择器(选择器分组)：同时选择复合多个条件的元素
                语法：选择器1，选择器2，···选择器n{}
                如：将id是miss 且class是love 的字体设置为50px

        */

        #miss,.love{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>我还在寻找，一个拥抱，和一个微笑</h1>
    <p>谁替我祈祷，替我烦恼</p>

    <h2>鲁迅</h2>
    <p id="ab">1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。</p>

    <p>2、从来如此，便对吗？</p>
        
    <p class="a3">3、小的时候，不把他当人，大了以后也做不了人。</p>
        
    <p class="a3">4、时间就像海绵里的水，只要愿挤，总还是有的。</p>
        
    <p>5、我好象是一只牛，吃的是草，挤出的是牛奶。</p>
        
    <p>6、我们目下的当务之急是：一要生存，二要温饱，三要发展。</p>
        
    <p>7、凡是总须研究，才会明白。</p>
        
    <p>8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。</p>


    <div class="div">有一份热，发一份光</div>
    <div class="love">爱而不得，是为常态</div>
    <p id= "miss">明明你也很爱我，没理由错过</p>
    <h3 class="div">虽然你我下落不明，你知道我曾为你动过情</h3>
</body>
</html>

在这里插入图片描述
关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>

    <style>
        /*
            子元素选择器：选中指定父元素的指定子元素
            语法：父元素 > 子元素
            例：为div子元素p的子元素p1设置字体为蓝色
            注： 可以结合多个选择器使用
        */

        div > p > p1{
            color: blue;
        }

        /*
            后代元素选择器：选中祖先元素的后代元素
            语法： 祖先元素 后代元素
            例：设置div后代元素p1字体大小为35px
        */

        div p1{
            font-size: 35px;
        }

        /*
            兄弟元素选择器：选择兄弟元素
            语法：前一个 + 下一个
            例： 为span2设置字体颜色为红色
            注：这个只能选择一个兄弟元素

            若要选择多个兄弟元素  语法：前一个 ~ 后一个
        */

        span1 + span2{
            color:red
        }

        span2~span3 {
            font-size:40px
        }
    </style>

</head>
<body>
    <div>
        我是一个div

        <p>
            我是div中的p

            <p1>我是div中的p的p1</p1>
        </p>

        <span1>我是div中的span1</span1>
        <span2>我是div中的span2</span2>
        <span3>我是div中的span2</span3>
        <span3>我是div中的span2</span3>
        <span3>我是div中的span2</span3>

    </div>

   

</body>
</html>

在这里插入图片描述
属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>属性选择器</title>

    <style>
    /*
        属性选择器：
            标签[属性名]                 选择含有指定属性的元素
            标签[属性名 = 属性值]        选择含有指定属性和属性值的元素
            标签[属性名^= 属性值]        选择属性值以指定属性值开头的元素   
            标签[属性名$= 属性值]        选择属性值以指定属性值结尾的元素
            标签[属性值*= 属性值]         选择属性值含有某个属性值的元素

    */

    /*
    p[title]{
        color: red;
    }
    */

    p[title = "cl"]{
        font-size: 35px;
    }
   

    p[title ^= "time"]{
        color: gold;
        
    }

    p[title $= "out"]{
        font-size: x-large;
    }

    p[title *=v]{
        color: lightcoral;
    }

    </style>
</head>
<body>


    
    <p title="yz">1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。</p>

    <p title="cl">2、从来如此，便对吗？</p>
        
    <p title="clrc">3、小的时候，不把他当人，大了以后也做不了人。</p>
        
    <p title="time">4、时间就像海绵里的水，只要愿挤，总还是有的。</p>
        
    <p title="timeout">5、我好象是一只牛，吃的是草，挤出的是牛奶。</p>
        
    <p title="out">6、我们目下的当务之急是：一要生存，二要温饱，三要发展。</p>
        
    <p title="love">7、凡是总须研究，才会明白。</p>
        
    <p title= "vocal">8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。</p>

</body>
</html>

属性选择器
伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style>
        /*
            伪类选择器：用来描述元素的特殊状态；如第一个元素，被点击元素等
                :first-child        选择第一元素
                :last-child         选择最后一个元素
                :nth-child()        选择第n 个元素
                    - nth-child(n)  选中n个元素 
                    - nth-child(2n/even)  选中偶数列元素
                    - nth-child(2n-1/odd)  选中奇数列元素

                :first-of-type          选择某一类型的第一个元素
                :last-of-type           选择某一类型的最后一个元素
                :nth-last-type()        选择某一类型的第n个元素

                :not()                  否定，除了某类型
        */

        ul>li:first-child{
            font-size: x-large;
        }

        ul>li :last-of-type{
            color: coral;
        }


    </style>


</head>
<body>
    <ul>
        <li>这是第零个</li>
        <li>这是第一个</li>
        <li>这是第二个</li>
        <li>这是第三个</li>
        <li>这是第四个</li>
        <li>这是第五个</li>
    </ul>
</body>
</html>

元素的伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a元素的伪类</title>
    
    <style>
        /*
            :link       修改未访问链接的样式
            :visited    修改已经访问链接的样式
            :hover      修改鼠标移入的状态
            :active     用来表示鼠标点击状态
        */

        a:link{
            color: red;
        }

        a:visited{
            color: wheat;
        }

        a:active{
            font-size: x-large;
        }

        a:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">这是已经访问的链接</a>
    <br><br><br>
    <a href="https://www.taobao.com/">这是未访问的链接</a>
</body>
</html>

在这里插入图片描述
伪元素*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        /*
            伪元素：表示页面中不真实存在的元素或位置，以 ::开头

            :: first-letter         表示第一个字母
            :: first-line           表示第一行
            :: selection            表示选中的内容
            :: before               元素的开头
            :: after                元素的结尾
                - before 和 after 必须结合content 使用

        */

        p::first-letter{
            font-size: 30px;
        }

        p::first-line{
            background-color: tomato;
        }

        P::selection{
            color:darkred;
        }

        p::after{
            content: "@";
            color: bisque; 
            font-size: 30px;   
        }
    </style>
</head>
<body>

    <p> Five score years ago, a great American, in whose symbolic <br>
        shadow we stand signed the Emancipation Proclamation. <br>
        This momentous decree came as a great beacon light of <br>
        hope to millions of Negro slaves who had been seared in<br>
        the flames of withering injustice. It came as a joyous <br>
        daybreak to end the long night of captivity.</p>
    
</body>
</html>

在这里插入图片描述
样式的继承与优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        /*
        继承：子类元素继承父类元素/祖先元素
        注：部分样式如背景，布局等不会继承
        */

        /*
            样式冲突：不同选择器选中相同元素，却设置不同的样式
            选择器的权重： 内联样式 > id 选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式
                注：比较优先级时，需要将所有选择器的优先级相加(分组选择器单独计算)
                    在某样式之后加 !important 则获得最高优先级
        */
    </style>
</head>
<body>
    
</body>
</html>

像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素</title>
    <style>
        /*
            像素：描述网页大小的量度
            百分比：所占比
            em :  相对于元素的字体大小计算  1em = 1 font-size    注：em会随着字体大小变化
            rem：  相对于根元素大小计算
        */

        /* html{
            font-size: 15px;
        }
        */

        .box{
            width: 500px;
            height: 500px;
            background-color: burlywood;
        }

        .x{
            width: 50%;
            height: 50%;
            background-color: cornsilk;
        }

        .y{
            font-size: 20px;
            width: 10em;
            height: 15em;
            background-color: red;
        }

        .z{
            width: 10rem;
            width: 15tem;
            background-color:springgreen;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="x"></div>
    </div>
    <br><br>
    <div class="y"></div>
    <br><br>
    <div class="z"></div>
</body>
</html>

在这里插入图片描述
颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            RGB:
            RGBA: A表示透明度
            十六机制的RGB值：#ff00ff
            HSL值： h-色相(0-360); s-饱和度(0%-100%);l-亮度(0-100%)
        */

        .box{
            width: 90px;
            height: 60px;
            background-color: rgb(25, 100, 60);
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0,255, 0.3);
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color:#ff0000;
        }
    
    </style>
</head>
<body>
    <div class="box"></div><br>
    <div class="box1"></div><br>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述