Web前端学习笔记3（CSS）-优快云博客

学习完基本的Html之后，就进入了CSS的学习，CSS就是进行样式的设置，例如字体的颜色，大小等等。以下是部分的学习笔记。

知识点学习

CSS和Html可以说是不同的两种“语言”了，所以它的语法结构和Html又有所不同，一般在开发的时候会单独写一个.css的文件，然后其他的文件来引用即可，但是在学习的时候我们就直接在.html文件的内部写，一般写在head标签的内部，并且写在style标签的内部。

1、CSS简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>
    <!-- 
        内部样式表
     -->
    <style>
        /*
            CSS 用来设置表现
            - 层叠样式表
            - 为每一层来设置样式 给网页化妆
         */
        h1{
            color: red;
            font-size: 50px;
        }

        p{
            color: green;
            font-size: 40px;
        }
    </style>

    <!-- 
        “最佳”的实践方式
        引入 外部样式表 （.css文件）
        需要通过 link 标签进行引入

        -- 可以使用到浏览器的缓存机制，加快速度
    -->
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    
    <h1>欢迎来到CSS！</h1>
    <h2>我是h2</h2>
    <p>我是一个段！</p>
    
</body>
</html>

2、CSS语法

CSS的基本语法就是：选择器+声明块，其中选择器就是选中页面中的指定元素，而声明块由一个或者多个声明组成，每个声明是一个名值对。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS语法</title>
    <!-- 
        CSS 语法规范
     -->
    <style>
        /*
            CSS 中的注释 

            CSS 中的基本语法：
                选择器  声明块

                选择器：选中页面中的指定元素
                声明块：由每一个声明组成，名值对
         */
         p{
             color: blue;
             font-size: 30px;
         }
    </style>
</head>
<body>
    <p>今天天气真不错！</p>
</body>
</html>

3、CSS选择器

想要对元素进行设置样式，那么就要想办法选择他们，这也是选择器的重要内容，下面学习的就是一些基本的选择器，包括：

元素选择器：根据标签名选中指定元素；
id选择器：根据id值选中指定元素；
class选择器：给一类元素设置样式；
通配选择器：给所有元素进行设置；

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

    <style>
        /* 
            元素选择器：
                作用：根据标签名来选中指定的元素*/

            p{ 
                color: red;
                font-size: 50px;
            } 
       

        /* 
            id选择器（#开头）
                作用：根据id值*/

            #p3{
                color: blue;
                font-size: 30px;
            }

        
        /* 
            class选择器（.开头）
                作用：给一类元素设定*/

                .c1{
                color: red;
                font-size: 30px;
            }


        /* 
            通配选择器（*）
         */
         *{
             color: red;
         }

        
    </style>
</head>
<body>

    <h1>我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="p3">儿童相见不相识</p>
    <p>笑问客从何处来</p>

    <!-- 
        class 属性，与id 类型，但是可以重复使用
            可以为一个元素同时指定多个class
     -->
    <p class="c1 c2">秋水共长天一色</p>
    <p class="c1">落霞与孤鹜齐飞</p>

</body>
</html>

4、复合选择器

交集选择器
并集选择器

<!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>

        .red{
            color: red;
        }

        /* 
            交集选择器：
                是元素满足多个条件
        */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue;
        }

        /* 
            并集选择器
        */
        h1, span{
            color: violet;
        }

    </style>
</head>
<body>

    <div class="red">我是div</div>

    <p class="red a b c">我是p元素</p>
    
    <h1 class="h1">我是h1</h1>

    <span class="span">我是span</span>
</body>
</html>

5、关系选择器

子元素选择器（>）
后代选择器（空格）
选择下一个兄弟（+）
选择下面所有兄弟（~）

