Ausführliche Erklärung von CSS in JavaWeb

Einführung in CSS

1. Übersicht und Funktionen von CSS

CSS (Cascading Style Sheets) ist ein Cascading Style Sheet, mit dem der Anzeigeeffekt von Webseiten definiert wird. Es kann die Duplizierung von Stildefinitionen im HTML-Code lösen, die Wartbarkeit späteren Stilcodes verbessern und den Anzeigeeffekt von Webseiten verbessern.
Funktion: CSS trennt Webseiteninhalt und Anzeigestil und verbessert so die Anzeigefunktion.

2. Kombination von CSS und HTML (*****) (vier Typen)

So kombinieren Sie CSS und HTML

1. Stilattributmodus:

Verwenden Sie das Stilattribut im Tag, um den Anzeigestil jedes Tags zu ändern.

Beispiel:

<span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background-color:#FF0000; color:#FFFFFF"</span><span style="color: #0000ff">></span><span style="color: #000000">
        p标签段落内容。
</span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>

Diese Methode ist flexibler, aber es ist schwieriger, denselben Stil für mehrere identische Tags zu definieren, sodass sie für lokale Änderungen geeignet ist.

2.Style-Tag-Methode: (eingebettete Methode)

Fügen Sie das Style-Tag zum Head-Tag hinzu, um mehrere Tags einheitlich zu ändern. ​

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=”text/css”</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        p </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

Mit dieser Methode kann der Stil einer einzelnen Seite einheitlich festgelegt werden, sie ist jedoch für lokale Bereiche nicht flexibel genug.

　3. Importmethode: (häufig verwendete Methode)

Voraussetzung ist, dass bereits eine definierte CSS-Datei vorhanden ist. Wenn ein Teil des Stils der Webseite verwendet werden muss, verwenden Sie diese Methode.

Beispiel:

<span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    @import url(css_3.css);
    div </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>　　

Definieren Sie das Ende einer externen CSS-Datei (.css).
@import url("CSS-Dateiadresse"); muss in das