Sehen! 10 praktische CSS-Tipps, die es wert sind, gesammelt zu werden

Dieser Artikel wird Ihnen 10 großartige CSS-Nutzungsfähigkeiten vermitteln, die die Front-End-Entwicklung erleichtern. Ich hoffe, dass er für alle hilfreich ist.

Ich bringe Ihnen 10 tolle CSS-Tipps, die es Ihnen als Entwickler leichter machen, insbesondere wenn Sie Anfänger sind. (Empfohlenes Lernen: CSS-Video-Tutorial)

1. So beheben Sie horizontales Scrollen auf einer Webseite in CSS

Wenn Sie eine Webseite gestalten und unten eine horizontale Bildlaufleiste sehen, müssen Sie eine finden eine Breite, die größer als die verfügbare Bildschirmbreite ist.

Im Screenshot unten können Sie beispielsweise sehen, dass es einen horizontalen Bildlauf gibt:

Sie können den universellen Selektor (*) verwenden, um das verantwortliche Element zu finden, indem Sie die folgende Regel anwenden:

* { 
     border: 2px solid red;
}

Das wird Auf jedes Element auf der Seite wird ein roter 2-Pixel-Rand angewendet, sodass Sie leicht erkennen können, welche Elemente angepasst werden müssen.

Nachdem Sie den obigen Stil angewendet haben, ist hier das Ergebnis:

Sie können sehen, dass die zweite grüne Welle horizontales Scrollen verursacht. Dies liegt daran, dass die Breite auf 1400 Pixel eingestellt ist, was breiter ist als die verfügbare Bildschirmbreite von 1200 Pixeln.

.wave2 {
  width: 1400px;
}

Durch Zurücksetzen der Breite auf 1200 Pixel oder vollständiges Entfernen wird das Problem behoben, sodass kein horizontales Scrollen mehr erfolgt.

2. So überschreiben Sie Stile in CSS

In bestimmten Fällen möchten Sie möglicherweise einen bestimmten Stil überschreiben, der bereits vorhanden ist (z. B. aus einer Bibliothek). Oder vielleicht haben Sie eine Vorlage mit einem großen Stylesheet und müssen bestimmte Teile davon anpassen.

In diesen Fällen können Sie CSS-Spezifitätsregeln anwenden, !important oder Ausnahmen vor den Regeln verwenden. !important也可以在规则前面使用异常。

在下面的示例中，!important为每个 h1 元素提供#2ecc71（我最喜欢的颜色）的翠绿色变体：

h1 {
    color: #2ecc71 !important;
}

但要注意——使用这个异常被认为是不好的做法，你应该尽可能避免它。

为什么？嗯，!important实际上破坏了 CSS 的级联特性，它会使调试变得更加困难。

最好的用例!important是在处理大量模板样式表或旧代码时，使用它来识别代码库中的问题。然后你可以快速修复问题并消除异常。

除了使用 !important 来应用样式之外，您还可以了解更多关于 CSS 的特殊性并应用这些规则。

3. 如何用 CSS 制作正方形

如果你想制作一个正方形而不必过多地弄乱宽度和高度，您可以通过设置背景颜色、所需宽度和纵横比来设置 div [或视情况而定的跨度] 的样式与相等的数字。第一个数字是顶部和底部尺寸，第二个是左右。

你可以通过玩这两个数字来制作矩形和任何你想要的正方形，从而更进一步。

<div class="square"></div>

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

4. 如何使用 CSS 使 div 居中

随着样式表变大，将 div 居中会变得非常困难。要设置任何 div 的样式，请为其设置块显示、自动边距和低于 100% 的宽度。

<div class="center"></div>

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

5. 如何在 CSS 中移除盒子中的额外填充

使用box-sizing: border-box

Im folgenden Beispiel stellt !important eine smaragdgrüne Variante von #2ecc71 (meiner Lieblingsfarbe) für jedes h1-Element bereit:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Aber seien Sie vorsichtig – die Verwendung dieser Ausnahme wird als schlechte Praxis angesehen sollte es wenn möglich vermeiden.

