CSS总结

2024-01-01 15:46:56

CSS(Cascading Style Sheets)层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的导入方式

优先级：就近原则

行内样式

在标签元素中编写一个style属性，编写样式即可。不符合结构与表现分离

<h1 style="color:red">标题</h1>

内部样式

<style>
    h1{
        color:green;
    }

</style>

?外部样式

链接式

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

导入式

<style>
        @import url("../css/aa.css");
</style>

选择器?

基本选择器

选择页面上的某一个或者某一类元素

优先级不遵循就近原则，id选择器>clss选择器>标签选择器

标签选择器

选择一类标签

?标签名+{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
</body>

类选择器

.+类名{}

?可以多个标签归类 是同一个class，可以复用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi{
            color: green;
        }
        .hello{
            color: aliceblue;
        }
    </style>
</head>
<body>
<h1 class="hi">标题1</h1>
<h1 class="hello">标题2</h1>
</body>

ID选择器

ID必须保证全局唯一?

#id名称+{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hi{
            color: green;
        }
        #hello{
            color: aliceblue;
        }
    </style>
</head>
<body>
<h1 id="hi">标题1</h1>
<h1 id="hello">标题2</h1>
</body>

层次选择器

后代选择器

在某个元素的后面

    <style>
        body p{
            background: blue;
        }
    </style>

子选择器

只有一代有效果

    <style>
        body>p{
            background: blue;
        }
    </style>

相邻兄弟选择器

只有一个，相邻(向下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>awa</title>
    <style>
        .active+p{
            background: aqua;
        }
    </style>

</head>
<body>
    <p class="active">2</p>
    <p>3</p>
    <ul>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>4</p>
        </li>
    </ul>
</body>
</html>

只有3变色?

通用选择器

当前选中元素向下的所有元素

    <style>
        .active~p{
            background: aqua;
        }
    </style>

结构伪类选择器

伪类： 条件

?ul的第一个子元素

    <style>
        ul li:first-child{
            background: blue;
        }
    </style>

ul的最后一个子元素

    <style>
        ul li:last-child{
            background: bisque;
        }
    </style>

属性选择器

id等于first的元素

=代表绝对等于

    <style>
        a[id="first"]{
            background: blue;
        }
    </style>

class中有link的元素

*=表示包含

    <style>
        a[class*="links"]{
            background: blue;
        }
    </style>

herf中以http开头的元素

^=表示以这个开头

    <style>
        a[herf^=http]{
            background: blue;
        }
    </style>

herf中以pdf结尾的元素

$=以这个结尾

    <style>
        a[herf$=pdf]{
            background: blue;
        }
    </style>

文章来源:https://blog.csdn.net/m0_72832574/article/details/134841596
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。