Zusammenfassung und Weitergabe fortgeschrittener CSS-Kenntnisse

Dieser Artikel gibt Ihnen hauptsächlich eine Zusammenfassung fortgeschrittener CSS-Fähigkeiten, die dazu führen, dass die Menschen immer fauler werden. Nachfolgend sind die fortgeschrittenen CSS-Techniken aufgeführt, die ich zusammengestellt habe. Ich hoffe, Sie sind zu faul, dies zu tun. <br>

1. Schwarzweißbild

Dieser Code lässt Ihre Farbfotos als Schwarzweißfotos erscheinen, nicht wahr? Ist es cool?

<br>

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

   Nach dem Login kopieren

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

<br/>

1. /* add border */
   .nav li {
     border-right: 1px solid #666;
   }

   Nach dem Login kopieren

und entfernen Sie dann den letzten one Elements

<br/>

1. // remove border /
   .nav li:last-child {
     border-right: none;
   }

   Nach dem Login kopieren

kann die Pseudoklasse :not() direkt verwenden, um Elemente anzuwenden:

<br/>

1. .nav li:not(:last-child) {
     border-right: 1px solid #666;
   }

   Nach dem Login kopieren

Auf diese Weise ist der Code sauber, leicht zu lesen und leicht zu verstehen.

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

<br/>

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

   Nach dem Login kopieren

3. Seitenoberseitenschatten

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

<br/>

1. 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;
   }

   Nach dem Login kopieren

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 Textkörper hinzu:

<br/>

1. body {
     line-height: 1;
   }

   Nach dem Login kopieren

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

5. Alles vertikal zentrieren

Um alles vertikal zu zentrieren, ist es so einfach:

<br/>

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

   Nach dem Login kopieren

Sehen Sie, ist das nicht ganz einfach?

Hinweis: Seien Sie vorsichtig mit Flexbox in IE11

6. Durch Kommas getrennte Liste

Machen HTML-Listenelemente sehen aus wie eine echte, durch Kommas getrennte Liste:

<br/>

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

   Nach dem Login kopieren

für die letzten Listenelemente verwenden die Pseudoklasse :not().

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.

<br/>

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

   Nach dem Login kopieren

8. Verwenden Sie SVG für Symbole

Wir verzichten darauf Es gibt keine Gründe, SVG nicht für Symbole zu verwenden:

<br/>

1. .logo {

2. Hintergrund: url("logo.svg");

3. }

SVG für alle Alle Auflösungstypen verfügen über eine gute Skalierbarkeit und unterstützen alle Browser, die zu IE9 zurückkehren. 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:

<br/>

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

   Nach dem Login kopieren

Hinweis: Bitte verwenden Sie activateLegibility verantwortungsvoll. 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:

<br/>

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

   Nach dem Login kopieren

11. Boxgröße erben

, um Box zu lassen -sizing erbt HTML:

<br/>

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

   Nach dem Login kopieren

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

12. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

<br/>

1. .calendar {
     table-layout: fixed;
   }

   Nach dem Login kopieren

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

<br/>

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

   Nach dem Login kopieren

现在，列表分隔符就会在均匀间隔的位置出现。

14. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

<br/>

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

   Nach dem Login kopieren

相当方便。

15. 检测鼠标双击

HTML：

<br/>

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

   Nach dem Login kopieren

CSS：

<br/>

1. .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;
   }

   Nach dem Login kopieren

16. CSS 写出三角形

<br/>

1. /* 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;
   }

   Nach dem Login kopieren

17. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

<br/>

1. /* 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);
   }

   Nach dem Login kopieren

18. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

<br/>

1. 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)));}

   Nach dem Login kopieren

19. 禁用鼠标事件

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

<br/>

1. .disabled { pointer-events: none; }

   Nach dem Login kopieren

20. 模糊文本

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

<br/>

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

   Nach dem Login kopieren

相关推荐：

CSS高级技巧

常用的CSS高级技巧_html/css_WEB-ITnose

你需要知道的三个CSS技巧

Das obige ist der detaillierte Inhalt vonZusammenfassung und Weitergabe fortgeschrittener CSS-Kenntnisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!