<!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 > span{
            color: rgb(108, 115, 214);
        }

        div span{
             color: blueviolet;
         } 
        
        div > p > span{
             color: burlywood;
         } 

         p + span{
            color: chartreuse;
        } 


        p ~ span{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 
        对于有嵌套的标签，如何进行设置
     -->
    
    <div>

        我是一个div

        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>

        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>

    </div>


</body>
</html>

6、属性选择器

根据属性进行选择元素，例如根据：title, class, id等等，以什么开头和以什么结尾。

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

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

         p[title="p1"]{
             color: chartreuse;
         }

         p[class ^= "c"]{
             color: chocolate;
         }

         p[id $= "3"]{
             color: darkmagenta;
         }

        p[title *= "6"]{
            color: darkturquoise;
        }

    </style>
</head>
<body>

    <h1 title="abc">我是标题</h1>
    <p title="p1">少小离家老大回</p>
    <p title="p2">乡音无改鬓毛衰</p>
    <p id="p3">儿童相见不相识</p>
    <p id="d3">笑问客从何处来</p>
    <p class="c1 c2">秋水共长天一色</p>
    <p class="c1">落霞与孤鹜齐飞</p>
    <p title="p6">我是p6</p>
    
</body>
</html>

7、伪类选择器

伪类就是用来指定指定相对位置，比如：列表中的第几个元素，总之只和相对的位置有关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 
            将ul里的第一个li设置为红色
         */

         /* 
            伪类（不存在的类）：
                - 伪类一般用来描述一个元素的特殊状态
                    比如：第一个子元素，被点击的元素，鼠标移入的元素
                - 伪类一般情况下都是使用：开头
                    :first-child 第一个子元素
                    :last-child 最后一个子元素
                    :nth-child() 选中第n个子元素
                        特殊值：
                            n 第n个 n的范围是0到正无穷
                            2n 或者 even 表示选中偶数位的元素
                            2n+1 或者 odd 选中奇数位
                    
                    - 以上伪类是所有元素进行排序的

                    :first-of-type
                    :last-of-type
                    :nth-of-type()
                    - 以同类标签进行排序

            否定伪类：
                not()

          */
        
         
         /* ul > li:first-child{
             color: darkviolet;
         }

         ul > li:nth-child(4){
             color: deeppink;
         }

         ul>li:first-of-type{
             color: forestgreen;
         } */

         ul>li:not(:nth-of-type(4)){
             color: gold;
         }


    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

8、a元素的伪类

用来设置超链接的样式，访问过的颜色和没访问过的颜色；鼠标移动到上面变色或者点击变色等等。

<!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>
        /* 
            :link 用来表示没访问过的链接
            :visited 用来表示没访问过的链接

            由于隐私的原因，visited只能修改链接的颜色
            - 只有 a 标签可以使用
        */

        a:link{
            font-size: 40px;
            color: hotpink;
        }

        a:visited{
            color: indigo;
        }


        /* 
            :hover 鼠标移动到上面就会变色
            :active 鼠标点击不松时变色

            - 所有的标签都可以使用
        */
        a:hover{
            color: lawngreen;
        }

        a:active{
            color:lightcoral;
        }


    </style>
</head>
<body>
    <!-- 
        1、访问过的链接
        2、没访问过的链接
     -->
    <a href="https://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>

9、伪元素

设置元素内部的样式，第一个字或者第几个字，第一行或者第几行等等。

<!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>
        p{
            font-size: 20px;
        }

        /* 
            伪元素：指定相应的位置
                语法: ::双冒号

            ::first-letter
            ::first-line
            ::selection
            
            -- 经常使用，元素的前面和后面
            ::before
            ::after
                - before 和 after需要和content结合使用
        */
        p::first-letter{
            font-size: 50px;
        }

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

        p::selection{
            background-color: green;
        }

        div::before{
            content: "ss";
            color: greenyellow;
        }

        div::after{
            content: "ee";
            color: hotpink;
        }
    </style>
</head>
<body>

    <div>Hello Hello How are you</div>
    
    <p>
        ajnflmlkdmclvknlkz naisva vomsmzn mlamsv mlsacm amlmvn malsdv alsfj mlaknvanm alknv alsnvan lan lakfnasdif 
    </p>
</body>
</html>