JAVA全栈学习：CSS基础

最新推荐文章于 2024-09-04 16:47:02 发布

Listener-1379

最新推荐文章于 2024-09-04 16:47:02 发布

阅读量95

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/113926004

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

三种css样式引入方式

三种css样式引入方式

在这里插入图片描述

id选择器

在这里插入图片描述
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
    #css1{
        background-color:red;
    }
    </style>
</head>
<body>
    <span id = "css1">Hello World</span>
</body>
</html>

在这里插入图片描述

标签选择器

在这里插入图片描述
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
    #css1{
        background-color:red;
    }
    div{
        background-color:pink;
    }
    </style>
</head>
<body>
    <span id = "css1">Hello World</span>
    <div>Hello World2</div>
    <div>Hello World3</div>
    <div>Hello World4</div>
</body>
</html>

在这里插入图片描述

类选择器

在这里插入图片描述
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
    #css1{
        background-color:red;
    }
    div{
        background-color:pink;
    }
    .myclass{
        background-color:green;
    }
    </style>
</head>
<body>
    <span id = "css1">Hello World</span>
    <div>Hello World2</div>
    <div>Hello World3</div>
    <div>Hello World4</div>
    <span class = "myclass">Hello World5</span>
    <div class = "myclass">Hello World6</div>
</body>
</html>