Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Einführung in CSS

CSS istCascading Style Sheets(Die Abkürzung für Cascading Style Sheets) wird verwendet, um den Stil von HTML-Seiten präzise zu steuern, um grafische Informationen besser anzuzeigen oder ein cooles/freundliches interaktives Erlebnis zu erzeugen.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

Das Suffix der CSS-Datei lautet .css

Kommentar

/* 注释的内容 */
1

Drei Möglichkeiten, Stile hinzuzufügen

1. Stil Inline-Stile

<span style="color: red">红色文字</span>
1

2. Über die CSS-Stilauswahl hinzufügen

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. Vererbung

Elemente innerhalb des Containers erhalten die im Container hinzugefügten Stile

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Alle Textstilattribute werden vererbt. Zu diesen Attributen gehören: Farbe, beginnend mit Text-, beginnend mit Linie und beginnend mit Schriftart-.
• Box-, Positionierungs- und Layoutattribute können nicht vererbt werden.

Wer bestimmt den endgültigen Stil?

Da es viele Stilquellen für Elemente gibt, darunter Browser-Standardstile, Stil-Inline-Stile, von verschiedenen CSS-Selektoren hinzugefügte Stile und von übergeordneten Elementen geerbte Stile, ist der endgültige Stil derjenige mit der höchsten Priorität unter vielen Stilen Stil.

Priorität des CSS-Stils

https://blog.csdn.net/weixin_41192489/article/details/139720467

Wesentliche Stilgrundlagen

CSS-Längeneinheit

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS-Funktionen

https://blog.csdn.net/weixin_41192489/article/details/140318834

Boxmodell

https://blog.csdn.net/weixin_41192489/article/details/102411612

• Sowohl die Höhe als auch die Zeilenhöhe können das Feld öffnen, aber das Hintergrundbild kann das Feld nicht öffnen.

Was Sie bei Inline-Elementen beachten sollten

• Inline-Elemente können nur am Anfang und am Ende innere und äußere Ränder anzeigen und sollten so weit wie möglich vermieden werden. Legen Sie daher keine inneren und äußeren Ränder für Inline-Elemente fest.

• Nachdem die Inline-Elemente umbrochen wurden, werden die Ränder gestapelt und ungeordnet angezeigt. Legen Sie daher keine Ränder für die Inline-Elemente fest!

• Wenn Sie einem Inline-Element Rahmen/innere und äußere Ränder hinzufügen müssen, konvertieren Sie es in eine Inline-Box

  display：inline-block
  1

Welche Stile können hinzugefügt werden?

Universeller Stil

Stile können zu fast jedem HTML-Element hinzugefügt werden.

Breite Höhe

• Breite: Der Standardwert ist die Breite des Inhalts (nicht die Breite der Box).
• Höhe: Der Standardwert ist die Höhe des Inhalts (nicht die Höhe der Box).

Mit dem folgenden Stil können Sie das standardmäßige Standard-Boxmodell des Elements in das IE-Boxmodell ändern.

box-sizing:border-box;
1

zu diesem Zeitpunkt

• Breite: Die Breite der Box (linker Rand + linker Innenabstand + Inhaltsbreite + rechter Innenabstand + rechter Rand)
• Höhe: Höhe der Box (oberer Rand + oberer Abstand + Inhaltshöhe + unterer Abstand + unterer Rand)

Polsterung

• Negative Werte werden nicht unterstützt
• Der Prozentwert, egal ob horizontal oder vertikal, wird relativ zur Breite berechnet.

padding: 10px;
1

Polsterung: 10 Pixel für oben, unten, links und rechts

padding:10px 5px;
1

Die Polsterung oben und unten beträgt 10 Pixel

Der rechte und linke Abstand beträgt 5 Pixel

padding:10px 5px 15px;
1

Die obere Polsterung beträgt 10 Pixel

Der rechte und linke Abstand beträgt 5 Pixel

Die untere Polsterung beträgt 15 Pixel

padding:10px 5px 15px 20px;
1

Die obere Polsterung beträgt 10 Pixel

Der rechte Abstand beträgt 5 Pixel

Die untere Polsterung beträgt 15 Pixel

Der linke Abstand beträgt 20 Pixel

Grenzgrenze

Verwandte Stile gibt es auch

• Rand abgerundeter Randradius
• Randbild ausfüllen
• Gliederung

Siehe Einzelheiten https://blog.csdn.net/weixin_41192489/article/details/140325106

Marge

https://blog.csdn.net/weixin_41192489/article/details/115140348

ÜberlaufÜberlauf

• sichtbar [Standardwert] Der gesamte überschüssige Inhalt wird angezeigt, ohne Bildlaufleisten auszuschneiden oder hinzuzufügen.
• versteckt: Blendet die Bildlaufleiste aus und zeigt keinen Inhalt an, der die Objektgröße überschreitet, aber dennoch gescrollt werden kann.
• auto: Wenn der Inhalt nicht überschritten wird, wird die Bildlaufleiste nicht angezeigt. Wenn der Inhalt überschritten wird, wird die Bildlaufleiste angezeigt.
• scrollen: Auf der Windows-Plattform werden Bildlaufleisten immer angezeigt, unabhängig davon, ob der Inhalt das Limit überschreitet. Unter der Mac-Plattform ist es dasselbe wie das Auto-Attribut.

Container mit den Überlaufwerten „Auto“ und „Scroll“ sind Rollcontainer (Container mit Bildlaufleisten). Aufgrund von Kompatibilitätsproblemen können Sie dies nur über den unteren Rand von untergeordneten Elementen erreichen Die Bodenpolsterung des Rollenbehälters ist weiß.

TransparenzOpazität

Der Attributwert reicht von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig). Wenn er die Bereichsgrenze von 0 bis 1 überschreitet, ist der endgültig berechnete Wert der Grenzwert.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

Hintergrundhintergrund

https://blog.csdn.net/weixin_41192489/article/details/140301618

Shadowbox-Shadow

Der Schatten verändert nicht die Größe des Felds und hat keinen Einfluss auf das Layout seiner Geschwisterelemente. Sie können auch mehrere Randschatten festlegen, um bessere Effekte zu erzielen und den dreidimensionalen Effekt zu verstärken.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Horizontaler Versatz: Positiver Wert nach rechts, negativer Wert nach links.
• Vertikaler Versatz: positive Werte nach unten und negative Werte nach oben.
• Unschärfegrad: darf nicht negativ sein
• Innerer/äußerer Schatten – Einschub ist innerer Schatten, nicht als äußerer Schatten geschrieben

box-shadow: 15px 21px 48px -2px #666;
1

Häufig verwendete Schatten

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Weitere Verwendungsmöglichkeiten anzeigen
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Praktisch] Überschreiben der Hintergrundfarbe der automatischen Füllung des Eingabefelds

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Praktisch] Ändern Sie die Tastendruckfarben stapelweise

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Eigentlicher Kampf】Anfängerleitfaden zum Maskierungseffekt

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

Clip Clip-Pfad

https://blog.csdn.net/weixin_41192489/article/details/121341551

• [Praktisch] Clip-Path implementiert Übergangsanimationen ähnlich wie PPT
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

transformtransformieren

https://blog.csdn.net/weixin_41192489/article/details/140314866

zoomzoom

Der Firefox-Browser unterstützt es nicht. Er kann die folgenden Attributwerte haben.

• Prozentwert.zoom:50%, was auf eine Verkleinerung auf die Hälfte der Originalgröße hinweist.
• numerischer Wert.zoom:0.5, was auf eine Verkleinerung auf die Hälfte der Originalgröße hinweist.
• normalSchlüsselwörter.zoom:normalGleichwertigzoom:1, ist der Standardwert.
• resetSchlüsselwörter.zoom:reset Dies bedeutet, dass die Elemente nicht entsprechend verkleinert oder vergrößert werden, wenn der Benutzer Strg und − oder Strg und + zum Zoomen des Dokuments drückt. Dieses Schlüsselwort weist jedoch eine schlechte Kompatibilität auf und wird nur vom Safari-Browser unterstützt.

Vergleich zwischen Zoom- und Scale()-Funktionen

