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 withclass="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 aclass 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!
![The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
