css样式引入方式和选择器

IABQL

于 2021-06-03 16:36:01 发布

阅读量179

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_48078182/article/details/117447972

版权

1.css样式引入的4种方式

1.行内样式

2.内嵌样式

3.外链样式

4.导入样式

css样式优先级：行内样式>内嵌样式>外链样式>导入样式。并且样式遵循就近原则


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  外链样式  -->
    <link rel="stylesheet" href="" type="text/css">
<!--    导入式样式-->
    <style type="text/css">@import url();</style>
<!--内嵌样式-->
    <style>
        p{color: #fbc2eb}
    </style>
</head>
<body>

<!--行内样式-->
<p style="color: #a6c1ee">css样式引入方式</p>

</body>
</html>

2.选择器

1.id选择器

ID选择器只会选择指定ID的元素，以#开头后跟ID的值

2.类选择器

类选择器会选择一个类的元素（元素的类由class属性的值决定），.后跟类名，最为常用。

3.标签选择器

标签选择器会选择所有这个标签的元素
如下是一个p标签选择器，它会渲染页面上所有的p元素

4.通用选择器

选择器优先级：id选择器>类选择器>标签选择器>通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            优先级：
                id选择器>类选择器>标签选择器>通用选择器
        */

        /*通用选择器*/
        *{
            font-size: 15px;color: black;
        }
        /*id选择器*/
        #first{
            font-size: 40px;
        }
        /*类选择器（优先级低于id选择器）*/
        .title{
            font-size: 15px;
            color:#fbc2eb;
        }
        /*标签选择器(优先级低于类选择器)*/
        p{color: #a6c1ee}

    </style>
</head>
<body>
    <div id="first" class="title">div标签</div>
    <p>p标签</p>
    <div class="user">
        <ul>
            <li>hello</li>
            <li></li>
            <li></li>
        </ul>
    </div>
<p id="second">Hello</p>
<div title="a">div</div>
<p>相邻</p>
</body>
</html>

伪类选择器

link：链接点击之前

visited：访问过后

hover：鼠标放置在上面时

派生选择器

派生选择器用于以多个条件选择元素，是数个选择器的结合，常用于通过依据元素在其位置的上下文关系来定义样式
分为后代选择器、子元素选择器、兄弟选择器。

后代选择器

在某类元素的所有后代中再进行选择

子选择器

不同于后代选择器，只选择子代

兄弟选择器

在与某类元素是并列关系的相邻元素中进行选择，注意是相邻

属性选择器

属性选择器会选择拥有指定属性的元素，还可以加等号来指定这个属于应该有的值。

分组选择器

分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
        /*子代选择器*/
        .user>ul{
            border: 1px solid #a6c1ee;
        }
        /*后代选择器*/
        .user li{
            background: #fbc2eb;
        }
        /*分组选择器*/
        .user li,#second{
            color:#a6c1ee;
            font-size: 20px;
        }
        /*选择div包含title属性的*/
        div[title]{
            color: blue;
        }
        /*相邻（下一个）选择*/
        div[title]+p{
            color: blue;
        }
        /*伪类选择器*/
        /*
            link：链接点击之前
            visited：访问过后
            hover：鼠标放置在上面时
        */
    </style>
</head>
<body>
    <div id="first" class="title">div标签</div>
    <p>p标签</p>
    <div class="user">
        <ul>
            <li>hello</li>
            <li></li>
            <li></li>
        </ul>
    </div>
<p id="second">Hello</p>
<div title="a">div</div>
<p>相邻</p>
</body>
</html>

IABQL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css样式引入方式和选择器

css样式引入的4种方式1.行内样式2.内嵌样式3.外链样式4.导入样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="" type="text/css">&
复制链接

扫一扫