• zoomDie Mittelkoordinate der Attributskalierung ist relativ zur oberen linken Ecke des Elements und kann nicht geändert werden.transformtransformierenscale()Die Standardmittelkoordinate der Funktionsskalierung ist der Mittelpunkt des Elements.
• Die Zoom-Attributskalierung ändert den vom Element eingenommenen Größenraum in Echtzeit und löst eine Neuzeichnung und Neuberechnung aus. Daher ist die Leistung der Zoom-Attributskalierung schlechter als die der Funktion „scale()“.
• Durch Anwenden des Zoom-Attributs auf ein Element wird kein kaskadierender Kontext erstellt, es hat keinen Einfluss auf die Positionierung fester Elemente und das Überlaufverstecken absolut positionierter Elemente durch das Überlaufattribut, noch ändert es den enthaltenden Block absolut positionierter Elemente.

Maske Maske

https://blog.csdn.net/weixin_41192489/article/details/121158821

Farbverlauf

https://blog.csdn.net/weixin_41192489/article/details/140316024

Einzigartige Stile für verschiedene Arten von Elementen

Text

https://blog.csdn.net/weixin_41192489/article/details/140264311

Hyperlink

Pseudoklassenstile – müssen in der folgenden festen Reihenfolge geschrieben werden:

• :link „Link“: bevor auf den Hyperlink geklickt wird – gilt für alle Hyperlinks mit href-Attributen (ausgenommen Anker) – kann weggelassen werden, abgekürzt im a-Tag
• :visited „Visited“: nachdem der Link besucht wurde – kann weggelassen und im a-Tag abgekürzt werden
• :hover „hover“: wenn die Maus auf dem Etikett platziert wird
• :active „Aktivieren“: Wenn die Maus auf das Etikett klickt, aber nicht loslässt.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Bild

Bildfilterfilter

https://www.runoob.com/cssref/css3-pr-filter.html

Symbol

• Implementieren Sie reaktionsfähige Symbole mit Schriftstärke
  Wenn die Schriftgröße größer ist, ist die Symbolschrift detaillierter, und wenn die Schriftgröße kleiner ist, ist die Symbolschrift einfacher.
  https://demo.cssworld.cn/8/5-1.php

• Zusammenführen von CSS-Symbolen – ClipPath Sprites-Technologie
  https://blog.csdn.net/weixin_41192489/article/details/121242735

Blatt

Zeilen beim Hover hervorheben

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

abwechselnde Farbreihen

Die wechselnden Farben zwischen den Datenzeilen können die Leseermüdung des Benutzers verringern.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

scrollen

Mauszeiger

Mauszeiger

Cursorfarbe, Caret-Farbe
Legen Sie die Farbe des Eingabefeld-Einfügecursors fest (wird von IE- und Edge-Browsern noch nicht unterstützt).

input {
    caret-color: red;
}
1
2
3

Verwandte Stile ein- und ausblenden

Wenn es keine folgenden Stile gibt, die Elemente verbergen können, werden die Elemente angezeigt (einige sind nicht sichtbar, nur weil die Kaskade abgedeckt ist):

• display: none [Häufig verwendet] Versteckte Elemente belegen keinen Platz, laden Ressourcen und das DOM ist zugänglich (durch Hinzufügen von „hidden“ zum HTML-Tag wird die Anzeige des Tags in „Keine“ geändert).
• visibility: hidden Versteckte Elemente nehmen ihre Position ein, Ressourcen werden geladen und das DOM ist zugänglich
  • Wenn das übergeordnete Element „visibility:hidden“ festlegt, sind auch die untergeordneten Elemente unsichtbar (Vererbung).
  • Wenn „visible:visible“ für ein untergeordnetes Element festgelegt ist, wird das untergeordnete Element erneut angezeigt.
• opacity: 0 Das Element ist unsichtbar, nimmt seine Position ein und kann angeklickt oder ausgewählt werden.
• clip: rect(0 0 0 0) Das Element ist unsichtbar, kann nicht angeklickt werden, nimmt keinen Platz ein, ist aber über die Tastatur zugänglich
• Bei negativen Z-Index-Werten wird das Element ausgeblendet und kann nicht angeklickt werden, es nimmt jedoch Platz ein und ist über die Tastatur zugänglich.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Positionsabhängige Stile

