current position：Home>CSS introduction method

CSS introduction method

2022-05-15 03:12:17【Sorrow from all ages】

1 CSS Three ways to introduce

according to CSS The position of style writing （ Or the way of introduction ）,CSS Style sheets can be divided into three categories ：

  • Inline style sheets （ Inline ）
  • Internal style sheets （ The embedded ）
  • External style sheets （ Outer chain ）

2 Inline style sheets

Inline style sheets （ Inline style sheets ） Is inside the element tag style Property CSS style , Suitable for modifying simple styles .

<div style="color: red; font-size: 12px;">
     Youth is not always in , Get in love 
</div>
  • style It's just the attributes of the tag
  • In the middle of double quotation marks , Write in accordance with CSS standard
  • You can control the current label setting style
  • Because writing is cumbersome , And does not reflect the idea of separating structure from style , Therefore, it is not recommended to use it in large quantities , Only when adding a simple style to the current element , Consider using
  • Use the inline style sheet to set CSS, Also known as Inline introduction

3 Internal style sheets

Internal style sheets （ Embedded style sheets ） Write when HTML Inside the page , It's all about CSS Code extraction , Put it in a single <style> In the label .

<style type="text/css"> div {
       color: red; font-size: 12px; } </style>
  • <style> Labels can theoretically be placed on HTML Anywhere in the document , But it is usually placed in the document <head> In the label
  • Current browsers already support Omit type attribute
  • In this way , You can easily control the element style settings in the current whole page
  • The code structure is clear , But there is no complete separation of structure and style
  • Use the internal style sheet to set CSS, Also known as Embedded introduction , This is the way we often practice

4 External style sheets

The actual development is external style sheets , It is suitable for more styles , The core is ： The style is written separately CSS In file , After the CSS File import to HTML Page usage .

There are two steps to introducing an external style sheet ：

  • Create a new suffix named ：.css The style file of , Put all the CSS The code is put in this file
  • stay HTML On the page , Use <link> Tag to import this file 
<link rel="stylesheet" type="text/css" href="css File path ">
attribute effect
rel Define the relationship between the current document and the linked document , ad locum It needs to be specified as “stylesheet”, Indicates that the linked document is a stylesheet file
type Determine the of the linked document MIME type , The most common of this property is MIME The type is “text/css”, This type describes the style sheet , The current browser Omission is already supported “type” attribute
href Defines the... Of the linked external style sheet file URL, Can be a relative path , It could be an absolute path

** Be careful ：** Use external style sheet settings CSS, Also known as Outer chain or Link in , This method is commonly used in development .

5 CSS Introduction summary

Style sheets advantage shortcoming usage Control range
Inline style sheets （ Inline ） Writing is convenient , Weight high Structure style mixing Less Control a label
Internal style sheets （ The embedded ） Part of the structure and style are separated Not completely separated More Control a page
External style sheets （ Outer chain ） Completely separate structure from style Need to introduce most , Hematemesis recommendation Control multiple pages

copyright notice
author[Sorrow from all ages],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/135/202205142124187221.html

The sidebar is recommended

guess what you like

Random recommended