Warum? Nun, !important unterbricht tatsächlich die kaskadierende Natur von CSS, was das Debuggen erschwert.

Der beste Anwendungsfall !important besteht darin, damit Probleme in Ihrer Codebasis zu identifizieren, wenn Sie mit großen Mengen an Vorlagen-Stylesheets oder Legacy-Code arbeiten. Anschließend können Sie das Problem schnell beheben und die Anomalie beseitigen.

Zusätzlich zur Verwendung von !important zum Anwenden von Stilen können Sie auch

mehr über die Besonderheiten von CSS erfahren🎜und diese Regeln anwenden. 🎜

3. So erstellen Sie ein Quadrat mit CSS 🎜🎜 Wenn Sie ein Quadrat erstellen möchten, ohne zu viel mit der Breite und Höhe herumzuspielen, können Sie dies tun, indem Sie die Hintergrundfarbe festlegen , gewünschte Breite und Seitenverhältnis, um ein Div [oder gegebenenfalls einen Bereich] mit einer gleichen Zahl zu formatieren. Die erste Zahl gibt die Ober- und Untermaße an, die zweite die linken und rechten Maße. 🎜🎜Sie können noch einen Schritt weiter gehen, indem Sie mit diesen beiden Zahlen spielen, um Rechtecke und jedes beliebige Quadrat zu erstellen. 🎜

 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>

rrree🎜🎜< h2 data-id="heading-3">4. So zentrieren Sie ein Div mit CSS🎜🎜Je größer das Stylesheet wird, desto schwieriger wird es, das Div zu zentrieren. Um ein beliebiges Div zu formatieren, stellen Sie es auf Blockanzeige, automatische Ränder und eine Breite unter 100 % ein. 🎜

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

rrree🎜🎜< h2 data-id="heading-4">5. So entfernen Sie zusätzliche Polsterung aus einer Box in CSS 🎜🎜Mit box-sizing: border-box stellen Sie sicher, dass die Breite und die Polsterung festgelegt sind Der Box wird keine zusätzliche Polsterung hinzugefügt. Dadurch sieht Ihr Layout besser aus. 🎜

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

🎜6. So erstellen Sie eine Initiale mit CSS🎜🎜Sie können das anfängliche Pseudoelement verwenden, um eine Initiale zu erstellen. Ja! Die Initialen, die man in Zeitungen sieht. 🎜🎜Wählen Sie das entsprechende HTML-Element aus und wenden Sie den Stil wie folgt an: 🎜

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

🎜🎜🎜

7. 如何在 CSS 中将文本设为大写或小写

大写或小写字母不必直接来自您的 HTML。您可以在 CSS 中强制任何文本为大写或小写。

我希望将来会有 SentenceCase 和 tOGGLEcASE 的选项。但是你为什么要写一个文本 toOGGLEcASE 呢？

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

8. 如何声明变量以保持 CSS DRY

变量？是的。您可以在 CSS 中声明变量。

当您声明变量时，您可以在许多其他样式中使用它们。如果您有任何要更改的内容，您只需更改该变量，结果将反映在使用它们的任何地方。这将有助于保持您的 CSS 代码干燥（不要重复自己）。

您可以通过将变量放置在根范围内来声明变量，以便它在样式表中是全局的。要使用您的变量，您可以将属性放在“var”关键字旁边的大括号内。

通常在样式表的顶部声明变量 - 即在重置之前。

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. 如何使用:before和:after选择器向你的 CSS 添加额外的内容

CSS 中的:before选择器可帮助您在元素之前插入内容：

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

选择:after器做同样的事情，但它在元素之后插入内容：

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}

10. 如何使用纯 CSS 实现平滑滚动

您可以在网页上应用平滑滚动，而无需编写复杂的 JavaScript 或使用插件。因此，如果您有链接到网页上多个部分的锚标记并单击它们，则滚动是平滑的。

html {
  scroll-behavior: smooth;
}

（学习视频分享：web前端入门教程）

Das obige ist der detaillierte Inhalt vonSehen! 10 praktische CSS-Tipps, die es wert sind, gesammelt zu werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!