current position:Home>CSS introduction method

CSS introduction method

2022-05-15 03:12:17Sorrow 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 
  • 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.

Random recommended