阅读模式:

【前端】CSS3学习笔记(一)——选择器

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:✨CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语......

【前端】CSS3学习笔记(一)——选择器

✨CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化


✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili


✨学习笔记——选择器

第一个CSS

h1{
    color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范:建议分离css与html-->
<!--    <style>编写css代码</style>-->
<!--    语法:-->
<!--    选择器{-->
<!--        声明1;-->
<!--        声明2;-->
<!--        声明3;-->
<!--    }-->
<!--    声明最好以;结尾-->

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>一级标题</h1>

<p>css的优势:<p/>
<p>1、内容和表现分离</p>
<p>2、网页结构表现统一,可以实现复用</p>
<p>3、样式十分的丰富</p>
<p>4、建议使用独立于htm的css文件</p>
<p>5、利用SEO,容易被搜索引擎收录!</p>

</body>
</html>

导入方式

/*外部样式*/
h1{
    color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    内部样式-->
    <style>
        h1{
            color: red;
        }
    </style>

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<p>优先级 就近原则</p>

<p>外部样式</p>
<ul>
    <li>链接式(html)</li>
    <li>导入式(css2.1)</li>
</ul>

<!--行内样式 在标签元素中 编写style属性 编写样式-->
<h1 style="color: blue">标题</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <li>导入式</li>
    <style>
        @import "css/style.css";
        /*@import url("css/style.css");*/
    </style>

</head>
<body>

<h1>外部样式导入式</h1>

</body>
</html>

基本选择器

标签选择器

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

    <style>
        /*标签选择器 会选择所有这个标签的元素*/
        h1{
            color: red;
        }
        p{
            font-size: 20px;
        }
    </style>

</head>
<body>

<h1>标签选择器h1</h1>
<h1>标签选择器h1</h1>
<p>标签选择器p</p>

</body>
</html>

类选择器

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

    <style>
        /*类选择器格式 .class的名称{}*/
        /*可以多个标签归类 同一个class 可以复用*/
        .class1{
            color: red;
        }
        .class2{
            color: blue;
        }
    </style>

</head>
<body>
<h1 class="class1">类选择器</h1>
<h1 class="class2">类选择器</h1>
<h1 class="class3">类选择器</h1>
<p> class="class1">类选择器</p>


</body>
</html>

id选择器

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

    <style>
        /*id选择器 id必须保证全局唯一*/
        /*#id名称{}*/
        /*不遵循就近原则*/
        /*id选择器 > class选择器 > 标签选择器*/

        #id1{
            color: red;
        }

        .class1{
            color: blue;
        }

        h1{
            color: green;
        }
    </style>

</head>
<body>


<h1 id="id1">id选择器</h1>
<h1 class="style1">id选择器</h1>
<h1>id选择器</h1>

</body>
</html>

基本选择器总结

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

    <style>
        p{
            font-size: 20px;
        }
    </style>

</head>
<body>

    <p>标签选择器 选择一类标签</p>
    <p>类选择器 选择所有class属性一致的标签 跨标签</p>
    <p>id选择器 全局唯一</p>
    <br>
    <p>优先级:</p>
    <p>不遵循就近原则<p/>
    <p>id选择器 > class选择器 > 标签选择器</p>

</body>
</html>

层次选择器

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

    <style>
        /*后代选择器*/
        /*body p{*/
        /*    background: red;*/
        /*}*/

        /*子选择器*/
        /*body > p{*/
        /*    background: green;*/
        /*}*/

        /*相邻兄弟选择器 只有下一个*/
        /*.active + p{*/
        /*    background: red;*/
        /*}*/

        /*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/
        .active ~ p{
            background: blue;
        }

    </style>

</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

<p>p7</p>
<p>p8</p>

</body>
</html>

结构伪类选择器

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

<!--    避免使用class id选择器-->
    <style>
        /*ul第一个元素*/
        ul li:first-child{
            background: red;
        }
        /*ul最后一个元素*/
        ul li:last-child{
            background: blue;
        }

        /*选中p1*/
        /*定位到父元素 选择当前的第一个元素*/
        /*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/
        p:nth-child(1){
            background: green;
        }
        /*选择当前p元素的父级元素 选中p元素的第二个 类型*/
        p:nth-of-type(2){
            background: yellow;
        }

        a:hover{
            background: red;
        }
    </style>

</head>
<body>
<!--    <a href="">a</a>-->
<!--    <h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

属性选择器

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: red;
            text-decoration: none;
            text-align: center;
            font:bold 20px/50px Arial;
            color: gainsboro;
            margin-right: 5px;
        }

        /*属性名 属性名 = 属性值(正则)*/
        /*
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */


        /*存在id属性的元素*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*a[id = first]{*/
        /*    background: yellow;*/
        /*}*/

        /*class中有links的元素*/
        /* a[class*="links"]{
            background: yellow;
        } */

        /* 选中herf中以http开头的元素 */
        a[href^=http]{
            background: yellow;
        }

        a[href$=pdf]{
            background: blue;
        }

    </style>


</head>
<body>

<p class="demo">

    <a href="https://www.baidu.com/" class="links item first" id="first">1</a>
    <a href="https://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>
    <a href="images/none.html" class="links item active">3</a>
    <a href="images/none.png" class="links item">4</a>
    <a href="none.jpg" class="links item">5</a>
    <a href="none.pdf" class="links item">6</a>
    <a href="none.docx" class="links item">7</a>
    <a href="none.pptx" class="links item">8</a>
    <a href="none.xlsx" class="links item">9</a>
    <a href="none.cpp" class="links item last">10</a>

</p>

</body>
</html>

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14964830.html

版权所有,如需转载请注明出处。

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: