5 nützliche CSS-Funktionen (Teilen)

CSS enthält viele Funktionen und kann viele Dinge tun, die zuvor mit JavaScript erledigt werden mussten. Jedes Jahr werden neue Funktionen hinzugefügt, die unsere Entwicklung einfacher machen und unsere Abhängigkeit von JavaScript verringern. CSS-Funktionen gehören zu den leistungsstärksten Funktionen, und in diesem Artikel werde ich einige behandeln, die ich nützlich finde.

(Lernvideo-Sharing: CSS-Video-Tutorial)

attr()

attr-Funktion wird verwendet, um den Attributwert des ausgewählten Elements abzurufen. Es akzeptiert drei Parameter: Eigenschaftsname, Typ und Standardwert. attr 函数用于获取所选元素的属性值。 它接受三个参数，属性名称，类型和默认值。

语法：

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

事例：

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

css

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

calc()

这个函数使我们能够计算CSS值，而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。

需要特别注意重要一点是+和-运算符必须用空格隔开，不然无法正常工作。*和/运算符不有这限制，但出于一致性的考虑，建议添加空格。

另外，很棒的是，我们可以混合CSS单位，例如，我们可以减去百分比和像素。

我们可以用calc构建一个带有居中元素的示例:

<p class="calc">Centered with calc</p>

css

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

var()

通过这个函数，我们可以使用一个自定义属性的值作为另一个CSS属性的值。简单地说，我们可以定义一个颜色，例如，将它放在自定义属性(CSS变量)中，然后通过调用var函数重用该属性值。

与CSS变量一起，该函数提高了可维护性并减少了重复。一个用例是为网站创建主题。

此函数接受两个参数，即自定义属性和一个默认值，如果出现问题，将使用它们。

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

counter()

就我个人而言，我从未使用过这种方法，但它看起来是很有趣。这个函数返回指定计数器的当前值，需要与 counter-reset和counter-increment 配合使用。

我们可以用它来计算其他元素，比如有序列表。

<div>
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

源码：https://codepen.io/protic_milos/pen/GRpYJKd

circle()

这个函数创建一个圆形区域来屏蔽它所应用的元素。你可以指定它的半径和位置。通常与图像一起使用来创建圆角形状。此函数是clip-path

Grammatik:

<img  alt="5 nützliche CSS-Funktionen (Teilen)" >

Beispiel:

img.circle {
  clip-path: circle(30%);
}

css

rrreee Wirkung:

Quellcode: https://codepen.io/protic_milos/pen/GRpYJKd

calc()

Mit dieser Funktion können wir CSS-Werte berechnen , anstatt einen genauen Wert anzugeben. Wird normalerweise zur Berechnung der Größe oder Position eines Elements verwendet. Es unterstützt Addition, Subtraktion, Multiplikation und Division. Ein wichtiger Punkt, den Sie beachten sollten ist, dass die Operatoren + und - durch Leerzeichen getrennt werden müssen, da sie sonst nicht richtig funktionieren. Für die Operatoren * und / gilt diese Einschränkung nicht, aus Konsistenzgründen wird jedoch empfohlen, Leerzeichen hinzuzufügen.

🎜Außerdem ist es toll, dass wir CSS-Einheiten mischen können, zum Beispiel können wir Prozentsätze und Pixel subtrahieren. 🎜🎜Wir können calc verwenden, um ein Beispiel mit einem zentrierten Element zu erstellen: 🎜rrreee🎜css🎜rrreee🎜Effekt: 🎜🎜🎜🎜🎜🎜Quellcode: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜 var ()🎜🎜Mit dieser Funktion können wir den Wert einer benutzerdefinierten Eigenschaft als Wert einer anderen CSS-Eigenschaft verwenden. Einfach ausgedrückt können wir beispielsweise eine Farbe definieren, sie in eine benutzerdefinierte Eigenschaft (CSS-Variable) einfügen und dann den Eigenschaftswert durch Aufrufen der Funktion var wiederverwenden. 🎜🎜Zusammen mit CSS-Variablen verbessert diese Funktion die Wartbarkeit und reduziert Duplikate. Ein Anwendungsfall ist die Erstellung von Themes für Websites. 🎜🎜Diese Funktion akzeptiert zwei Parameter, die benutzerdefinierte Eigenschaft und einen Standardwert, der verwendet wird, wenn etwas schief geht. 🎜rrreee🎜Effekt: 🎜🎜🎜🎜🎜🎜Quellcode: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜counter()🎜🎜Ich persönlich habe diese Methode noch nie verwendet, aber sie sieht interessant aus. Diese Funktion gibt den aktuellen Wert des angegebenen Zählers zurück und muss mit counter-reset und counter-increment verwendet werden. 🎜🎜Wir können damit andere Elemente berechnen, beispielsweise geordnete Listen. 🎜rrreee🎜🎜🎜 🎜🎜Quellcode: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜circle()🎜🎜Diese Funktion erstellt einen kreisförmigen Bereich, um das Element zu maskieren, auf das sie angewendet wird. Sie können seinen Radius und seine Position angeben. Wird oft mit Bildern verwendet, um abgerundete Formen zu erstellen. Diese Funktion ist der Wert der Eigenschaft clip-path. 🎜🎜Außerdem ist es erwähnenswert, dass Sie neben Kreisen auch Ellipsen und vieleckige Formen erstellen können. 🎜rrreee🎜css🎜rrreee🎜🎜🎜🎜🎜🎜Quellcode: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜Zusammenfassung🎜🎜Wie ich schon oft erwähnt habe, ignorieren Entwickler in vielen Fällen Ohne die Möglichkeit von CSS geht die Einfachheit der Website verloren. Jedes Jahr können wir uns darauf verlassen, dass CSS uns die Designfunktionen bietet, die wir brauchen, und das ist großartig. JavaScript sollte sich auf andere Dinge statt auf Design konzentrieren. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt von5 nützliche CSS-Funktionen (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!