HTML 内联样式

HTML 内联样式是一种使用 CSS 脚本语言对网页进行样式设置的方法，以及其他两种样式方法：内部样式和外部样式。此方法专门为网站或网页添加独特的样式。其语法为“

'，其中样式的精确代码后面的分号用于包含样式属性，如字体类型、字体颜色、边框、文本排列、背景等。它是任何网站的焦点，因为用户界面应该非常方便和友好。

语法

内联样式在外观和操作方面与 CSS 一样，但有一些基本的区别。它确实会直接影响在不使用选择器的情况下编写它们的标签。

在代码中包含内联样式的语法如下：

<h1 style="style code;"></h1>

在上述语法

中包含内联样式属性标签。其中 style 属性的工作方式与另一个 HTML 属性类似。在等号 = 之后，“引号”以 style 开头，其中包含该属性的样式值。内联样式代码不包含选择器或一对大括号。如果值后面没有使用分号，则此代码是不完整的。

通过使用内联样式，可以定义元素的样式，例如大小、字体、颜色、文本和图像的对齐方式、文本的背景颜色、边框、元素的轮廓、元素之间的空间以及许多其他样式代码。

您需要在分号之前包含内联的所有样式代码。

我们什么时候在 HTML 中使用内联样式？

开发人员主要在需要添加或强调用户易于理解的内容时在代码中使用内联样式。 HTML 电子邮件通常包含这种类型的样式代码，以在邮件正文中显示精美的内容，因为许多邮件程序限制

动态网站使用 JavaScript。在这种情况下，javascript代码通常允许用户向该元素添加内联样式。假设我们在代码中为

属性添加了内联样式；样式仅适用于该指定元素。但是我们在内部样式中添加的相同样式将应用于该文档的整个

。标签。所以使用特定属性的内联样式来赋予样式总是被视为有用的东西。

内联样式始终被认为是最高优先级。代码中的 style 属性包含一系列 CSS 属性和值对。

HTML 内联样式示例

下面是一些示例，演示了内联样式如何在 HTML 代码中工作，如下所示：

<h1 id="Inline-style-Example"> Inline style Example </h1>
<p style="text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;"> Inline style for paragraph</p>

示例#1

代码：

<h1 id="Types-of-style-in-HTML">Types of style in HTML </h1>

• HTML Inline CSS
• HTML Internal CSS
• HTML External CSS

HTML Inline style 

That some achieve great success is proof to all that others can achieve it s well

The hurdles in between the goals are actually the tonics to boost you up with more energy

Home Cinema Projectors

Imagine your favorite movie in true cinematic detail. From 4k to Full HD, create a real movie theatre feel at home.

While our 3D projectors bring the action to the life with incredible impact and depth of field

输出：

示例#2

代码：

<h2 id="Indian-Culture">Indian Culture</h2>
<img  src="/static/imghwm/default1.png" data-src="kids.png" class="lazy"   style="max-width:90%" alt="HTML 内联样式" >
<p style="background-color:aquamarine ;">
India is known in all over world for its unique culture. It has one of the oldest culture which is 4500 years ago. India is famous for the <i style="font-size: 20px; color:darkorange;">Invention of Zero </i> in Mathematics , advance in architecture like <i style="font-size: 20px; color:white;">Taj Mahal</i> , for in <i style="font-size: 20px; color: green;">  Ayurveda  </i> . It is nation of more than 1.2  billion people, Which is known as second most nation in population comes after China.
<br>
Indian culture is famous in the form of different food, Language, religion and arts are the key aspects of it. India is the country made up with combination of 28 states as well as 7 territories. Those having different cultures, different languages, different festivals, variety in clothing style, architure and art , state wise different delicious  food and many more things
</p>

输出：

示例 #3

代码：

<h2 id="Famous-food-across-world">Famous food across      world</h2>
<p> <b>India</b> -Paneer ButterMasala, Dal-batti and many more.In drinks Tea, Old Monk rum</p>
<p> <b>Italy</b> - for Pizza, Pasata and more.In drinks Red Wine, Sparkling wine</p>
<p> <b>Greece</b> - Greek salad, Mousaka and In drinks ouzo, tsipouro</p>
<p> <b>China</b> - Noodles, Soy puff  and many  more.In drinks Tea, Chinese beer</p>
<p> <b>Mexico</b> - Chili con carne, Guacamole .In drinks Tea, Old Monk rum</p>

输出：

结论

从以上信息中，我们了解到内联样式是通过使用 style 属性来显示特定元素的唯一 CSS 代码。当用户想要显示一些也需要在代码中显示的重要数据时，此时，对于特定元素，我们将在本文档中使用内联样式。

以上是HTML 内联样式的详细内容。更多信息请关注PHP中文网其他相关文章！