blocks|key|1280962|text|使用内联CSS更难维护。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1280963|对于您想要更改的每个属性，使用内联CSS都需要查找相应的HTML代码，而不是只查找定义清晰且结构良好的CSS文件。|1280964|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Using inline CSS is much harder to maintain.

For every property you want to change, using inline CSS requires you to look for the corresponding HTML code, instead of just looking inside clearly-defined and hopefully well-structured CSS files.

blocks|key|1281016|text|当你想让网站看起来不一样的时候，你必须改变100行代码。这在您的示例中可能不适用，但如果您使用内联css来执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1281017|<div+style+="font-size:larger;+text-align:center;+font-weight:bold">|code-block|syntax|javascript|1281018|在每个页面上表示一个页眉，它将更容易维护为|1281019|<div+class="pageheader">++|1281020|如果在单个样式表中定义了页眉，以便在希望更改整个站点的页眉外观时，只需在一个地方更改css。|1281021|然而，我将是一个异端，并说在您的示例中，我看不到任何问题。您的目标是单个图像的行为，它可能必须在单个页面上看起来正确，所以将实际的css放在样式表中可能有些夸张。|1281022|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

<pre><code>&lt;div style ="font-size:larger; text-align:center; font-weight:bold"&gt;
</code></pre>

on each page to denote a page header, it would be a lot easier to maintain as

<pre><code>&lt;div class="pageheader"&gt; 
</code></pre>

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

blocks|key|1066323|text|我认为，即使你想让一个元素有一个特定的样式，你也必须考虑这样一种可能性，即你可能想要在不同页面上的相同元素上应用相同的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066324|总有一天，有人可能会要求对每个页面上的相同元素进行更改或添加更多的样式更改。如果您在外部CSS文件中定义了样式，则只需在该文件中进行更改，所有页面中的相同元素就会反映出来，这就省去了您的麻烦。:-)|1066325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I think that even if you want to have a certain style for one element, you have to consider the possibility that you may want to apply the same style on the same element on different pages.

One day somebody may ask to change or add more stylistic changes to the same element on every page. If you had the styles defined in an external CSS file, you would only have to make changes there, and it would be reflected in the same element in all of the pages, thus saving you a headache. :-)

blocks|key|1066407|text|内联CSS总是，总是优先于任何链接样式表CSS。如果您编写了一个适当的级联样式表，并且您的属性没有正确地应用，那么这可能会给您带来巨大的麻烦。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066408|它还会在语义上损害您的应用程序:+CSS的目的是将表示与标记分离。当你将两者纠缠在一起时，事情就会变得更加难以理解和维护。它的原理类似于在服务器端将数据库代码与控制器代码分离。|1066409|最后，假设您有20个这样的图像标记。当您决定将它们向左浮动时会发生什么？|1066410|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Inline CSS will always, always win in precedence over any linked-stylesheet CSS. This can cause enormous headache for you if and when you go and write a proper cascading stylesheet, and your properties aren't applying correctly.

It also hurts your application semantically: CSS is about separating presentation from markup. When you tangle the two together, things get much more difficult to understand and maintain. It's a similar principle as separating database code from your controller code on the server side of things.

Finally, imagine that you have 20 of those image tags. What happens when you decide that they should be floated left?

blocks|key|1066466|text|即使您只使用一次样式(如本例所示)，您仍然会将内容和设计混合在一起。查找“关注点分离”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066467|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Even if you only use the style once as in this example you've still mixed CONTENT and DESIGN. Lookup "Separation of concerns".

blocks|key|1281260|text|CSS的全部意义在于将内容从表示中分离出来。因此，在您的示例中，您将内容与表示混合在一起，这可能“被认为是有害的”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1281261|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The whole point of CSS is to separate content from its presentation. So in your example you are mixing content with presentation and this may be "considered harmful".

blocks|key|1066584|text|以你喜欢的方式编写代码，但如果你将它传递给其他人，最好使用其他人所做的。有CSS的原因，也有内联的原因。我两者都用，因为这对我来说更容易。当你有很多相同的重复时，使用CSS是很棒的。然而，当你有一堆具有不同属性的不同元素时，这就成了一个问题。我的一个例子是当我在页面上定位元素时。每个元素作为不同的top和left属性。如果我把所有这些都放在一个CSS中，那会让我在html和css页面之间乱七八糟。所以当你想让每个元素都有相同的字体、颜色、悬停效果等时，CSS是很棒的。但是当所有元素都有不同的位置时，为每个元素添加一个CSS实例可能真的是一件痛苦的事情。这只是我的观点。当你必须挖掘代码时，CSS在大型应用程序中确实有很大的相关性。使用Mozilla+web开发人员插件，它将帮助您找到元素it和类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066585|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Code how you like to code, but if you are passing it on to someone else it is best to use what everyone else does. There are reasons for CSS, then there are reasons for inline. I use both, because it is just easier for me. Using CSS is wonderful when you have a lot of the same repetition. However, when you have a bunch of different elements with different properties then that becomes a problem. One instance for me is when I am positioning elements on a page. Each element as a different top and left property. If I put that all in a CSS that would really annoy the mess out of me going between the html and css page. So CSS is great when you want everything to have the same font, color, hover effect, etc. But when everything has a different position adding a CSS instance for each element can really be a pain. That is just my opinion though. CSS really has great relevance in larger applications when your having to dig through code. Use Mozilla web developer plugin and it will help you find the elements IDs and Classes.

blocks|key|1066652|text|这只适用于手写代码。如果你生成代码，我认为时不时地使用内联样式是可以的，特别是在元素和控件需要特殊处理的情况下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066653|对于手写代码来说，DRY是一个很好的概念，但在机器生成的代码中，我选择了“迪米特定律”：“属于一起的，必须留在一起”。与在不同的“远程”CSS文件中再次编辑全局样式相比，操作生成样式标记的代码要容易得多。|1066654|你的问题的答案是:这取决于...|1066655|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

This only applies to handwritten code. If you generate code, I think that it's okay to use inline styles here and then, especially in cases where elements and controls need special treatment.

DRY is a good concept for handwritten code, but in machine-generated code, I opt for "Law of Demeter": "What belongs together, must stay together". It's easier to manipulate code that generates Style tags than to edit a global style a second time in a different and "remote" CSS file.

The answer to your question: it depends...

blocks|key|1066744|text|尽管我完全同意上面给出的所有答案，在一个单独的文件中编写CSS总是更好的代码可重用性，可维护性，更好的关注点分离在许多情况下，人们更喜欢在他们的生产代码中内联CSS+-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1066745|外部CSS文件会导致对浏览器的额外HTTP调用，从而导致额外的延迟。相反，如果CSS是内联插入的，那么浏览器就可以立即开始解析它。尤其是在SSL上，HTTP调用的成本更高，并且会增加页面的额外延迟。有许多工具可以通过将外部CSS文件作为内联代码插入来帮助生成静态HTML页面(或页面片段)。这些工具用于生成生产二进制文件的构建和发布阶段。通过这种方式，我们可以获得外部CSS的所有优点，同时页面也会变得更快。|1066746|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Even though I totally agree with all the answers given above that writing CSS in a separate file is always better from code reusability, maintainability, better separation of concerns there are many scenarios where people prefer inline CSS in their production code - 

The external CSS file causes one extra HTTP call to browser and thus additional latency. Instead if the CSS is inserted inline then browser can start parsing it right away. Especially over SSL HTTP calls are more costly and adds up additional latency to the page. There are many tools available that helps to generate static HTML pages (or page snippet) by inserting external CSS files as inline code. These tools are used at the Build and Release phase where the production binary is generated. This way we get all the advantages of external CSS and also the page becomes faster.

