Talk about dry goods today-about the source of CSS styles
Style source
There are 5 sources of CSS styles, they are browser default style\color{#FF3030}{browser default style}Liu view is the default recognition sample type ,the user style \ color {# FF3030} {} style userA user sample type ,link style \ color {# FF3030} {} link styleLink connection comp formula (css in a separate file linked by the link element of the src attribute to the html document),embedded style \ color {# FF3030} {} embedded styleEmbedded into comp formula (in style elements),inline style \ color {# FF3030} {} inline styleLine the samples of formula (acting element to be positioned. 1style attribute).
Note: The embedded style is located in the style element, and the inline style is located in the style attribute of the element to be used.
Browser default style
Under normal circumstances, even if we don’t add any styles to the HTML document, the browser can successfully render the em element whose font-style is italic (italic) and the strong element whose font-weight is bold (bold) . This is browsing The effect of the default style of the device.
<em>em</em>
<strong>strong</strong>
Em element and strong element display effect
em element style
strong element style
There are two browser's default style article summary browser's default style summary , the User Agent Style Sheets: Basics and the Samples .
This is the user agent stylesheet for em elements and strong elements I found from User Agent Style Sheets: Basics and Samples > Chrome (latest) :
Em element style in user agent stylesheet
Strong element style in user agent stylesheet
User style
This may be the one with the least contact among the 5 style sources. Due to limited space, here are only two examples.
Modification of user style in Chrome
Regarding Chrome modification of user styles, I have searched for a long time on both Baidu and Google. The most discussed is about C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom .css modification scheme, but this modification scheme does not take effect on my win10 and win7 Chrome (85.0.4183.83 (official version) (64-bit)), so I am here to use the User CSS plug-in to modify the method.
Note that the User CSS plug-in does not work on the file protocol file. You can use npx http-server to start a local server first, and then use the http protocol for access.
As shown in the figure:
Use the User CSS plug-in to modify the em element style so that its font-weight attribute is consistent with the strong element.
Modification of User Style in FireFox
Regarding FireFox modifying user style:
Step 1: Enter about:support in the address box;
Step 2: Find the configuration folder and click to open the folder on the right;
Step 3: Create a new chrome 2 folder, and create userChrome in it. css and userContent.css files and add the required styles;
(If the version of Firefox is before 69+, skip the fourth and fifth steps)
Step 4: Enter about:config in the address box , press Enter, choose to accept the risk and Continue;
Step 5: Search toolkit.legacyUserProfileCustomizations.stylesheets and set it to true;
Step 6: Restart Firefox;
figure 1:
Figure 2:
Figure 3:
Supplementary note
Regarding the modification of the two user styles, there is a difference. The modification of Firefox will not overwrite the embedded style, but using the User CSS plug- in in Chrome will overwrite the embedded style.
In userChrome.css and userContent.css file and add the following styles:
em {
font-weight: bold;
}
Use npx http-server to open the local server and open the test.html file. The content of the file is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>test</title>
<style type="text/css">
em {
font-weight: normal;
}
</style>
</head>
<body>
<em>em</em>
<br>
<strong>strong</strong>
</body>
</html>
The effect is as follows:
From the figure, we can clearly see that the embedded style covers the style in the userContent.css file.
And when we use the same test.html file, use the User CSS plug-in to modify the style of the em element :
em {
font-weight: bold;
}
Finally, we can find that the styles in the User CSS plug-in cover the embedded styles in test.html.
The effect is as follows:
This does not comply with the rule that the priority of user styles is lower than that of embedded styles. It can be concluded that the User CSS plug-in modifies not user styles .
Note: After searching, it is found that the ChromeV33 version is not allowed to modify the user style sheet. 3
Link style
Create a new test.css file with the following content:
em {
color: red;
font-weight: normal;
}
In test.css create the same directory under the file test.html file, as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>test</title>
<link rel="stylesheet" href="./test.css" type="text/css"/>
</head>
<body>
<em>em</em>
<br>
<strong>strong</strong>
</body>
</html>
The effect is as follows:
It can be seen that the link style can override the user style.
Embedded style
Change test.html on the basis of the link style , and the content after the change is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>test</title>
<link rel="stylesheet" href="./test.css" type="text/css"/>
<style type="text/css">
em {
color : red;
}
</style>
</head>
<body>
<em>em</em>
<br>
<strong>strong</strong>
</body>
</html>
The effect is shown in the figure:
from it, you can know the embedded style> link style (test.css)> user style> browser default style .
Modify test.html again , the modified content is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>test</title>
<style type="text/css">
em {
color : red;
}
</style>
<link rel="stylesheet" href="./test.css" type="text/css"/>
</head>
<body>
<em>em</em>
<br>
<strong>strong</strong>
</body>
</html>
The effect is shown in the figure:
we have the effect of link style (test.css)> embedded style> user style> browser default style . From this, we can know that the priority of link style and embedded style is determined by their nodes in the dom tree. The position is determined, the later the higher the priority .
Inline style
Change test.html on the basis of the link style , and the content after the change is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>test</title>
<style type="text/css">
em {
color : red;
}
</style>
<link rel="stylesheet" href="./test.css" type="text/css"/>
</head>
<body>
<em style="color: green;">em</em>
<br>
<strong>strong</strong>
</body>
</html>
The effect is shown in the figure:
we get the effect of inline style> link style (test.css)> embedded style> user style> browser default style .
Summary of style sources
Inline styles, embedded styles, link styles, user styles, browser default styles that five kinds of styles sources , the inline style highest priority, link styles and embedded style priorities determined by their position nodes in dom tree, more to the The higher the priority, the lower is the user style, and the lowest is the browser default style .
As shown in the figure:
reference
- [1] From good to see and easy to use, customize your own Firefox browser
- [2] Add a user style sheet for the browser
- [3] User CSS
- [4] Summary of browser default styles
- [5] User Agent Style Sheets: Basics and Samples
There may be such a situation, such as adding font-size to the style attribute of div, but font-size does not affect the div (not considering the combination of attributes such as: before: after content), but acts on the p element in the div , But the p element in the div is also part of the div, so it is called acting on the div. ↩︎
The word Chrome refers to the user interface of the browser and is also the origin of the name of the Google Chrome browser. Therefore, the chrome here has nothing to do with the Google Chrome browser. Source: https://zhuanlan.zhihu.com/p/104901539 . ↩︎
Source: https://blog.csdn.net/u010281174/article/details/52145291 . ↩︎