1

我想制作包含内容的气泡，放置在 HTML 页面周围。因此，我创建了一个 .bubble CSS 类，并将位置值作为内联样式。这给了我一些相当长的行。我使用的编程语言的风格指南规定了最大行长度，并指定了应该如何分解过长的行。就像是

<div class="bubble"
    style="top: 10%;
    left: 40%;
    right: 60%;
    width: 480px;
    height: 295">
    Content.
</div>

...看起来很荒谬。什么是好的形式？

4

3 回答 3

4

我宁愿在一行中查看。话虽如此，我几乎从未见过它像那样破碎。在某些情况下，我认为浏览器无论如何都会删除换行符。

虽然我真的不想看到内联 CSS。

但是，如果您必须使用内联 CSS，我认为 80 个字符的“适合屏幕的任何内容”的标准仍然适用。

编辑

可以肯定的是，我对内联 CSS 指南进行了一些简单的搜索，并且我发现的所有网站都强烈反对将其作为一种实践。我知道你的问题是关于内联 CSS，但我觉得有义务说不要。它打破了关注点分离的概念。它将您的 html 与您的 CSS 紧密结合。如果您想尝试新设计怎么办？现在您必须直接编辑您的 html 并冒着完全破坏流程或页面的风险，而不仅仅是指向一个新的 CSS 文件。

如果您需要特定元素的特定 CSS，请在其上添加一个 ID，然后将其放入您的外部 CSS 文档中。

于 2012-10-16T00:44:13.747 回答
1

编辑：没有必要同时拥有左右声明。如果您告诉浏览器该元素距离左侧 40%，它会知道它距离右侧 60%。这将为您节省一些代码字符，并且不会改变结果。

你没有做一个泡泡CSS类。您创建了一个气泡类并将内联 css 添加到 div 标签。你有很多选择。我不太确定你为什么没有选择它们。

如果行长有问题，请删除空格。您不需要它们，并保持线路更短。

<div class="bubble" style="top:10%;left:40%;width;480px;height:295;">
Content.
</div>

但是，同意这里的另一篇文章，不要使用内联 css。这是不好的做法。如果样式必须在文件中（如在 Tumblr 主题中），请将它们放在样式标签中。

<style> .bubble {top:10%;left:40%;width:480px;height:295;}
</style>

或者做我们大多数人所做的，将样式放在一个单独的 css 文件中，在 head 标签之间有一个指向它的链接。

 <link href="yourstyles.css" rel="stylesheet" />
于 2012-10-16T00:53:48.307 回答
0

您是否考虑过通过 js 和 jQuery 来做这件事？或者，你可以这样：

$('.someBubble').css({
top: 10%;
    'left': '40%',
    'right': '60%',
    'width': '480px',
    'height': '295px'
});

不知道您必须使用哪些约束或限制，这至少可以让您避免内联样式。

于 2012-10-16T01:05:25.017 回答