Heim >Web-Frontend >js-Tutorial >Weniger bekannte, aber nützliche Funktionen von CSS

Weniger bekannte, aber nützliche Funktionen von CSS

Susan SarandonOriginal: 2024-10-04 06:17:29500Durchsuche

CSS verfügt über einige weniger bekannte, aber nützliche Funktionen. Wir werden einige davon untersuchen.

1. CSS scroll-snap-type-Eigenschaft und scroll-snap-stop-Eigenschaft

scroll-snap-stop

Wenn diese Eigenschaft für jedes untergeordnete Element unter dem übergeordneten Element festgelegt ist und Sie schnell auf dem Bildschirm scrollen, wird verhindert, dass das nächste Element beim schnellen Scrollen mit einem Trackpad oder Touchscreen passiert.

Gif:

Less known but useful features of CSS

Beispiel:


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 90%;
}

.green {
  background-color: lightgreen;
  width: 80%;
}

.pink {
  background-color: lightpink;
  width: 70%;
}

#container > div{
  margin: 5px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 4/1;
}
</style>
</head>
<body>


  <div class="container">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>

</div>

</body>
</html>

Wert:

Normal: Dies ist der Standardwert. Scrollen ist das Standardverhalten
Immer: Nach schnellem Wischen mit Touchpad oder Touchscreen stoppt der Bildlauf und das nächste Element wird scharfgestellt.

Scroll-Snap-Type-Eigenschaft

Ziehen Sie den Schieberegler horizontal, lassen Sie ihn los und Sie werden den Effekt sehen.
Der Effekt tritt ein, wenn Sie auf ein Kästchen klicken und dann mit der linken und rechten Pfeiltaste navigieren

Gif:

Less known but useful features of CSS

Beispiel:


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
    border: solid black 2px;
}

.blue {
  background-color: lightblue;
  aspect-ratio: 1/2;
  height: 95%;

}

.green {
  background-color: lightgreen;
  height: 50%;
  aspect-ratio: 2/1;
}

.blue, .green {
  display: inline-block;
  scroll-snap-align: center;
   margin: 5px;
}
</style>
</head>
<body>


<div class="container">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

</body>
</html>

Wert:

Keine: Dies ist der Standardwert
X: Der Effekt wird auf der x-Achse eingestellt
Y: Der Effekt wird auf der y-Achse eingestellt
Beide: Der Effekt wird auf der x-Achse und der y-Achse eingestellt
Obligatorisch: Nachdem die Schriftrolle beendet ist, bewegt sich die Schriftrolle automatisch zum Erfassungspunkt

2. CSS-Place-Items-Eigenschaft

Der für die place-items-Eigenschaft festgelegte Wert wird sowohl auf die align-items- als auch auf die justify-items-Eigenschaften angewendet.

Beispiel:

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 60%;
  aspect-ratio: 3/2;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.container > div {
  width: 50%;
  aspect-ratio: 2;
  background-color: red;
}
</style>
</head>
<body>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

Wert:

Start: Elemente am Anfang der Rasterzelle ausrichten
Ende: Elemente am Ende der Rasterzelle ausrichten
Mitte: Elemente in der Mitte der Rasterzelle ausrichten

3. CSS alle Eigenschaften

Ändert alle Eigenschaften, die auf das Element oder sein übergeordnetes Element angewendet werden, auf ihre Anfangswerte

Beispiel:

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style> 
html {
  font-size: small;
  color : red
}
}

.a{
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>


<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

Wert:

Unset: Ändert alle Eigenschaften, die auf das Element oder das übergeordnete Element des Elements angewendet werden, auf ihren übergeordneten Wert, wenn sie vererbbar sind, oder auf ihren Anfangswert, wenn nicht

4. CSS-Benutzerauswahl-Eigenschaft

Verhindert, dass Benutzer Texte auswählen

Beispiel:


<!DOCTYPE html>
<html>
<head>
<style> 
div {
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
</style>
</head>
<body>

<div>The text of this div element cannot be selected.</div>

</body>
</html>

5. CSS-Caret-Color-Eigenschaft

Ändert die Farbe des Cursors (Caret) in Texteingabefeldern.


<!DOCTYPE html>
<html>
<head>
<style>
.a {
  caret-color: blue;
}

</style>
</head>
<body>

<input class="a" value="bulue">

</body>
</html>

6. CSS-Text-Decoration-Skip-Ink-Eigenschaft

Die CSS-Eigenschaft text-decoration-skip-ink gibt an, wie Überstreichungen und Unterstreichungen gezeichnet werden, wenn Glyphen über Linien und Unterstreichungen geführt werden.

Wert:

Keine:

Beispiel:

Less known but useful features of CSS


text-decoration-skip-ink: none;

Auto:

Beispiel:

Less known but useful features of CSS


text-decoration-skip-ink: auto;

7. CSS-Pointer-Events-Eigenschaft

Die Eigenschaft pointer-events definiert, ob ein Element auf Zeigerereignisse reagiert oder nicht.

Beispiel:


<!DOCTYPE html>
<html>
<head>
<style> 
.a {
  pointer-events: none;
}

.b {
  pointer-events: auto;
}
</style>
</head>
<body>


<div class="a"><a href="https://www.gogle.com">Google</a></div>


<div class="b"> <a href="https://www.google.com">Google</a></div>

</body>
</html>

Wert:

Keine: Standard
Auto: Das Element reagiert nicht auf Zeigerereignisse

Abschluss

Wir haben die wenig bekannten Funktionen von CSS untersucht. Wir haben die Funktionen kennengelernt, die in Ihren Anwendungen nützlich sein werden.

Das obige ist der detaillierte Inhalt vonWeniger bekannte, aber nützliche Funktionen von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css less if for while select auto using Property pointer default this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine umfassende Anleitung zu ESnd-PfeilfunktionenNächster Artikel：Eine umfassende Anleitung zu ESnd-Pfeilfunktionen

In Verbindung stehende Artikel

Mehr sehen