Eine Zusammenfassung von 20 fortgeschrittenen CSS-Tipps

Das Erlernen der Verwendung fortgeschrittener CSS-Techniken während des Entwicklungsprozesses ist auch für die Entwicklung von großem Nutzen. In diesem Artikel stellen wir Ihnen 20 fortgeschrittene CSS-Techniken vor.

1. Schwarzweißbild

Mit diesem Code werden Ihre Farbfotos als Schwarzweißfotos angezeigt, ist das nicht cool?

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

2. Verwenden Sie:not(), um Rahmen auf das Menü anzuwenden bzw. die Anwendung aufzuheben

Fügen Sie zunächst jedem Menüpunkt einen Rahmen hinzu

/* add border */
.nav li {
  border-right: 1px solid #666;
}
……然后再除去最后一个元素……
// remove border /
.nav li:last-child {
  border-right: none;
}
……可以直接使用 :not() 伪类来应用元素：
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Auf diese Weise wird der Code angezeigt sauber sein.

Wenn Ihr neues Element über Geschwisterelemente verfügt, können Sie natürlich auch den universellen Geschwisterselektor (~) verwenden:

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

3. Seitenoberseitenschatten

Das folgende einfache CSS3-Code-Snippet kann der Webseite einen schönen Oberseitenschatteneffekt hinzufügen:

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}

4. Zeilenhöhe zum Text hinzufügen

Sie Sie müssen die Zeilenhöhe nicht jeder p-, h-Markierung usw. einzeln hinzufügen. Fügen Sie einfach zum Text hinzu:

body {
  line-height: 1;
}

Auf diese Weise können Textelemente problemlos vom Textkörper übernommen werden.

5. Alles vertikal zentrieren

Um alles vertikal zu zentrieren, ist es so einfach:

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Sehen Sie, ist das nicht ganz einfach?

Hinweis: Seien Sie vorsichtig mit Flexbox in IE11.

6. Durch Kommas getrennte Listen

Lassen Sie HTML-Listenelemente wie eine echte, durch Kommas getrennte Liste aussehen:

ul > li:not(:last-child)::after {
  content: ",";
}

Verwenden Sie die Pseudoklasse :not() für das letzte Listenelement.

7. Verwenden Sie negatives n-tes untergeordnetes Element, um Elemente auszuwählen

Verwenden Sie negatives n-tes untergeordnetes Element in CSS, um Element 1 bis Element n auszuwählen.

li {
  display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

8. Verwenden Sie SVG für Symbole

Es gibt keinen Grund, SVG nicht für Symbole zu verwenden:

.logo {
  background: url("logo.svg");
}

SVG lässt sich gut für alle Auflösungstypen skalieren und unterstützt alle Browser kehren zu IE9 zurück. Auf diese Weise können Sie .png-, .jpg- oder .gif-Dateien vermeiden.

9. Anzeigetext optimieren

Manchmal werden Schriftarten nicht auf allen Geräten optimal angezeigt, also lassen Sie das Gerät durchsuchen. Um Ihnen zu helfen:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Hinweis: Bitte verwenden Sie „optimizeLegibility“ verantwortungsbewusst. Außerdem bietet IE/Edge keine Unterstützung für die Textwiedergabe.

10. Verwenden Sie die maximale Höhe für reine CSS-Schieberegler

Verwenden Sie die maximale Höhe und das Ausblenden von Überläufen, um einen reinen CSS-Schieberegler zu implementieren:

.slider ul {
  max-height: 0;
  overlow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

11. Boxgröße erben

Lassen Sie die Boxgröße von HTML erben:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Dies erleichtert die Verwendung von Plugins oder anderen Komponenten, die andere Verhaltensweisen nutzen Die Boxgröße wurde geändert.

12. Tabellenzellen haben die gleiche Breite

Tabellen sind mühsam zu bearbeiten, stellen Sie daher sicher, dass Sie table-layout:fixed verwenden Behalten Sie die gleiche Breite der Zellen bei:

.calendar {
  table-layout: fixed;
}

13. Verwenden Sie Flexbox, um verschiedene Hacks loszuwerden in Rändern

Wenn Sie Spaltentrennzeichen verwenden müssen, können Sie durch die Leerzeicheneigenschaft von Flexbox die Hacks für das n-te, erste und letzte untergeordnete Element entfernen:

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

Jetzt werden die Listentrennzeichen in gleichmäßigen Abständen angezeigt.

14. Verwenden Sie die Attributauswahl für leere Links

Zeigen Sie den Link an, wenn das a-Element keinen Textwert hat, das href-Attribut jedoch einen Link:

a[href^="http"]:empty::before {
  content: attr(href);
}

Ganz praktisch.

15. Maus-Doppelklick erkennen

HTML:

<p class="test3">
  <span><input type="text" value=" " readonly="true" />
  <a href="http://renpingjun.com">Double click me</a></span>
</p>

CSS:

.test3 span {
  position: relative;
}
.test3 span a {
  position: relative;
  z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
  z-index: 4;
}
.test3 span input {
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: -1px;
  left: 0;
  width: 101%;  /* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}
.test3 span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

16. CSS-Schreibdreieck

/* create an arrow that points up */
p.arrow-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* create an arrow that points down */
p.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
/* create an arrow that points left */
p.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
/* create an arrow that points right */
p.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

17. Verwendung von CSS3 calc()

calc() wird wie eine Funktion verwendet und kann dynamische Werte für Elemente festlegen:

/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

18. Textverlaufseffekt

Der Textverlaufseffekt ist sehr beliebt und kann leicht mit CSS3 erreicht werden:

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

19. Mausereignisse deaktivieren

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

以上内容就是20 个 CSS 高级技巧汇总，希望能帮助到大家。

相关推荐：

最实用的制作网页小技巧总结

css的开发小技巧

CSS布局有哪些技巧

几个好用的css函数小技巧

最全的CSS开发常用技巧

Das obige ist der detaillierte Inhalt vonEine Zusammenfassung von 20 fortgeschrittenen CSS-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!