Home >Web Front-end >CSS Tutorial >What types of CSS styles are there? Summary of three methods of css style sheet (with code)

What types of CSS styles are there? Summary of three methods of css style sheet (with code)

不言Original: 2018-08-02 16:52:098820browse

What are the types of css styles? css style code insertion forms can be basically divided into the following three types: inline, embedded and external. These three styles have priorities. Their priority is: inline > Embedded> External style, let’s take a look at the specific content and code of the three CSS style types.

Note: Embedded>External style has a prerequisite: the position of the embedded CSS style must be behind the external style. For example, in the right code editor, the f87a5964fcebb93d98ebca11ba9d357b code is in front of the 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 code (actually This is also written during development). Interested friends can try it, reverse their order, and see if their priorities change.

In fact, in general, it is the proximity principle (the closer to the element being set, the higher the priority).

But note that the priority summarized above has a premise: the css styles in inline, embedded, and external style sheets have the same weight.

1. css inline style sheet

css style sheet is to write css code directly in the existing HTML tag, such as the following code:

<p style="color:red">这里文字是红色。</p>

Be careful to write it in the start tag of the element. The following way of writing is wrong:

<p>这里文字是红色。</p style="color:red">

And the css style code must be written in double quotes. If there are multiple css style codes Settings can be written together, separated by semicolons. The following code:

<p style="color:red；font-size:12px">这里文字是红色。</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

2, css embedded style sheet

Embedded css style means that you can write the css style code in e3d5d1af3aac39b6826a89d5e42a6cf6531ac245ce3e4fe3d50054a55f265927 tags. For example, the following code sets the text in the three 45a2772a6b6107b401db3c9b82c049c2 tags to red:

<style type="text/css">
span{
color:red;
}
</style>

Embedded css styles must be written between c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927, and are generally embedded The css style is written between 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1. Such as the code in the editor on the right.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</html>

3. css external style sheet

External css style (also called external style) is to write the css code in a separate external file. This css style file has the extension name of ".css". Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag within the 93f0f5c25f18dab9d176bd4f6de5d30e (not within the c9ccee2e6ea535a969eb3f532ad9fe89 tag) to link the css style file to the HTML file. , such as the following code:

9077f4a95daff72256f1d56a7cc7db83

Note:

1. The css style file name is named with meaningful English letters, such as main.css.

2. rel="stylesheet" type="text/css" is a fixed writing method that cannot be modified.

3. The 2cdf5bf648cf2f33323966d7f58a7f3f tag position is generally written within the 93f0f5c25f18dab9d176bd4f6de5d30e tag.

index.html

<!DOCTYPE HTML>
<html>
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

style.css

span{
   color:red;
   font-size:20px;
}

What types of CSS styles are there? Summary of three methods of css style sheet (with code)

Related articles