html css 内联样式

You’ve written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this article is about.

您已经编写了一些HTML，现在需要使用CSS对其进行样式设置。一种方法是使用内联样式，这就是本文的目的。

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Before we jump into the nuances of inline styles—when, why, and how to use them—it’s important to be aware of the other ways to style your HTML. That way, you choose the best option for your code.

在深入介绍内联样式的细微差别(何时，为什么以及如何使用它们)之前，重要的是要知道其他样式化HTML的方式。这样，您可以为代码选择最佳选项。

Here’s a summary of your options.

这是您的选择的摘要。

外部样式表 (External Stylesheet)

Developers typically keep all of their CSS in an external stylesheet. In your HTML file, use the <link> element to link to your external stylesheet, which contains your CSS.

开发人员通常将所有CSS保留在外部样式表中。在HTML文件中，使用<link>元素链接到包含CSS的外部样式表。

<head><link rel="stylesheet" href="./index.css">
</head>

Inside the file, index.css, we have our CSS rules.

在文件index.css中，我们有CSS规则。

p {color: red;font-size: 20px;
}

内部样式表 (Internal stylesheet)

Another option for styling CSS is using an internal stylesheet. This means defining your CSS rules inside the <style> element in your HTML file.

CSS样式的另一种选择是使用内部样式表。这意味着在HTML文件的<style>元素内定义CSS规则。

<head>  <style>p {color: red;font-size: 20px;}</style></head>

内联样式 (Inline Styles)

Less frequently, you’ll find yourself reaching for inline styles. But they’re still important to know about because there are certain occasions when they come in handy.

不太频繁，您会发现自己喜欢内联样式。但是了解它们仍然很重要，因为在某些情况下它们派上用场。

With inline styles, you’ll add the style attribute to an HTML tag followed by your CSS to style an element.

使用内联样式，您将添加样式属性设置为HTML标记，然后使用CSS设置元素样式。

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>

So in our case, the text of the first paragraph is red with a font-size of 20px. The second one, however, remains unchanged.

因此，在本例中，第一段的文本为红色，字体大小为20px。但是，第二个保持不变。

Let’s take a closer look at how and when to use inline styles. We'll also uncover why only one of our paragraphs is styled.

让我们仔细看看如何以及何时使用内联样式。我们还将揭示为什么只有一个段落被设置样式。

什么是HTML标签？ (What’s an HTML Tag?)

With inline styles, you apply CSS to the style attribute in the opening HTML tag.

使用内联样式，可以将CSS应用于开始HTML标记中的style属性。

Examples of HTML tags include:

HTML标签的示例包括：

<body>...</body><body> ... </ body>
<h1>...</h1><h1> ... </ h1>
<p>...</p><p> ... </ p>

Opening and closing tags are often part of the HTML element, which can contain text, data, an image, or nothing at all.

打开和关闭标签通常是HTML 元素的一部分，它可以包含文本，数据，图像或完全不包含任何内容。

Here, we have an element of text.

在这里，我们有一个文本元素。

<p>This is my first paragraph.</p>

We can use inline styles to style this element by adding the style attribute to the opening tag, followed by CSS property-value pairs.

我们可以使用内联样式来对此元素进行样式设置，方法是将样式属性添加到开始标记中，然后添加CSS属性-值对。

<body><p style="color: red; font-size: 20px;">This is my first paragraph.</p><p>This is my second paragraph.</p>
</body>

Let’s walk through how we used inline styles.

让我们逐步介绍如何使用内联样式。

如何使用内联样式 (How to Use Inline Styles)

Add the style attribute to the tag you want to style, followed by an equals sign. Start and end your CSS with double quotation marks.

添加 style属性要标记的样式，后跟等号。用双引号开始和结束CSS。

<p style="....">

Add property-value pairs to the style attribute. Add a semicolon after each property-value pair.

将属性值对添加到样式属性。在每个属性/值对之后添加分号。

color: red; font-size: 20px;

So when we put everything together, it looks like this:

因此，当我们将所有内容放在一起时，它看起来像这样：

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

要知道的要点 (Key Points to Know)

Unlike internal and external stylesheets, inline styles don’t contain curly braces or line breaks. That is, write your CSS all on the same line when using inline styles.

与内部和外部样式表不同，嵌入式样式不包含大括号或换行符。也就是说，使用内联样式时，请将CSS全部写在同一行上。

Also, keep in mind that inline styles only affect the specific element that you add the style attribute with CSS property-value pairs to.

另外，请记住，内联样式只会影响将样式属性与CSS属性-值对一起添加到的特定元素。

For example, in the code below only the first paragraph is styled red with a font-size of 20px.

例如，在下面的代码中，只有第一段的字体样式为红色，字体大小为20px。

<body><p style="color: red; font-size: 20px;">This is my first paragraph.</p><p>This is my second paragraph.</p>
</body>

If we want to style the text of both paragraphs with inline styles, then we need to add CSS to the style attribute to the second <p> as well.

如果要使用内联样式对两个段落的文本进行样式设置，则还需要在第二个<p>的style属性中添加CSS。

<body><p style="color: red; font-size: 20px;">This is my first paragraph.</p><p style="color: red; font-size: 20px;">This is my second paragraph.</p>
</body>

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

但是，例如，如果我们使用外部样式表，则可以轻松地为两个段落设置样式，而无需使用单个CSS选择器来复制代码。

p {color: red;font-size: 20px;
}

This brings us to an important topic: when to use and when not to use inline styles.

这给我们带来了一个重要的话题：何时使用和何时不使用内联样式。

何时使用(何时不使用)内联样式 (When to Use (and when NOT to use) Inline Styles)

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

假设您有一个包含十个或更多段落标签HTML文件。您能想象使用嵌入式样式分别为每个样式设置样式吗？

Doing so will quickly clutter your code, making it hard to read and maintain.

这样做会Swift使您的代码混乱，使其难以阅读和维护。

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

此外，如果您还使用内部或外部样式表，则内联样式可能会引起特殊性问题。

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

这是因为内联样式具有很高的特异性。这意味着它们将覆盖内部和外部样式表中的大多数其他规则，但!important声明除外。

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

例如，我们向两个段落元素添加了内联样式。我们还添加了一个内部样式表。

<html><head><title>My New Webpage</title><style>p {color: pink;}</style></head><body><p style="color: blue;">A blue paragraph.</p><p style="color: blue;">Another blue paragraph.</p>
</body>
</html>

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

我们内联样式中CSS会覆盖内部样式表中CSS。因此，我们最后有两个蓝色的段落。

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

当您或其他人需要进行更改时，外部样式表也更易于维护。这是因为来自外部或内部样式表的样式可以应用于多个元素，而内联样式则必须分别应用于每个元素。

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

例如，假设您需要将样式更新为十个元素。在外部样式表中进行一次更改比较容易，而不是在HTML文件中进行十次不同的更改。

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

通常，通常最好的做法是将CSS放入单独的文件中。这样，您HTML文件将包含网站的结构和内容，而CSS文件将包含样式。这样做使您的代码更易于阅读和管理。

However, there are times when it may make sense to use inline styles:

但是，有时候使用内联样式可能有意义：

Add a style and see the change quickly, which can be useful for testing.

添加样式并快速查看更改，这对测试很有用。
Use the style attribute in JavaScript to apply styling.使用JavaScript中的style属性来应用样式。

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

大多数时候，您会想使用外部样式表。但是您偶尔会发现自己使用内联样式，最常见的情况是上述情况。

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.

我在amymhaddad.com的博客上写了关于学习编程的知识，以及进行编程的最佳方法。

翻译自: https://www.freecodecamp.org/news/inline-css-guide-how-to-style-an-html-tag-directly/

html css 内联样式

html css 内联样式_内联CSS指南–如何直接设置HTML标签的样式相关推荐

css链接样式_如何在CSS中设置链接样式
css链接样式样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...
c ++内联函数_内联MHTML +数据URI
c ++内联函数 MHTML and Data URIs in the same CSS file is totally doable and gives us nice support for IE ...
mysql 内联函数_内联函数 - freeboy小亮 - 博客园
(1)什么是内联函数? 内联函数是指那些定义在类体内的成员函数,即该函数的函数体放在类体内. (2)为什么要引入内联函数? 当然,引入内联函数的主要目的是:解决程序中函数调用的效率问题.另外,前面我们 ...
java内联函数_Java之内联函数_内联函数的优缺点
描述内联函数 1.内联函数就是指函数在被调用的地方直接展开,编译器在调用时不用像一般函数那样,参数压栈,返回时参数出栈以及资源释放等,这样提高了程序执行速度. 2.Java语言中有一个关键字fina ...
bootstrap起步全局css样式概览全局css样式_栅格全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
内置对象和内置函数_内置假对象
内置对象和内置函数尽管模拟对象是进行单元测试的理想工具,但通过模拟框架进行模拟可能会将您的单元测试变成难以维护的混乱. 这种复杂性的根本原因是我们的对象太大. 他们有很多方法,这些方法返回其他对象, ...
xml不显示css样式_如何使用CSS显示XML？
xml不显示css样式 Introduction: 介绍: You must be aware of the term XML and must have dealt with these vario ...
css左右布局代码_如何使用CSS位置来布局网站（带有示例代码）
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
css 文本背景色透明_如何使用CSS将文本或图像的背景设置为透明？
css 文本背景色透明 Introduction: 介绍: In web development, there are numerous ways by which we can style our ...

html css 内联样式_内联CSS指南–如何直接设置HTML标签的样式