Question

当我点击游戏个人资料页面中的图标时，我想创建一个弹出屏幕。虽然使用STYLE标签被阻止，但开发人员已授权我们在配置文件区域中使用HTML代码。此外，我无法访问HTML代码的head部分，因此我无法创建任何外部文件来定义CSS类并将它们链接到配置文件页面。

下面我创建了一个代码示例。在示例代码中，我创建了一个外部CSS代码。我想知道如何将这些外部CSS添加到我的HTML代码中（使用Inline CSS方法）。我的问题是在内联CSS方法中定义CSS类。

在回答我的问题之前需要了解的事项：

1）无法为CSS创建外部文件。

2）不能在HEAD标签内写代码。

3）不能使用STYLE标签。

4）只允许使用HTML代码。不允许BBCodes。

我的HTML代码如下所示：

<p>
 <a class="button" href="#popup1">
  <img src="SOME ICON URL HERE">
 </a>
</p>

<div id="popup1" class="overlay light">
 <a class="cancel" href="#"></a>
 <div class="popup">
  <h2>TITLE</h2>
  <div class="content">
   <p>PARAGRAPH ONE GOES HERE</p>
   <p>PARAGRAPH TWO GOES HERE</p>
  </div>
 </div>
</div>

我的外部CSS代码如下所示：

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.5);
 transition: opacity 200ms;
 visibility: hidden;
 opacity: 0;
 &.light {
  background: rgba(255,255,255,0.5);
 }
 .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
 }
 &:target {
  visibility: visible;
  opacity: 1;
 }
}

.popup {
 margin: 75px auto;
 padding: 20px;
 background: #fff;
 border: 1px solid #666;
 width: 300px;
 box-shadow: 0 0 50px rgba(0,0,0,0.5);
 position: relative;
 font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 .light & {
  border-color: #aaa;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
 }
 h2 {
  margin-top: 0;
  color: #666;
  font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 }
 .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
  &:hover {
   opacity: 1;
  }
 }
 .content {
  max-height: 400px;
  overflow: auto;
 }
 p {
  margin: 0 0 1em;
  &:last-child {
  margin: 0;
  }
 }
}

Answer 1

您必须使用html内联样式

执行此类操作

<div id="popup1" style="<!-- styles here -->">
   <!-- other code here -->
</div>

如何在内联CSS中定义CSS类？

1 个答案: