Java网页搭建--CSS入门

最新推荐文章于 2023-04-24 22:12:11 发布

VIP文章 _kooo

最新推荐文章于 2023-04-24 22:12:11 发布

阅读量326

点赞数

分类专栏：从网页搭建入门java web

本文链接：https://blog.csdn.net/qq_38517206/article/details/88414030

版权

CSS：层叠样式表，使得相同的页面在不同的浏览器当中呈现出相同的样式

CSS用来做什么：

CSS基础语法：

CSS声明：

CSS声明块：可以同时使用CSS属性

将CSS样式与HTML进行关联：

CSS声明练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS声明</title>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>

</body>
</html>

输出结果：页面纯蓝色

定义CSS的两种方式：

CSS的内联样式：只对当前标签有效

格式要求：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何定义CSS样式1</title>
</head>
<body>
<p style="color:lightcoral;font-weight: bold;">
    这是第一个段落内容
</p>
<p >
    这是第二个段落内容
</p>
</body>
</html>

输出结果：

CSS外联样式：

方式1:

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何定义CSS样式2</title>
    <style>
        p{
            color: lightblue;
            font-weight:bolder;
        }
    </style>
</head>
<body>
<p >
    这是第一个段落内容
</p>
<p >
    这是第二个段落内容
</p>
</body>
</html>

输出结果：

方式2:将CSS文件和html文件相分离

CSS文件：

p {
    color: red;
    font-weight: bolder;
}

html文件：

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

最低0.47元/天解锁文章

_kooo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java网页搭建--CSS入门

CSS：层叠样式表，使得相同的页面在不同的浏览器当中呈现出相同的样式CSS用来做什么：CSS基础语法：CSS声明：CSS声明块：可以同时使用CSS属性将CSS样式与HTML进行关联：CSS声明练习：<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