Home >Web Front-end >Front-end Q&A >The difference between css external linking and inline embedding
The differences between css external linking and inline embedding are: 1. The writing methods of the three styles are different; 2. The three methods have different weight priorities in actual use. The order from high to low is "Embedding> ;Inline>Outline".
#The operating environment of this tutorial: Windows 7 system, Dell G3 computer, CSS3 version.
What is the difference between external, inline and embedded css?
First of all, from a functional point of view, the functions of these three implementations are the same, and they can all achieve the typesetting and modification of content.
However, in terms of writing, they are different. Let’s distinguish them one by one:
1, inline style writing
<p style="color:red;"></p>
2, external style writing
Write a separate file with css extension, and then use the 2cdf5bf648cf2f33323966d7f58a7f3f tag in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 to link the css style to html. For example:
<link href="你的css文件地址" rel="stylesheet" type="text/css"></link>
3, nested style writing
can be understood as nesting. Now write the required element tags in the 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 text, such as span, and then write a separate css style in 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1. For example:
<head>
<style type="text/css">
span{color:re;}
</style>
</head>Differences in priorities (Recommended: css video tutorial)
In actual use of the three methods, weight takes priority From high to low: embedded>inline>outline. More general styles are suitable to be isolated and used externally to improve reusability and reduce the coupling between styles and content; styles with few independent elements can be more convenient to use embedded.
The above is the detailed content of The difference between css external linking and inline embedding. For more information, please follow other related articles on the PHP Chinese website!