Home > Article > Web Front-end > What are the types of css style sheets that automatically take effect?

What are the types of css style sheets that automatically take effect?

下次还敢Original: 2024-04-25 17:54:131155browse

There are five ways for CSS style sheets to automatically take effect: 1. Direct inline styles; 2. Internal style sheets; 3. External style sheets; 4. Attribute selectors; 5. JavaScript.

Several ways for CSS style sheets to automatically take effect

There are several ways for CSS style sheets to automatically take effect:

1. Direct inline style

Inline style is written directly in the <style> tag of the HTML element. It is only effective for the element that contains it and takes precedence over other styles.

<code class="html"><p style="color: red; font-size: 20px;">一些文本</p></code>

2. Internal style sheet

The internal style sheet is written in the <style># inside the tag. ## tag. It is effective for the entire page and takes precedence over external style sheets.

<code class="html"><head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head></code>

3. External style sheet

The external style sheet is an independent file, and its file name has the extension

.css. Link it to the HTML page via the tag. Has lower priority than internal style sheets.

<code class="html"><head>
  <link rel="stylesheet" href="style.css">
</head></code>

4. Attribute selector

Attribute selector matches elements with specific attributes. When an element has this attribute, the style will automatically take effect. For example, the following style will apply red text to all elements with

class="important":

<code class="css">[class="important"] {
  color: red;
}</code>

5. JavaScript

Using JavaScript CSS styles can be applied dynamically. For example, the following code will add a

class to the element, making its text red:

<code class="javascript">document.getElementById("myElement").classList.add("important");</code>

The above is the detailed content of What are the types of css style sheets that automatically take effect?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html class 选择器样式表

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：What are the commonly used css styles?Next article：What are the commonly used css styles?

See more

What are the types of css style sheets that automatically take effect?

Related articles