Technology Sharing

Three ways to use CSS in a page: inline style, embedded style sheet, and linked style sheet

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

There are three ways to use CSS styles in a page: inline styles, embedded style sheets, and linked style sheets.

1. Inline styles

Inline styles are a more direct style, defined directly in HTML tags and implemented through style attributes. This method is easier to learn, but less flexible.

【Example】Apply inline styles to control the page.

  1. <!-- 在页面元素中定义CSS样式 -->
  2. <p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
  3. <p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
  4. <p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
  5. <p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Results of the:

2. Embedded style sheets

An embedded style sheet is one that uses <style>...</style> The tag includes the CSS style in the page. The embedded style sheet is not as direct as the inline style, but the page will be more regular.

【Example】Use inline style sheets to style your pages.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.     
  8.     <!-- 内嵌式样式表 -->
  9.     <style type="text/css">
  10.         h1, h2, h3{
  11.             font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
  12.             color: blue; /*文字颜色*/
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <h1>大风起兮云飞扬</h1>
  18.     <h2>威加海内兮归故乡</h2>
  19.     <h3>安得猛士兮守四方</h3>
  20. </body>
  21. </html>

Results of the:

3. Linked Style Sheets

Linking an external CSS style sheet is the most common way to reference a style sheet. First, define the CSS style in a separate file, and then use it in the HTML page.<link> Tags are used to reference them, which is the most effective way to use CSS styles.

<link>The grammatical structure of a tag is as follows:

<link rel='stylesheet' href='path' type='text/css'>

rel: The relationship between the external document and the calling document.

href: The absolute or relative path to the CSS document.

type: MIME type of the external file

【Example】Reference CSS styles in the page.

(1) Create a css directory, and then create a css.css style file in the directory.

  1. /*定义CSS样式 */
  2. h1,h2,h3{								
  3.     color:#6CFF;
  4.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  5. }
  6.  
  7. p{
  8.     color:#F0CC;	/*定义颜色*/
  9.     font-weight:200;
  10.     font-size:24px;	 /*设置字体大小*/
  11. }

(2) In the page<link> The tag introduces the CSS style file into the page.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.  
  8.     <!--页面引入CSS样式表-->
  9.     <link rel="stylesheet" type="text/css" href="/css/css.css">		
  10. </head>
  11. <body>
  12.     <h2>春夜喜雨</h2>
  13.     <p>好雨知时节，当春乃发生。</p>
  14. </body>
  15. </html>

Results of the:

 

4. Stylesheet call priority

The order of precedence for stylesheet calls follows this principle:

(1) The style defined in the inline style has the highest priority.

(2) Other styles are ranked in the order in which they appear or are referenced in the HTML file, following the principle of proximity. The closer to the text, the higher the priority.

(3) The priority of selectors is descendant selector, class selector, and ID selector, with the priority decreasing in that order.

(4) Styles not defined in any file will follow the browser's default style.

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail