初学JavaWeb，前端css要不要了解一下啊？一文学会JavaWeb中css的简单应用-CFANZ编程社区

文章目录

一、设置CSS样式

有三种设置方式。

①代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
</head>

<body>
    <div style="border: 2px double black;width: 100px; height: 100px;"></div>
</body>

</html>

②显示效果
在这里插入图片描述

①代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
    <style type="text/css">
        .one {
            width: 100px;
            height: 100px;
            border: 2px solid rgb(25, 23, 27);
            background-color: green;
            margin-top: 20px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
</body>

</html>

②显示效果
在这里插入图片描述

①代码
html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
    <link rel="stylesheet" href="divstyle.css">
</head>

<body>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
</body>

</html>

css文件

.one {
            width: 100px;
            height: 100px;
            border: 2px solid rgb(25, 23, 27);
            background-color: blue;
            margin-top: 20px;
            margin-left: 10px;
        }

②显示效果
在这里插入图片描述

二、CSS代码语法

在这里插入图片描述

三、CSS选择器

1、标签选择器
①代码
HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
    <link rel="stylesheet" href="divstyle.css">
</head>

<body>
    <p>这是第一个段落！</p>
    <p>这是第二个段落！</p>
    <p>这是第三个段落！</p>
</body>

</html>

css代码：

p {
            font-size: 32px;
            color: blueviolet;
            font-family: "微软雅黑";
        }

②显示效果
在这里插入图片描述

2、id选择器
①代码
HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
    <link rel="stylesheet" href="divstyle.css">
</head>

<body>
    <p>这是第一个段落！</p>
    <p id="two">这是第二个段落！</p>
    <p>这是第三个段落！</p>
</body>

</html>

css代码：

#two {
            font-size: 20px;
            color: blueviolet;
            background-color: aqua;
        }

②显示效果
在这里插入图片描述

3、类选择器
①代码
HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
    <link rel="stylesheet" href="divstyle.css">
</head>

<body>
    <p class="one">这是第一个段落！</p>
    <p id="two">这是第二个段落！</p>
    <p>这是第三个段落！</p>
</body>

</html>

css代码：

.one {
            font-size: 12px;
            color: blue;
            background-color: red;
        }

②显示效果
在这里插入图片描述