HTML 内联样式-html教程-PHP中文网

HTML 内联样式

PHPz

发布： 2024-09-04 16:47:12

原创

737 人浏览过

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

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

语法

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

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

<body>
<h1 style="style code;"></h1>
</body>
</h1>
<p>在上述语法</p>
<h1>中包含内联样式属性标签。其中 style 属性的工作方式与另一个 HTML 属性类似。在等号 = 之后，“引号”以 style 开头，其中包含该属性的样式值。内联样式代码不包含选择器或一对大括号。如果值后面没有使用分号，则此代码是不完整的。
</h1>
<p>通过使用内联样式，可以定义元素的样式，例如大小、字体、颜色、文本和图像的对齐方式、文本的背景颜色、边框、元素的轮廓、元素之间的空间以及许多其他样式代码。</p>
<p>您需要在分号之前包含内联的所有样式代码。</p>
<h3>我们什么时候在 HTML 中使用内联样式？</h3>
<p>开发人员主要在需要添加或强调用户易于理解的内容时在代码中使用内联样式。 HTML 电子邮件通常包含这种类型的样式代码，以在邮件正文中显示精美的内容，因为许多邮件程序限制 <style> 的使用。标签。因此，HTML 电子邮件大量使用内联样式。此外，内联样式还可以在旧网站、CMS 内容、动态内容和其他上下文中找到应用。</style></p>
<p>动态网站使用 JavaScript。在这种情况下，javascript代码通常允许用户向该元素添加内联样式。假设我们在代码中为</p>
<p>属性添加了内联样式；样式仅适用于该指定元素。但是我们在内部样式中添加的相同样式将应用于该文档的整个 </p>
<p> 。标签。所以使用特定属性的内联样式来赋予样式总是被视为有用的东西。</p>
<p>内联样式始终被认为是最高优先级。代码中的 style 属性包含一系列 CSS 属性和值对。</p>
<h3>HTML 内联样式示例</h3>
<p>下面是一些示例，演示了内联样式如何在 HTML 代码中工作，如下所示：</p>
<pre class="brush:php;toolbar:false"><h1 style="color:blue; font-family:Calibri; font-size:24px;"> Inline style Example </h1>
<p style="text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;"> Inline style for paragraph</p>
<body style="background-image: image.png; height: 500px; width:400px; ">

登录后复制

示例#1

代码：

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: aqua;">Types of style in HTML </h1>
<ul style="font-family:monospace; font-size: 16px; font-display: block;">
<li> HTML Inline CSS</li>
<li>HTML Internal CSS</li>
<li>HTML External CSS</li>
</ul>
<h1 style="color:darkblue; font-family: cursive;"> HTML Inline style  </h1>
<p><q style="color:coral;"><b> That some achieve great success is proof to all that others can achieve it s well</b></q>
</p>
<p style="font-family: fantasy; font-size: 20px;">The hurdles in between the <b style="font-family: cursive; color:red;">goals</b> are actually the tonics to boost you up with more energy</p>
<h3 style="font-family: cursive; color: darkturquoise;"> Home Cinema Projectors</h3>
<p  style="font-family: cursive;"> Imagine your favorite movie in true cinematic detail. From <b style="color:darkorchid;"> 4k to Full HD, </b>create a real movie theatre feel at home.</p><p> While our 3D projectors bring the action to the life with incredible impact and depth of field </p>
</body>
</html>

登录后复制

输出：

HTML 内联样式

示例#2

代码：

<!DOCTYPE html>
<html>
<body>
<h2 style="color:darkgoldenrod; font-family:Castellar; ">Indian Culture</h2>
<img src="kids.png" style="height:250px;; width:100%;" >
<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>
</body>
</html>

登录后复制

输出：

HTML 内联样式

示例 #3

代码：

<!DOCTYPE html>
<html>
<body style="border: 2px solid blue; padding:10px;">
<h2 style="color:deeppink; font-family:Castellar;">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>
</body>
</html>

登录后复制

输出：

HTML 内联样式