Die Position eines Elements auf der Seite wird durch viele Stile bestimmt, einschließlich Positionierung, Anzeige, Float, Rand usw.

Wenn Position, Anzeige und Float gleichzeitig vorhanden sind, wird der endgültige Anzeigeeffekt des Elements gemäß der im folgenden Link beschriebenen Logik bestimmt.

https://blog.csdn.net/weixin_41192489/article/details/119009647

Positionsposition

https://blog.csdn.net/weixin_41192489/article/details/140242430

Layoutanzeige

https://blog.csdn.net/weixin_41192489/article/details/140250775

Marge

https://blog.csdn.net/weixin_41192489/article/details/115140348

Ausrichtung

https://blog.csdn.net/weixin_41192489/article/details/140255028

Kaskadierender Z-Index

https://blog.csdn.net/weixin_41192489/article/details/140297366

Interaktionsbezogene Stile

Smooth Scroll Scroll-Verhalten: Smooth

https://blog.csdn.net/weixin_41192489/article/details/121365831

Größe ändern

https://blog.csdn.net/weixin_41192489/article/details/121396794

Geräteanpassungsbezogene Stile

Medienanfragen @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

[Praktisch] Lösungen zur Anpassung mobiler Endgeräte (drei Typen)

https://blog.csdn.net/weixin_41192489/article/details/120999355

Benutzerdefinierte CSS-Stile (CSS-Variablen/benutzerdefinierte Eigenschaften)

https://blog.csdn.net/weixin_41192489/article/details/140317369

Verbessern Sie die Effizienz beim Schreiben von CSS

CSS-Präprozessor

Der CSS-Präprozessor ist eine spezielle Programmiersprache, mit der CSS einige Programmierfunktionen hinzugefügt werden (CSS selbst ist keine Programmiersprache). Es besteht keine Notwendigkeit, Browserkompatibilitätsprobleme zu berücksichtigen, da der CSS-Präprozessor letztendlich Standard-CSS-Stile kompiliert und ausgibt. Sie können grundlegende Programmierkenntnisse wie Variablen, einfache logische Urteile und Funktionen im CSS-Präprozessor verwenden.

Zu den gängigen CSS-Präprozessoren gehören Sass (Scss), Less und Stylus.
(SASS wurde seit Version 3.0 in SCSS umbenannt)

• Praktisches Scss-Tutorial
  https://blog.csdn.net/weixin_41192489/article/details/134313564

CSS-Framework

• Praktisches UnoCSS-Tutorial
  https://blog.csdn.net/weixin_41192489/article/details/140034188

CSS-Codierungskonventionen

• Setzen Sie die Standardstile des Browsers zurück
• Versuchen Sie, Stil zu vermeiden
• Einheiten können nur weggelassen werden, wenn der Attributwert Null ist
• Der Wert ist normalerweise eine gerade Zahl, z. B. 6 Pixel anstelle von 5 Pixel (insbesondere die Zeilenhöhe und die Schriftgröße, um sicherzustellen, dass ihre Differenz durch 2 teilbar ist, sodass die Schriftart in der Zeile zentriert ist).
• Der Klassenname sollte semantisch sein, damit Sie auf einen Blick erkennen können, auf welches Element der Klassenname wirkt bzw. welche Stilwirkung der Klassenname erzielt.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Empfohlene Textstile

• Verwenden Sie „font-size: medium;“ für Textcontainer (wenn die Standardgröße des Browsers geändert wird, kann der Text entsprechend vergrößert oder verkleinert werden)
• Der Text im Textcontainer unter Verwendung relativer Einheiten – Prozent oder Em
• Verwenden Sie em als Einheit für Textränder

Hochleistungsanimation

Die drei Elemente der CSS-Hochleistungsanimation beziehen sich auf die absolute Positionierung, das Deckkraftattribut und das Transformationsattribut. Daher wird der gleiche Animationseffekt zunächst mit dem Transformationsattribut erzielt. Beispielsweise sollten Elementbewegungsanimationen das Transformationsattribut anstelle des Margin-Attributs verwenden.