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 回答