What are the three ways to use css3-Front-end Q&A-php.cn

What are the three ways to use css3

WBOY

Release： 2022-01-24 11:15:38

Original

2853 people have browsed it

Three ways to use css3: 1. Inline style, the syntax is ""; 2. Internal style, the syntax is ""; 3. External style, the syntax is "".

What are the three ways to use css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What are the three ways to use css3

1. Inline style

Inline style is set through the style attribute, and the attribute value can be any CSS style.

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
  </head>
  <body>
     <p style="background: red"> I  love  China!</p>
  </body>
 </html>

Copy after login

Display effect:

What are the three ways to use css3

2. Internal style

The internal style is defined in the head part of the document and is set through the style tag. You need to use the element selector (p) to associate the style with the tag to be styled (p tag).

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="UTF-8">
      <title>内联样式</title>
     <style type="text/css">
         p{ 
              background: green;
          }
    </style>
 </head>
 <body>
    <p> I  love  China!</p>
 </body>
 </html>

Copy after login

Effect:

What are the three ways to use css3

3. External style

Define the css style in *.css outside the document, and then in the head of the document Partially introduced through link elements.

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p> I  love  China!</p>
</body>
 </html>

Copy after login

Style.css file content:

p{ 
             background: yellow;
        }

Copy after login

Display effect:

What are the three ways to use css3

## a. Import other style sheets in an external style sheet The style

Import the above style.css into the combine.css file

@import "style.css";
 body{
     background: red;
}

Copy after login

Import the combine.css file into the HTML file

  <!DOCTYPE html>
  <html>
 <head>
      <meta charset="UTF-8">
      <title>document</title>
      <link rel="stylesheet" href="combine.css">
  </head>
  <body>
      <p> I  <span>love</span>  China!</p>
 </body>
 </html>

Copy after login

Effect:

What are the three ways to use css3

(Learning video sharing:

css video tutorial)

The above is the detailed content of What are the three ways to use css3. For more information, please follow other related articles on the PHP Chinese website!