Detailed explanation on how to use the style attribute of HTML tags (with specific examples)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation on how to use the style attribute of HTML tags (with specific examples)

寻∝梦

Aug 27, 2018 pm 02:10 PM

htmlstyle

This article explains to you the definition and function of the style attribute of HTML tags, as well as examples of how to use the style attribute in HTML, and various style analysis of the style attribute in HTML tags. Let’s take a look at this article together

First of all, let’s introduce the definition of the style attribute of the HTML tag:

The style attribute specifies the inline style of the element. )

The style attribute will override any global style settings, such as those specified in the

HTML style attribute example

Using the style attribute in HTML documents:

<h1 id="This-nbsp-is-nbsp-a-nbsp-header">This is a header</h1>
<p style="color:red">This is a paragraph.</p>

The syntax of the style attribute in HTML tags:

<element style="value">

Attribute value of HTML tag style attribute:

style_definition: One or more CSS attributes and values separated by semicolons.

Various style analysis of the style attribute in HTML

1. The style attribute can set the font style (font-family:), font Size (font-size:), text color (color:), etc. It can be set in each different tag, or it can be set in a CSS style sheet. Because my articles are all written following http://www.codecademy.com, I have not introduced CSS yet, so I will not cover CSS here for the time being, just set it in the tag. , the following is the sample code and schematic diagram:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px">你好！！！！</p>
</body>
</html>

Note:

a) The browser I use is chrome, and when editing and displaying it, I always find that the set 10px font is not applied. Searching the chrome settings, I found that

is that the minimum font set in chrome is 12px, so the 10px font size is useless. Just change the minimum font of the chrome browser to a smaller size.

b) The assignment method in the style attribute is: attribute name: value, instead of the customary equal sign =. If the equal sign is used, the style effect will not be executed.

2. The background color can also be set in the style style

. The style contains the attribute background-color. Setting its color value can change the background color within the entire label range

The color specified for background-color. The following is the sample code and schematic diagram:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green">你好！！！！</p>
</body>
</html>

3. Text alignment

Some label attributes have the align attribute, which can set the text alignment and can also be set in style. Similar properties. The value of this attribute is text-align. Its values include left, center and right. The following is the sample code and schematic diagram:

<!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 id="Hello-nbsp-World">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green;text-align:right">你好！！！！</p>
</body>
</html>

Two specific usage examples of the style attribute of html:

<!DOCTYPE html>
<html>
     <head>
        <meta charset="utf-8">
        <title>练习使用HTML</title>
        <style>
            /*标签选择器*/
            h4 {
                color: blue;
                text-align: right;
            }
</style>
    </head>
     <body>
        <!--规定元素的行内样式-->
        <p style="color:red;text-align:center">测试html的style属性</p>
        <h4 id="h">h41</h4>
        <h4 id="h">h42</h4>
    </body>
 </html>

[Related recommendations from the editor]

html5 What is the role of the details tag?

Introduction to the use of tags (with usage examples)

html What is table?

How to use various attributes in the tag

The above is the detailed content of Detailed explanation on how to use the style attribute of HTML tags (with specific examples). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

element.style怎么修改Nov 24, 2023 am 11:15 AM

element.style修改元素的方法：1、修改元素的背景颜色；2、修改元素的字体大小；3、修改元素的边框样式；4、修改元素的字体样式；5、修改元素的水平对齐方式。详细介绍：1、修改元素的背景颜色，其语法为“document.getElementById("myElement").style.backgroundColor = "red";”；2、修改元素的字体大小等等。

react 怎么动态修改styleDec 28, 2022 am 10:44 AM

react动态修改style的方法：1、在需要修改样式的元素上添加ref，其语法如“<div className='scroll-title clear-fix' ref={ this.manage }>”；2、通过动态控制状态的变化修改元素的样式；3、通过在DOM中使用JS代码实现不同DOM的展示与隐藏转换。

Vue3 style中新增的特性有哪些及怎么用May 14, 2023 pm 10:52 PM

style新特性Vue3.2版本对单文件组件的style样式进行了很多升级，如局部样式、css变量以及样式暴露给模板使用等。（学习视频分享：vue视频教程）一、局部样式当标签带有scopedattribute的时候，它的CSS只会应用到当前组件的元素上：hi.example{color:red;}二、深度选择器处于scoped样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用:deep()这个伪类：.a:deep(.b){/*...*/}通过v-html创建的DOM内容不会被

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

Vue报错：无法正确使用v-bind绑定class和style，怎样解决？Aug 26, 2023 pm 10:58 PM

Vue报错：无法正确使用v-bind绑定class和style，怎样解决？在Vue开发中，我们经常会用到v-bind指令来动态绑定class和style，但是有时候我们可能会遇到一些问题，如无法正确使用v-bind绑定class和style。在本篇文章中，我将为你解释这个问题的原因，并提供解决方案。首先，让我们先了解一下v-bind指令。v-bind用于将V