CSS层叠样式表笔记1.0

123fight

已于 2022-12-20 23:05:36 修改

阅读量59

点赞数

文章标签： css 前端

于 2022-12-20 22:47:29 首次发布

本文链接：https://blog.csdn.net/weixin_59312663/article/details/128388658

版权

样式表创建

1、内部样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <p>成绩查询系统</p>
</body>

2、外部样式

STEP1.创建css文件对象和css文件

STEP2.利用link标签或import标签引入css文件

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入方式一 -->
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>成绩查询系统</p>
</body>

3、行内样式

<body>
    <p style="color: yellow;">成绩查询系统</p>
</body>

优先级

1、针对同一个标签，同一个属性

2、以就近原则：行内样式>内部样式>外部样式

3、!important 提高优先级，当拥有该后缀之后，则为最好优先级，但如果同时有该后缀则以就近原则

类选择器 id选择器

类选择器：class中有两个及以上的选择器，在css中采用就近原本则（在上面先执行）

<head>
<style>
        .headline{
            color: yellow;
        }
    </style>
</head>
<body>
    <p class="headline">成绩查询系统</p>
</body>

id选择器（细化个别标签）：与class不同，不能有两个选择器。按规定，一个标签唯一，选择器与标签一对一关系。

<head>
    <style>
        #headline1{
            color: yellow;
        }
        #headline2{
            color: blue;
        }
        #headline3{
            color: red;
        }
    </style>
</head>
<body>
    <p id="headline1">成绩查询系统</p>
    <p id="headline2">成绩查询系统</p>
    <p id="headline3">成绩查询系统</p>
</body>

通配符

<style>
        *{
            padding: 0%;
            margin: 0%;
        }
</style>

群组和后代选择器

群组选择器：提供代码，节约代码量

<head>
<style>
    div,p,span{background-color: yellow; }     
</style>
</head>
<body>
    <div>成绩查询系统</div>
    <p>成绩查询系统</p>
    <span>成绩查询系统</span>
</body>

后代选择器：以空格为间隔，在css中是由右向左的匹配选择，先匹配子元素再匹配父元素

<style>
        div p{
            background-color: yellow;
        }
</style>
</head>
<body>
    <div>
        <p>成绩查询系统</p>
    </div>
</body>

伪类选择器

顺序：link-visited-hover-active

<style>
    /* 超链接初始状态 */
       a:link{
        color:blue;
       }
       /* 已访问后状态 */
       a:visited{
        color: blueviolet;
       }
       /* 鼠标悬停 */
       a:hover{
        color: orange;
       }
       /* 链接激活 点击那一刻样式 若没设置则该属性包含在hover*/
       a:active{
        color: aquamarine;
       }
       
    </style>
</head>
<body>
    <a href="http://baidu.com/aaaa">成绩查询系统-link(未访问的才会显示初始状态)</a>
    <a href="http://baidu.com">成绩查询系统-visited</a>
    <a href="http://baidu.com">成绩查询系统-hover-active</a>
</body>