html内部样式和外部样式_HTML样式

html内部样式和外部样式

HTML样式属性 (HTML style Attribute)

The HTML style attribute is used to add some style or add some changes to the text in HTML. Style is adding some additional settings to make it look different from ordinary text.

HTML样式属性用于添加样式或对HTML中的文本进行一些更改。 样式添加了一些其他设置,以使其看起来与普通文本不同。

In HTML the style attribute takes care of styling elements.

在HTML中, style属性负责样式元素。

Syntax:

句法:

<tag style= "property1:value; property2:value; property3:value;.. "/>

This will add CSS you will learn to your tag for styling it.

这会将您将学习CSS添加到标签样式中。

You will learn about styles and CSS tags in CSS Tutorials. Here, we will cover only some of these styles by changing some text and web pages.

您将在CSS教程中了解样式和CSS标签。 在这里,我们将通过更改一些文本和网页来仅介绍其中一些样式。

更改HTML中文本的字体 (Changing font of text in HTML)

The font-family property is used to change the font of text specified by the tag.

font-family属性用于更改标签指定的文本的字体。

Example:

例:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:courier;">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

输出量

HTML Styles | Example 1

更改HTML中的文本大小 (Changing text size in HTML)

The font-size property is used to change the size of text specified by the tag.

font-size属性用于更改标签指定的文本大小。

Example:

例:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:courier;font-size:50px">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

输出量

HTML Styles | Example 2

更改HTML中的文本颜色 (Changing text color in HTML)

The color property is used to change the color of text specified by the tag.

color属性用于更改标签指定的文本的颜色。

Example:

例:

<!DOCTYPE html>

<html>

<body>
    <p style="font-family:'Monotype Corsiva';font-size:50px;color:#006969">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

输出量

HTML Styles | Example 3

在HTML中更改背景颜色 (Changing background color in HTML)

The background-color property is used to specify background color of the tag.

background-color属性用于指定标签的背景色。

Example:

例:

<!DOCTYPE html>

<html>

<body>
    <p style="font-size:50px;color:#006969;background-color:#00f400">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

输出量

HTML Styles | Example 4

更改HTML中文本的对齐方式 (Changing alignment of text in HTML)

The text-align property is used to change the size of text specified by the tag.

text-align属性用于更改标签指定的文本大小。

Example:

例:

<!DOCTYPE html>

<html>

<body>
    <p style="font-size:50px;color:#006969;background-color:#00f400;text-align:center;">
        I love to learn programming from Include Help
    </p>
</body>

</html>

Output

输出量

HTML Styles | Example 5

翻译自: https://www.includehelp.com/html/styles.aspx

html内部样式和外部样式

当我们使用HTML来构建网页时,可以通过内部样式外部样式来定义和应用样式。 1. 内部样式(Internal Style): 内部样式是直接写在HTML文档的`<style>`标签中的样式规则。它适用于当前HTML文档中的所有元素。可以在`<head>`标签内使用`<style>`标签来定义内部样式,如下所示: ```html <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: red; } </style> </head> <body> <h1>Hello, World!</h1> <p>This is a paragraph.</p> </body> </html> ``` 在上面的例子中,`<style>`标签内定义了两个样式规则,分别是`body`和`h1`。`body`规则设置了背景颜色为浅蓝色,`h1`规则设置了文字颜色为红色。 2. 外部样式(External Style): 外部样式是将样式规则写在一个独立的CSS文件中,然后通过`<link>`标签将CSS文件链接到HTML文档中。这样可以在多个HTML文档中共享同一个样式文件。下面是一个外部样式的例子: 首先,创建一个名为`styles.css`的CSS文件,内容如下: ```css body { background-color: lightblue; } h1 { color: red; } ``` 然后,在HTML文档的`<head>`标签内使用`<link>`标签来引入外部样式文件,如下所示: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Hello, World!</h1> <p>This is a paragraph.</p> </body> </html> ``` 在上面的例子中,`<link>`标签的`href`属性指定了外部样式文件的路径,这里是`styles.css`。这样,HTML文档就会应用`styles.css`中定义的样式规则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值