前端必会之二 css：层叠样式表

最新推荐文章于 2024-12-12 21:39:36 发布

ঞ᭄祈愿ঞ᭄࿐

最新推荐文章于 2024-12-12 21:39:36 发布

阅读量1.6k

点赞数 46

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_69268437/article/details/140369071

版权

一、css介绍

css全称是层叠样式层，用于网页的修饰

有三种引入方式：

1、外部链接式：使用link标签其中herf指向css文件；

2、内部式：在html文件的style标签内编写css代码；

3、行内式：直接在标签style属性中编写css代码。

标签的基本属性：

name：名称属性；

id：id属性；

style：样式属性；

class：类属性。

二、四种基本选择器（必会）

1、知识点预览

2、知识点示例展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
        /*通配符选择器，使用所有的标签*/
        *{
            font-family: sans-serif;
            padding: 10;
            margin: 10;
            background-color: antiquewhite;
        }
        /*标签选择器*/
        div{
            border: 4px solid red;
            width: 300px;
            height: 50px;
            background-color: aqua;
        }
        p{
            width: 600px;
            height: 60px;
            background-color: sienna;
        }
        /*类选择器*/
        .P_1{
            border: 3px solid green;
            background-color: aliceblue;
            width: 400px;
            height: 30px;
        }
        /*id选择器*/
        #p_2{
            border: 5px solid yellow;
            width: 500px;
            background-color: rgb(72, 216, 132);
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p class="P_1" style="color: rgb(201, 21, 21);font-size: 25px;">p1</p>
    <p id="p_2" align="center" style="font-size: 25px; color: aqua;">p2</p>
    <p align="end" style="font-family: 'Times New Roman', Times, serif;font-size: 25px;color: aliceblue;">p3</p>
</body>
</html>

3、效果展示

通过改变背景边框字体等效果展示了四种基本选择器的应用方式