12 CSS-Tipps, die es wert sind, in den Lesezeichen gespeichert zu werden! !

In diesem Artikel finden Sie 12 CSS-Tipps, die es wert sind, gesammelt zu werden. Sie können versuchen, sie sich zu merken, da sie in kritischen Momenten Leben retten können! Hoffe, es hilft allen!

1. Kurven Sie Text mit „Shape-outside“ um ein schwebendes Bild.

Es handelt sich um eine CSS-Eigenschaft, die das Festlegen einer Form ermöglicht. Es hilft auch dabei, Bereiche zu definieren, in denen Text fließt. CSS-Code:

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. Magische Kombination

Diese kleine Kombination kann tatsächlich die meisten Layoutfehler verhindern, die in HTML auftreten. Wir möchten wirklich nicht, dass horizontale Schieberegler oder absolut positionierte Elemente das tun, was sie wollen, und wir möchten auch keine zufälligen Ränder und Abstände überall. Hier ist Ihre magische Kombination.

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Manchmal ist „display:block“ nicht sinnvoll, aber in den meisten Fällen werden Sie 3499910bf9dac5ae3c52d5ede7383485 和 45a2772a6b6107b401db3c9b82c049c2 als Block wie jeden anderen Block behandeln. In den meisten Fällen wird es Ihnen also tatsächlich helfen!

3. HTML und CSS aufteilen

Dies ist eher eine Art „Workflow“-Technik. Ich empfehle, dass Sie während der Entwicklung verschiedene CSS-Dateien erstellen und diese erst am Ende zusammenführen. Zum Beispiel eine für den Desktop, eine für Mobilgeräte usw. Abschließend müssen Sie sie zusammenführen, da dies dazu beiträgt, die Anzahl der HTTP-Anfragen an Ihre Website zu minimieren.

Das gleiche Prinzip gilt für HTML. Wenn Sie nicht in einer SPA-Umgebung wie Gatsby entwickeln, kann PHP zum Einbinden von HTML-Codeausschnitten verwendet werden. Sie möchten beispielsweise einen Ordner „/modules“ behalten, der die Navigationsleiste, Fußzeile usw. in separaten Dateien enthält. Wenn also Änderungen vorgenommen werden müssen, müssen Sie diese nicht auf jeder Seite bearbeiten. Je modularer, desto besser die Ergebnisse.

4. ::Anfangsbuchstabe

Der Stil wird auf den ersten Buchstaben des Elements auf Blockebene angewendet. Dadurch können wir Effekte einbringen, die wir aus Print- oder Papiermagazinen kennen. Ohne dieses Pseudoelement müssten wir viele Spannen erstellen, um diesen Effekt zu erzielen. Zum Beispiel:

Wie geht das? Der Code lautet wie folgt:

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5. Vier Kerneigenschaften

Die CSS-Animation bietet eine relativ einfache Möglichkeit, reibungslos zwischen einer großen Anzahl von Eigenschaften zu wechseln. Eine gute animierte Benutzeroberfläche setzt ein reibungsloses und reibungsloses Erlebnis voraus. Um eine gute Leistung in unserer Animationszeitleiste aufrechtzuerhalten, müssen wir unsere Animationseigenschaften auf die folgenden vier Kerne beschränken:

• scale – transform:scale(2)
• rotation – transform:rotate(180deg )
• position – transform: Translate Oder die Animation des Boxschattens beeinflusst die Zeichenmethode des Browsers. All dies wird Ihre FPS (FramesPerSecond) erheblich reduzieren. Mit diesen Eigenschaften können Sie einige interessante Effekte erzielen, sie sollten jedoch mit Vorsicht verwendet werden, um eine gute Leistung aufrechtzuerhalten.
6. Verwenden Sie Variablen, um konsistent zu bleiben.
• Eine gute Möglichkeit, konsistent zu bleiben, besteht darin, CSS-Variablen oder Präprozessorvariablen zu verwenden, um Animationszeiten vorzudefinieren.

  :root{ timing-base: 1000;}

Das Festlegen einer Grundanimations- oder Übergangsdauer ohne Definition einer Einheit gibt uns die Flexibilität, diese Dauer in der Funktion calc() aufzurufen. Diese Dauer kann von unserer Basis-CSS-Variable abweichen, es handelt sich jedoch immer um eine einfache Änderung dieser Zahl und sorgt stets für ein konsistentes Erlebnis.

7. Konischer Farbverlauf

Haben Sie sich jemals gefragt, ob Sie ein Kreisdiagramm nur mit CSS erstellen könnten? Die gute Nachricht ist, dass Sie es tatsächlich können! Dies kann mit der Conic-Gradient-Funktion erfolgen. Diese Funktion erstellt ein Bild, das aus einem Farbverlauf mit einem festgelegten Farbübergang besteht, der um einen Mittelpunkt rotiert. Sie können dies mit der folgenden Codezeile tun:

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. Textauswahlfarbe ändern

Um die Textauswahlfarbe zu ändern, verwenden wir

::selection

. Es handelt sich um ein Pseudoelement, das auf Browserebene überschrieben wird, um die Texthervorhebungsfarbe durch eine Farbe Ihrer Wahl zu ersetzen. Sie können den Effekt sehen, indem Sie Inhalte mit dem Cursor auswählen.

::selection {
     background-color: #f3b70f;
 }

9. Hover-Effekte

Hover-Effekte werden normalerweise für Schaltflächen, Textlinks, Blockabschnitte der Website, Symbole usw. verwendet. Wenn Sie die Farbe ändern möchten, wenn jemand mit der Maus darüber fährt, verwenden Sie einfach dasselbe CSS, fügen Sie aber

:hover

hinzu und ändern Sie den Stil. So machen Sie es:

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

Dadurch ändert sich die Farbe Ihres h2-Tags von Schwarz zu Rot, wenn jemand mit der Maus darüber fährt. Dies ist nützlich, da Sie die Schriftgröße oder -stärke nicht erneut angeben müssen, wenn Sie sie nicht ändern möchten. Es werden nur die von Ihnen angegebenen Eigenschaften geändert.

10. Schlagschatten

Fügen Sie dieses Attribut hinzu, um transparenten Bildern einen besseren Schatteneffekt zu verleihen. Sie können dies mithilfe der angegebenen Codezeilen tun.

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt von12 CSS-Tipps, die es wert sind, in den Lesezeichen gespeichert zu werden! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!