Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?-Front-End-Fragen und Antworten-php.cn

Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?

青灯夜游

Freigeben： 2023-01-06 11:14:56

Original

3586 Leute haben es durchsucht

Im Vergleich zu CSS-Attributen haben HTML-Tag-Attribute eine höhere Priorität. Grund: W3C-Standards befürworten die Verwendung von CSS-Stilen und ersetzen HTML-Tag-Attribute durch CSS-Stile, die Tags und Stile trennen und die Wiederverwendung erschweren.

Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?

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

Heute habe ich mir den Abschnitt „Dimension“ des w3c-CSS-Tutorials angesehen und das folgende Experiment durchgeführt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img  class="normal" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?" ><br>
<img  class="big" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?" ><br>
<img  class="small" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?" >
</body>
</html>

Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt:

Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?
Was mich damals verwirrte, war, warum im Vergleich zum img-Tag die Höhe Das Attribut des img im internen Stylesheet spielte eine Rolle, und dann wurden verschiedene Baidu-Suchen durchgeführt.

Endlich bin ich zu den relevanten Schlussfolgerungen gekommen:
(1) Jetzt habe ich festgestellt, dass ich die Attributeinstellungen im Tag mit dem Inline-Stil verwechselt habe, sodass ich zunächst so überrascht war und es später nicht verstehen konnte Ich habe versucht, Inline-Stile zu verwenden

<img  class="big" src="/attachments/cover/cover_css.png"    style="max-width:90%" / alt="Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?" ><br>

Nach dem Login kopieren

Experimentelle Ergebnisse zeigen, dass Inline-Stile immer noch eine höhere Priorität haben als interne Stylesheets.

(2) Nach der erneuten Klärung des Konzepts wird eine weitere Beobachtung zeigen, dass die Stileinstellung des internen Stylesheets eine höhere Priorität hat als die Stileinstellung der HTML-Tag-Attribute. Dann habe ich ein Experiment mit dem externen Stylesheet durchgeführt

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<img  src="cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Welches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?" >
</body>
</html>

Nach dem Login kopieren

und festgestellt, dass die Stileinstellung des externen Stylesheets eine höhere Priorität hat als die Stileinstellung des HTML-Tag-Attributs. Die Priorität ist auch höher als das Höhenattribut innerhalb des img-Tags css hat Vorrang vor dem Attribut des Tags.

(3) W3C-Standards befürworten die Verwendung von CSS-Stilen und ersetzen HTML-Tag-Attribute durch CSS-Stile; der Standard für die Webseitenproduktion besteht darin, Tags und Stile zu trennen. Da es schwierig ist, Einstellungen in Tag-Attributen wiederzuverwenden, vermute ich persönlich, dass dies der Grund sein könnte, warum CSS-Stile eine höhere Priorität haben als Tag-Attribute.

(4) Obwohl die Verwendung von CSS-Stilen befürwortet wird, wird sie in W3School ausführlich eingeführt: „

Es ist eine gute Praxis, Höhen- und Breitenattribute für Bilder anzugeben. Wenn diese Attribute festgelegt sind, können Sie die festlegen Attribute „Höhe“ und „Breite“ für das Bild, wenn die Seite geladen wird. Ohne diese Attribute kann der Browser die Größe des Bildes nicht erkennen und den entsprechenden Platz für das Bild reservieren.

" Bitte übergeben Sie keine Höhen- und Breitenattribute, um das Bild zu skalieren. Wenn Sie die Höhen- und Breitenattribute verwenden, um das Bild zu verkleinern, muss der Benutzer das große Bild herunterladen (auch wenn das Bild auf der Seite klein aussieht). Die Der richtige Ansatz besteht darin, das Bild auf der Webseite zu verwenden. Die beiden Werte der Höhen- und Breitenattribute können größer oder kleiner sein als die tatsächliche Größe Passen Sie das Bild automatisch an die Größe des reservierten Speicherplatzes an. Beachten Sie jedoch: Der Browser muss immer noch die gesamte Datei herunterladen, unabhängig von der endgültigen Anzeigegröße, und das Bild wird verzerrt, wenn das ursprüngliche Breiten- und Höhenverhältnis nicht übereinstimmt beibehalten

Eine weitere Technik, die das Ausfüllen eines Seitenbereichs erleichtert und auch die Leistung des Dokuments verbessert. Stellen Sie sich vor, Sie möchten keinen farbigen Balken erstellen Stattdessen erstellen Sie ein Bild mit einer Breite und Höhe von 1 Pixel und geben ihm die gewünschte Farbe. Verwenden Sie dann die Eigenschaften „Höhe“ und „Breite“, um es auf eine größere Größe zu erweitern Wenn ein Wert in Form eines Prozentsatzes angegeben wird und die Höhe ignoriert wird, behält der Browser das Seitenverhältnis des Bildes bei, unabhängig davon, ob es vergrößert oder verkleinert wird (

da der Standardwert, wenn die Höhe nicht festgelegt ist, automatisch adaptiv ist

). ). Das bedeutet, dass sich das Verhältnis der Höhe zur Breite des Bildes nicht ändert und das Bild nicht verzerrt wird Das Alt-Attribut von img ist erforderlich. Da img auf Webseiten langsamer geladen wird als bei p-Strukturen, werden zu diesem Zeitpunkt häufig zuerst die Struktur und der Text geladen Die Größe des Bildes ist nicht im Voraus bekannt, sodass die Position und Größe des Bildes auf der Webseite nicht gerendert werden kann. Nachdem das Bild geladen und dann gerendert wurde, erfolgt eine Neuzeichnung (d. h. der Browser berechnet die Position der relevanten Elemente neu). , und die konkrete Erscheinung ist, dass der Text unter dem Bild nach unten gerutscht ist. Dies ist hier auf der Produkteinführungsseite von Taobao sehr deutlich zu erkennen.)

Der Browser berechnet die Breite und Höhe des Bildes und lässt es leer , und warten Sie dann, bis das Bild geladen ist, um ein Neuzeichnen der Seite zu vermeiden und die Front-End-Leistung und Benutzererfahrung zu verbessern. Die Antworten sind in vielen Bildern auf Zhihu zu sehen.

Bei der Bildverarbeitung des responsiven Layouts (eine Website kann mit mehreren Endgeräten kompatibel sein – anstatt für jedes Endgerät eine spezifische Version zu erstellen; dieses Konzept wurde entwickelt, um das mobile Surfen im Internet zu lösen) sollten Sie das img-Tag auf max -width: 100 %; height: auto; diese beiden Attribute können eine proportionale Dehnung gewährleisten

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWelches hat eine höhere Priorität, HTML-Tag-Attribute oder CSS-Attribute?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!