CSS中content屬性的妙用

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文講解CSS中使用頻率並不高的content屬性,通過多個實用的案例,帶你由淺入深的掌握content的用法,讓代碼變得更加簡潔、高效。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"定義","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"W3school中這樣定義:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"content 屬性與 :before 及 :after 僞元素配合使用,來插入生成內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該屬性用於定義元素之前或之後放置的生成內容。默認地,這往往是行內內容,不過該內容創建的框類型可以用屬性 display 控制。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在前端日常開發中,content屬性使用頻率並不高,所以開發者一般對它的理解並不深入,通常會在清除浮動、字體圖標時偶爾使用。下面通過各種案例,來一起看看content的妙用。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"案例","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. 清除浮動","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n.left {float: left}\n.right {float: right}\n.clear:after {\n content: '';\n clear: both;\n display: block;\n}\n\n\n
\n
\n
\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"父元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".container","attrs":{}}],"attrs":{}},{"type":"text","text":"中兩個子元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".left","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".right","attrs":{}}],"attrs":{}},{"type":"text","text":"浮動後會脫離文檔流,無法撐起容器,造成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".container","attrs":{}}],"attrs":{}},{"type":"text","text":"高度爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"0","attrs":{}}],"attrs":{}},{"type":"text","text":"。使用僞元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":"清除浮動,三個屬性缺一不可:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"content: ''; ","attrs":{}}],"attrs":{}},{"type":"text","text":"通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":"添加一個內容爲空的僞元素。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"clear: both; ","attrs":{}}],"attrs":{}},{"type":"text","text":"僞元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":"兩側浮動清除。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"dispaly: block; ","attrs":{}}],"attrs":{}},{"type":"text","text":"設置塊元素,因爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":"只對塊元素有效。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"說到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性,使用最多的就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear: both","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left/right","attrs":{}}],"attrs":{}},{"type":"text","text":"用的卻很少,因爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"both","attrs":{}}],"attrs":{}},{"type":"text","text":"已經包含","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"left/right","attrs":{}}],"attrs":{}},{"type":"text","text":"特性,簡單直接還有效。想更加深入瞭解","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性,可以看看張鑫旭大神的","attrs":{}},{"type":"link","attrs":{"href":"http://www.zhangxinxu.com/wordpress/?p=4179","title":"","type":null},"content":[{"type":"text","text":"準確理解CSS clear:left/right的含義及實際用途","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. 小三角的氣泡窗口","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n.box {\n width: 200px;\n height: 100px;\n border-radius: 5px;\n background: #fff;\n position: relative;\n}\n.box:after {\n content: '';\n position: absolute;\n bottom: -20px;\n right: 20px;\n width: 0;\n height: 0;\n border-top: 10px solid #fff;\n border-bottom: 10px solid transparent;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n}\n\n\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fc/fce4798ce74c9fed9a359cce99288b9e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配合僞元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":",實現了一個右下角帶倒三角指向性的氣泡窗口。通過調整","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"各邊的顏色和絕對定位位置,可以繪製出指向不同的氣泡窗口,只用一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"div","attrs":{}}],"attrs":{}},{"type":"text","text":"標籤實現,是不是既簡潔又美觀。可能你會想到這是僞元素","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":"的效果,和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性無關,實際上去掉","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"後","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":after","attrs":{}}],"attrs":{}},{"type":"text","text":"是不生效的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/be/becad43c7e97108611a7b2531f5b7ca0.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3. 字體圖標","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一種是瀏覽器自帶的特殊字符:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n.music:before {\n content: '\\266C';\n color: red;\n}\n\n\n晴天-周杰倫\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c0/c0373cb8ce32836d1bc83fb7de41b017.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器支持很多字體圖標,如:天氣☀、雪花❄、三葉草☘、太極☯等等有趣的字符。參考","attrs":{}},{"type":"link","attrs":{"href":"https://www.22vd.com/33993.html","title":"","type":null},"content":[{"type":"text","text":"網頁HTML特殊字符編碼對照表","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二種是外部引入字體圖標,如Bootstrap中的Glyphicon字體圖標:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n\n\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/30/30313b228a8c94ed8f069146559e73cd.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏爲什麼沒有寫CSS樣式呢,因爲bootstrap.min.css中已經定義好了glyphicon-heart的樣式,直接在","attrs":{}},{"type":"link","attrs":{"href":"https://v3.bootcss.com/components/#glyphicons","title":"","type":null},"content":[{"type":"text","text":"官網","attrs":{}}]},{"type":"text","text":"上查看:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/36/36cff08246716debfcd5b50fecad3b79.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要說明的是,本地引入bootstrap.min.css後,還需要引入字體圖標庫glyphicons-halflings-regular.woff2,字體圖標才能生效。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n\n\n@font-face {\n font-family: 'Glyphicons Halflings';\n src: url(../fonts/glyphicons-halflings-regular.eot);\n src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),\n url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),\n url(../fonts/glyphicons-halflings-regular.woff) format('woff'),\n url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),\n url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按照上述url路徑,將glyphicons-halflings-regular.woff2放到如下目錄結構中即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/58/586261d19063f1b467e88cffe58fcf19.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4. 無內容提示","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n\ndiv:empty:after {\n content: '暫無數據';\n color: red;\n}\n\n\n
有內容數據
\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fc/fcfc309dd3e10d19221a85fe911174be.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當元素內容爲空時,通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"內容“暫無數據”進行展示。可使用場景:後臺接口返回數據後,插入到頁面DOM中,當後臺返回數據爲空時,通過CSS直接提示暫無數據,不需要使用JavaScript處理。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個有趣的現象,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"內容“暫無數據”無法被選中,這是因爲僞元素用於創建一些不在文檔樹中的元素,雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5. 麪包屑菜單","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nul li {\n display: inline-block;\n font-weight: bold;\n}\n\nul li:not(:last-child):after {\n content: '\\276D';\n margin: 5px;\n}\n\n\n
    \n
  • 首頁
  • \n
  • 商品
  • \n
  • 詳情
  • \n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4a/4a5b16f484d5720200558d3691792aee.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"又是一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"值爲特殊字符的例子,配合僞類和僞元素完成麪包屑菜單。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6. 加載中...動畫","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n.loading:after {\n content: \".\";\n animation: loading 2s ease infinite;\n}\n\n@keyframes loading {\n 33% {\n content: \"..\";\n }\n 66% {\n content: \"...\";\n }\n}\n\n\n

加載中

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c792f3c2923acf456627c38fc320b1a.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"animation","attrs":{}}],"attrs":{}},{"type":"text","text":"動畫值含義:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"loading:animation-name,規定需要綁定到選擇器的 keyframe 名稱爲loading。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2s:animation-duration,規定完成動畫所花費的時間2秒。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ease:animation-timing-function,規定動畫的速度曲線,先慢中快後慢。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"infinite:animation-iteration,規定動畫應該播放的次數爲無限次。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"animation","attrs":{}}],"attrs":{}},{"type":"text","text":"動畫完成33%、66%時與","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"內容配合,實現動態“加載中...”的效果。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7. 插入圖片","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"3"},"content":[{"type":"text","text":"\n.loading:before {\n content: url(\"../static/img/loading.gif\");\n vertical-align: middle;\n}\n\n\n
加載中...
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fc/fc45f5fa5b397bcd3af63619c099c7a0.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了插入字體圖標,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"還可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"url()","attrs":{}}],"attrs":{}},{"type":"text","text":"方法插入圖片,和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性類似可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"url","attrs":{}}],"attrs":{}},{"type":"text","text":"指定一個圖片路徑,不同的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性無法控制圖片大小,使用條件有限。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"8. attr屬性內容生成","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n.web:after {\n content: \"(\"attr(href)\")\"\n}\n\n\nechevera\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c2/c2f7887dc8785e8ff2f4ecdc125fbc94.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"值也可以是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"attr()","attrs":{}}],"attrs":{}},{"type":"text","text":"方法,用來獲取指定屬性的值,可插入到指定的位置。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"9. 半邊特效","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nspan{\n font-family: sans-serif;\n font-size: 30px;\n font-weight: bold;\n position: relative;\n color: green;\n}\nspan:before{\n content: attr(text);\n color: orange;\n position: absolute;\n left: 0;\n top: 0;\n width: 50%;\n overflow: hidden;\n}\n\n\necheverra\n\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c2/c2e138da75c75fd0da96feac7db6e54f.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"半邊特效是通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"attr()","attrs":{}}],"attrs":{}},{"type":"text","text":"方法獲取","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"text","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性值,屬性值與其內容相同,巧妙的設置絕對定位,只顯示一半並覆蓋了原文本內容,實現文字半邊特效,是不是還挺炫酷的。需要注意的是有些","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"font-family","attrs":{}}],"attrs":{}},{"type":"text","text":"字體會有文字無法重合的問題。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"10. 文字引號","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nspan {\n quotes: '“' '”';\n}\nspan:before {\n content: open-quote;\n}\nspan:after {\n content: close-quote;\n}\n\n\n

魯迅說過:真正的勇士,敢於直面慘淡的人生,敢於正視淋漓的鮮血。

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f7/f796a2c9c40d3dd6a52926b63607d4d5.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"利用元素的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性指定雙引號,使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"open-quote","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性值設置開口引號,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"close-quote","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性值設置閉合引號,當然","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":"也可以指定其他符號。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"11. 添加章節數","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nul{\n counter-reset: section;\n}\nli{\n list-style-type: none;\n counter-increment: section;\n}\nli:before{\n content: counters(section, '-') '.';\n}\n\n\n
    \n
  • 章節一
  • \n
  • 章節二\n
      \n
    • 章節二一
    • \n
    • 章節二二
    • \n
    • 章節二三
    • \n
    \n
  • \n
  • 章節三
  • \n
  • 章節四
  • \n
  • 章節五\n
      \n
    • 章節五一
    • \n
    • 章節五二
    • \n
    \n
  • \n
  • 章節六
  • \n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5b/5bfdef7e9553315d85999b181b2a2a75.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏用到了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter","attrs":{}}],"attrs":{}},{"type":"text","text":"計數器方法,涉及到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-reset","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-increment","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter()","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counters()","attrs":{}}],"attrs":{}},{"type":"text","text":"幾個屬性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"counter-reset","attrs":{}}],"attrs":{}},{"type":"text","text":"用來指定計數器名稱,例子中命名爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"section","attrs":{}}],"attrs":{}},{"type":"text","text":",同時可以指定計數器開始計數的數值,如指定開始計數數值爲1:","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-reset: section 1;","attrs":{}}],"attrs":{}},{"type":"text","text":",不指定默認爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"0","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"counter-increment","attrs":{}}],"attrs":{}},{"type":"text","text":"用來指定計數器每次遞增的值,如指定計數器遞增值爲2:","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-increment: section 2;","attrs":{}}],"attrs":{}},{"type":"text","text":",默認值爲1,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-increment","attrs":{}}],"attrs":{}},{"type":"text","text":"只要指定了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter-reset","attrs":{}}],"attrs":{}},{"type":"text","text":",對應的計數器的值就會變化。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"counter(name, style)","attrs":{}}],"attrs":{}},{"type":"text","text":"用來輸出計數器的值。其中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"name","attrs":{}}],"attrs":{}},{"type":"text","text":"爲計數器名稱,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"style","attrs":{}}],"attrs":{}},{"type":"text","text":"可選參數,默認爲阿拉伯數字,也可指定","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"list-style-type","attrs":{}}],"attrs":{}},{"type":"text","text":"支持的值,如羅馬數字","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lower-roman","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"counters(name, strings, style)","attrs":{}}],"attrs":{}},{"type":"text","text":"用來處理嵌套計數器,同樣是輸出計數器的值,和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"counter()","attrs":{}}],"attrs":{}},{"type":"text","text":"不同的是多了一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"strings","attrs":{}}],"attrs":{}},{"type":"text","text":"參數,表示子序號的連接字符串。例如","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1.1","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"string","attrs":{}}],"attrs":{}},{"type":"text","text":"就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"'.'","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"1-1","attrs":{}}],"attrs":{}},{"type":"text","text":"就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"'-'","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於計數器的詳細的教程,同樣可以參考CSS大神張鑫旭的","attrs":{}},{"type":"link","attrs":{"href":"http://www.zhangxinxu.com/wordpress/?p=4303","title":"","type":null},"content":[{"type":"text","text":"CSS counter計數器(content目錄序號自動遞增)詳解","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"12. 計算checkbox選中數","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nform {\n counter-reset: count 0;\n}\n\ninput[type=\"checkbox\"]:checked {\n counter-increment: count 1;\n}\n\n.result:after {\n content: counter(count);\n}\n\n\n
\n \n \n \n \n \n \n\n
已選:
\n
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/29/29c78094cd9e8bbc19174bcce31ca50f.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"巧妙運用計數器配合","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":checked","attrs":{}}],"attrs":{}},{"type":"text","text":"僞類,選中計數器增加1,取消選中減1,用CSS實現動態計數功能。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總結content屬性值可以爲以下幾種:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"string字符串,最常見的,對應案例:清除浮動、小三角的氣泡窗口、字體圖標、無內容提示、麪包屑菜單、加載中...動畫。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"url()方法,對應案例:插入圖片。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"attr()方法,對應案例:attr屬性內容生成、半邊特效。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"quotes引號,對應案例:文字引號。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"counter()方法,計數器功能,對應案例:添加章節數,計算checkbox選中數。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"儘管使用javaScript同樣可以實現上述的大部分功能,靈活性也更高,但使用CSS的好處就是可以極大地簡化開發,不佔用JS主線程,提升web的性能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實content的案例遠不止於此,在查閱相關資料的同時,我還見識到了另外一些神奇的用法,當然原理大致相同,本文的案例只是儘可能的帶你瞭解content不爲人知的一面,打開一個全新的世界,讓你舉一反三。如果能在實際開發中運用上,那就更Nice了,希望能對大家有所幫助。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你學“廢”了麼?","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule","attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文章首發於我的博客 ","attrs":{}},{"type":"link","attrs":{"href":"https://echeverra.cn/css-content","title":"","type":null},"content":[{"type":"text","text":"https://echeverra.cn/css-content","attrs":{}}]},{"type":"text","text":",原創文章,轉載請註明出處。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"歡迎關注我的微信公衆號 ","attrs":{}},{"type":"link","attrs":{"href":"https://cdn.jsdelivr.net/gh/echeverra/img@main/resource/20210723173540.jpg","title":"","type":null},"content":[{"type":"text","text":"echeverra","attrs":{}}]},{"type":"text","text":",一起學習進步!不定時會有資源和福利相送哦!","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule","attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章