Html 正在调用CSS类但不起作用_Html_Css

Html 正在调用CSS类但不起作用

html css

Html 正在调用CSS类但不起作用,html,css,Html,Css,我目前拥有以下代码： <html> <head> <style> .gr { color: "#ffffff"; background: "#00ff00"; border-radius: 8px 0 0 15px; } .or { color: "#00ff00"; background: "#ffa500"; border-radius: 0 15px 8px 0; } </style> <

我目前拥有以下代码：

<html>
<head>
<style>
.gr {
    color: "#ffffff";
    background: "#00ff00";
    border-radius: 8px 0 0 15px;
}

.or {
    color: "#00ff00";
    background: "#ffa500";
    border-radius: 0 15px 8px 0;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>


gr{
颜色：“ffffff”；
背景：“00ff00”；
边界半径：8px 0 15px；
}
.或{
颜色：“00ff00”；
背景：“ffa500”；
边界半径：0 15px 8px 0；
}
测试1测试2

但是这些课程根本没有任何效果。即使我调用外部样式表，它仍然是这样。但是，如果我做了

，它就会工作。有人能帮我吗？

你需要去掉十六进制代码周围的引号。并将

background

更改为

background color

（编辑：我想从技术上讲，你不需要这样做，这更像是一种偏好）

在这里拉小提琴：

您需要去掉十六进制代码周围的引号。并将

background

更改为

background color

（编辑：我想从技术上讲，你不需要这样做，这更像是一种偏好）

在这里拉小提琴：

您需要删除css中的引号

.gr {
    color: #ffffff;
    background: #00ff00;
    border-radius: 8px 0 0 15px;
}

.or {
    color: #00ff00;
    background: #ffa500;
    border-radius: 0 15px 8px 0;
}

在这里使用JSFIDLE

您需要删除css中的引号

.gr {
    color: #ffffff;
    background: #00ff00;
    border-radius: 8px 0 0 15px;
}

.or {
    color: #00ff00;
    background: #ffa500;
    border-radius: 0 15px 8px 0;
}

在这里使用JSFIDLE

似乎您有另一个CSS文件覆盖您的配置

当您在DOM对象中创建一个style=“”时，这是最重要的规则。你对那些事情有一点解释

然后添加到您的CSS代码！重要的是让他们首先检查：

<html>
<head>
<style>
.gr {
    color: #ffffff !important;
    background: #00ff00 !important;
    border-radius: 8px 0 0 15px !important;
}

.or {
    color: #00ff00 !important;
    background: #ffa500 !important;
    border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>


gr{
颜色：#ffffff！重要；
背景：#00ff00！重要；
边界半径：8px 0 0 15px！重要；
}
.或{
颜色：#00ff00！重要；
背景：#ffa500！重要；
边界半径：0 15px 8px 0！重要；
}
测试1测试2

您可以检查应用于DOM对象的规则，例如在chrome中，在所需对象上单击鼠标上的第二个按钮进行检查，然后选择Inspect Element。在“样式”面板上，您可以看到适用于此对象的规则以及它们来自的文件

希望能有帮助！！问候

编辑

我不知道颜色和背景中的“”是什么！！很抱歉无论如何，我活在这里的答案。非常感谢@deebs，因为分号必须跟在后面！重要的建议。下次会检查得更好

您似乎有另一个CSS文件覆盖了您的配置

当您在DOM对象中创建一个style=“”时，这是最重要的规则。你对那些事情有一点解释

然后添加到您的CSS代码！重要的是让他们首先检查：

<html>
<head>
<style>
.gr {
    color: #ffffff !important;
    background: #00ff00 !important;
    border-radius: 8px 0 0 15px !important;
}

.or {
    color: #00ff00 !important;
    background: #ffa500 !important;
    border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>


gr{
颜色：#ffffff！重要；
背景：#00ff00！重要；
边界半径：8px 0 0 15px！重要；
}
.或{
颜色：#00ff00！重要；
背景：#ffa500！重要；
边界半径：0 15px 8px 0！重要；
}
测试1测试2

希望能有帮助！！问候

编辑

在CSS中指定颜色时，需要使用

background color

标记。另外，在指定十六进制代码时，不需要添加引号

因此，您的代码应该是：

<html>
<head>
<style>
.gr {
    color: #ffffff; !important
    background-color: #00ff00; !important
    border-radius: 8px 0 0 15px; !important
}

.or {
    color: #00ff00; !important
    background-color: #ffa500; !important 
    border-radius: 0 15px 8px 0; !important
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>


gr{
颜色：#ffffff；！重要
背景色：#00ff00；！重要
边界半径：8px 0 0 15px；！重要
}
.或{
颜色：#00ff00；！重要
背景色：#ffa500；！重要
边界半径：0 15px 8px 0；！重要
}
测试1测试2

欢迎来到CSS的世界

以下是一些给你的浅显读物：

此外，作为所有CSS的参考，我将转到MDN：