Weniger bekannte, aber nützliche Funktionen von CSS-js-Tutorial-php.cn

Weniger bekannte, aber nützliche Funktionen von CSS

Susan Sarandon

Freigeben： 2024-10-04 06:17:29

Original

497 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

Auto:

Beispiel:

Less known but useful features of CSS


text-decoration-skip-ink: auto;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!