Home > Article > Web Front-end > What is the inline style of css

What is the inline style of css

青灯夜游Original: 2022-08-01 16:34:286839browse

In CSS, inline style, also known as inline style, is to directly set the CSS style of the element through the style attribute inside the HTML tag. The syntax "". Inline styles will overwrite the same style effects of other introduction methods; it is difficult for multiple elements to share styles, which is not conducive to code reuse; HTML and CSS codes are mixed, which is not conducive to programmers and search engines.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Inline style, also known as inline style, is to put the CSS style directly in the tag within the line of code, usually in the style attribute of the tag; that is, it is set directly through the style attribute inside the HTML tag The CSS style of the element. Since inline styles are inserted directly into tags, they are the most direct way, and they are also the least convenient to modify.

Syntax:

<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

For example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p style="color: red;font-size: 30px;">我是一个段落</p>
    </body>
</html>

What is the inline style of css

In the above example, the inline style is determined by the style attribute of the HTML element, Just put the CSS code within quotes, and separate multiple CSS property values by semicolons

<p style="color: red;font-size: 30px;">我是一个段落</p>

Advantages of inline styles:

Without the style sheet file, efficiency can be improved at certain times;
The style effect using the style attribute will be the strongest and will be overwritten. Same style effect as other introduction methods.

Disadvantages of inline styles:

##It is difficult to share styles with multiple elements, which is not conducive to code reuse;
HTML and CSS codes are mixed, which is not conducive to reading by programmers and search engines.

In short, although inline styles are simple to write, the following defects can be found through examples:

Every tag needs to be styled Add style attribute.
The difference from the past when web page makers mixed HTML tags and styles together is that inline styles are now written through CSS, and HTML tag attributes were used in the past. Although the methods are different, the style effect is the same: the later maintenance cost is high, that is, when modifying the page, you need to open each page of the website one by one and modify it one by one, and you cannot see the role of CSS at all.
Adding so many inline styles will make the page large. If the portal is written in this way, it will waste server bandwidth and traffic.

Some web pages on the Internet can see this way of writing by looking at the source file. Although only part of a web page is done this way, it needs to be differentiated according to the situation:

If the web page author writes such an inline style, he can quickly change the current style without considering the conflict of previously written styles;
If this situation exists in the web page, When editing in the background, the styles are generated through the editor, or the background is not fully developed. It is necessary to develop options for editors to select styles instead of directly changing the color, thickness, background color, tilt and other effects through the editor.

(Learning video sharing:

Getting started with web front-end)

The above is the detailed content of What is the inline style of css. 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

Previous article：How to remove html5 attributes in jqNext article：How to remove html5 attributes in jq

See more

What is the inline style of css

Related articles