初学JavaWeb，前端css要不要了解一下啊？一文学会JavaWeb中css的简单应用

叶绿体不忘呼吸

已于 2022-02-09 00:48:01 修改

阅读量569

点赞数 7

分类专栏： JAVA 文章标签： css 前端 css3 javaweb

于 2022-02-07 21:45:00 首次发布

本文链接：https://blog.csdn.net/m0_46653805/article/details/122807565

版权

JAVA 专栏收录该内容

91 篇文章 16 订阅

订阅专栏

文章目录

关于JavaWeb中的HTML：《你是不是已经超纲了？一文解决JavaWeb中要求的HTML，是什么样的？》

一、设置CSS样式

有三种设置方式。

1、在HTML标签内设置：仅对当前标签有效。

①代码

<!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>

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

2、在head标签内设置：对当前页面有效

①代码

<!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>

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

3、引入外部CSS样式文件

①代码
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样式由选择器和声明组成，而声明又由属性和值组成。
②属性和值之间用冒号隔开。
③多条声明之间用分号隔开。
④使用/* … */声明注释。

在这里插入图片描述

三、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;
        }

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

四、css文档手册分享

百度网盘链接：点击下载css文档手册
提取码：0909

关于Java中的JavaScript：《初学JavaWeb需要的前端js，JavaScript是什么样的？》

叶绿体不忘呼吸

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录