Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?-Front-End-Fragen und Antworten-php.cn

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?

WBOY

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

Original

2849 Leute haben es durchsucht

Drei Möglichkeiten, CSS3 zu verwenden: 1. Inline-Stil, die Syntax ist „“; 2. Interner Stil, die Syntax ist „"; 3. Externer Stil, die Syntax lautet "".

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? 1. Inline-Stil

Der Inline-Stil wird über das Stilattribut festgelegt und der Attributwert kann ein beliebiger CSS-Stil sein.

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

Nach dem Login kopieren

　 Anzeigeeffekt:

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? 2. Interner Stil

　 Der interne Stil wird im Kopfteil des Dokuments definiert und über das Style-Tag festgelegt. Sie müssen den Elementselektor (p) verwenden, um den Stil mit dem zu formatierenden Tag (p-Tag) zu verknüpfen.

  <!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>

Nach dem Login kopieren

　 Wirkung:

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? 3. Externer Stil

Definieren Sie den CSS-Stil in *.css außerhalb des Dokuments und führen Sie ihn dann über das Link-Element im Kopfteil des Dokuments ein.

  <!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>

Nach dem Login kopieren

　 Inhalt der Style.css-Datei:

p{ 
             background: yellow;
        }

Nach dem Login kopieren

Anzeigeeffekt:

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? a. Importieren Sie die Stile anderer Stylesheets in ein externes Stylesheet

Importieren Sie die obige style.css

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

Nach dem Login kopieren

in die Combine.css Datei Combine.css-Datei in HTML-Datei einführen

  <!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>

Nach dem Login kopieren

　 Wirkung:

Welche drei Möglichkeiten gibt es, CSS3 zu verwenden? (Lernvideo-Sharing:

css-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWelche drei Möglichkeiten gibt es, CSS3 zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!