blocks|key|1281568|text|使用内联样式违反了关注点分离原则，因为您实际上在同一源文件中混合了标记和样式。在大多数情况下，它还违反了DRY+(不要重复自己)原则，因为它们只适用于单个元素，而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展！)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1281569|此外，如果您的站点包含脚本，则明智地使用类是有益的。例如，JQuery等几个流行的JavaScript库在很大程度上依赖于类作为选择器。|1281570|最后，使用类增加了DOM的清晰度，因为您可以有效地使用描述符来告诉您其中的给定节点是哪种元素。例如：|1281571|<div+class="header-row">It's+a+row!</div>|code-block|syntax|javascript|1281572|比:更有表现力：|1281573|<div+style="height:+80px;+width:+100%25;">It's...something?</div>|1281574|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Using inline styles violates the Separation of Concerns principle, as you are effectively mixing markup and style in the same source file. It also, in most cases, violates the DRY (Don't Repeat Yourself) principle since they are only applicable to a single element, whereas a class can be applied to several of them (and even be extended through the magic of CSS rules!).

Furthermore, judicious use of classes is beneficial if your site contains scripting. For example, several popular JavaScript libs such as JQuery depend heavily on classes as selectors.

Finally, using classes adds additional clarity to your DOM, since you effectively have descriptors telling you what kind of element a given node in it is. For example:

<pre><code>&lt;div class="header-row"&gt;It's a row!&lt;/div&gt;
</code></pre>

Is a lot more expressive than:

<pre><code>&lt;div style="height: 80px; width: 100%;"&gt;It's...something?&lt;/div&gt;
</code></pre>

blocks|key|1281625|text|页面内css是目前流行的东西，因为Google认为它提供了比从单独文件加载的css更好的用户体验。一种可能的解决方案是将css放在一个文本文件中，使用php动态加载它，并将其输出到文档头。在<head>部分中包含以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1281626|<head>+...

<?php
$codestring+=+file_get_contents("styles/style1.txt");
echo+"<style>"+.+$codestring+.+"</style>";
?>

...+</head>|code-block|syntax|javascript|1281627|将所需的css放在样式/style1.txt中，它将在文档的<head>部分中显示出来。通过这种方式，您将拥有页面内的css，并受益于使用样式模板style1.txt，该模板可由任何页面共享，允许仅通过一个文件进行站点范围内的样式更改。此外，这种方法不需要浏览器向服务器请求单独的css文件(因此最小化了检索/渲染时间)，因为所有内容都是由php一次性提供的。|1281628|实现了这一点后，可以在需要的地方手动编写单独的一次性样式。|1281629|entityMap^0|2N|6|0|0|U|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

In-page css is the in-thing at the moment because Google rates it as giving a better user experience than css loaded from a separate file. A possible solution is to put the css in a text file, load it on the fly with php, and output it into the document head. In the <code>&lt;head&gt;</code> section include this:

<pre><code>&lt;head&gt; ...

&lt;?php
$codestring = file_get_contents("styles/style1.txt");
echo "&lt;style&gt;" . $codestring . "&lt;/style&gt;";
?&gt;

... &lt;/head&gt;
</code></pre>

Put the required css in styles/style1.txt and it'll get spat out in the <code>&lt;head&gt;</code> section of your document. This way, you'll have in-page css with the benefit of using a style template, style1.txt, which can be shared by any and all pages, allowing site-wide style changes to be made via only that one file. Furthermore, this method doesn't require the browser to request separate css files from the server (thus minimising retrieval / rendering time), since everything is delivered at once by php.

Having implemented this, individual one-time-only styles can be manually coded where needed.

blocks|key|1067046|text|内联CSS很适合机器生成的代码，当大多数访问者只浏览站点上的一个页面时，它可以很好，但它不能做的一件事是处理媒体查询，以允许不同大小的屏幕有不同的外观。为此，您需要在外部样式表或内部样式标记中包含CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067047|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Inline CSS is good for machine-generated code, and can be fine when most visitors only browse one page on a site, but one thing it can't do is handle media queries to allow different looks for screens of different sizes. For that, you need to include the CSS either in an external style sheet or in an internal style tag.

blocks|key|1067116|text|除了其他答案之外，您不能以内联CSS中的伪类或伪元素为目标|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1067117|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In addition to other answers, you cant target the pseudo-classes or pseudo-elements in inline CSS

blocks|key|1282011|text|我们已经创建了一个模板驱动的工件生成器，它为任何类型的文本工件--+HTML、XML、计算机语言、非结构化文本、DSV等--提供了一个包含文件功能(例如，它非常适合在没有脚本的情况下处理常见的Web或手动页面的页眉和页脚)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1282012|一旦你有了它，并用它在你的"head“标签中提供了"style”标签，“分离关注点”的论点就消失了，取而代之的是“我们必须在每次更改模板后重新生成”和“我们必须根据模板生成的内容来调试模板”。从第一种获得预处理器的计算机语言(或者有人开始使用M4)开始，这些抱怨就一直存在。|1282013|总的来说，我们认为CSS文件或"style“标记的元化能力比元素级样式更清晰，也更不容易出错。但它确实需要一些专业的判断力，所以新手和散漫的头脑不需要费心。|1282014|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

We have created a template-driven artifact generator that provides an include file capability for any kind of text artifact -- HTML, XML, computer languages, unstructured text, DSV, etc. (E.g., it's great for handling common Web or manual page headers and footers without scripting.)
Once you have that and use it to provide &quot;style&quot; tags inside your &quot;head&quot; tag, the &quot;separation of concerns&quot; argument goes away, to be replaced by &quot;we have to regenerate after every change to the template&quot; and &quot;we have to debug the template from what it generates&quot;. Those gripes have been around since the first computer language to get a preprocessor (or someone started using M4).
On balance, we think the meta-izing capability of either a CSS file or &quot;style&quot; tags is cleaner and less error-prone than element-level styling. But it does require some professional judgment, so newbies and scatterbrains don't bother.

When I see website starter code and examples, the CSS is always in a separate file, named something like "main.css", "default.css", or "Site.css". However, when I'm coding up a page, I'm often tempted to throw the CSS in-line with a DOM element, such as by setting "float: right" on an image. I get the feeling that this is "bad coding", since it's so rarely done in examples.

I understand that if the style will be applied to multiple objects, it's wise to follow "Don't Repeat Yourself" (DRY) and assign it to a CSS class to be referenced by each element. However, if I won't be repeating the CSS on another element, why not in-line the CSS as I write the HTML?

The question: Is using in-line CSS considered bad, even if it will only be used on that element? If so, why?

Example (is this bad?):

<pre><code>&lt;img src="myimage.gif" style="float:right" /&gt;
</code></pre>

What's so bad about in-line CSS?

数据库

服务器

当我看到网站启动代码和示例时，CSS总是在一个单独的文件中，命名为"main.css“、"default.css”或"Site.css“。但是，当我编写页面时，我经常想使用DOM元素内联CSS，比如在图像上设置"float: right“。我感觉这是“糟糕的编码”，因为在示例中很少这样做。我知道，如果样式要应用于多个对...

问内联CSS有什么不好？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联CSS有什么不好？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联CSS有什么不好？
EN