在一行中就可以完成的7個CSS代碼技巧!

2021-12-30 web前端開發

英文 | https://javascript.plainenglish.io/7-tricks-to-write-css-code-in-one-line-64a4c9ffe57d學習使用編寫更少的CSS代碼，從而可以幫助你提升工作效率，實現更快地加載網站頁面。
同樣的功能，最後結果都是一樣的，一行就可以實現的，千萬不要寫多行，有人可能會說，一行書寫不易讀，但請想一下！如果一行就可以完成的效果，而你必須將所有內容都寫成多行，那會使 CSS 文件太長且更難以閱讀，不是嗎？以下是多個網頁中最常用的 CSS 代碼，可以快速減少到 一 行，其效果也一樣。
background: #000 url(images/image.png) no-repeat left top;background-color: #000;background-image: url(images/image.png)background-repeat: no-repeat;background-position: left top;
2、Animation(動畫)
anmation: crazy 4s ease-in-out 0.5s 12 backwards;//vsanimation-name: crazy;animation-duration: 4s;animation-timing-function: ease-in-out;animation-deplay: 0.5s;animation-iteration-count: 12;animation-dirrection: backwards;
font: itlaic bold 15px/1.2 Arial, sans-serif;//vsfont-style: italic;font-weight: bold;font-size: 15px;line-height: 1.2;font-family: Arial, sans-serif;
4、Margin（邊距）
margin: 10px 5px 10px 5px;//vsmargin-top:10px;mrgin-right: 5px;margin-bottom: 10px;margin-left: 5px;
5、List（列表）
list-style: dic outside url('img/shape.png')list-style-type: disc;list-style-position: outside;list_style-image: url('img/shape.png')
6、 Padding（填充）
padding: 1em 3px 30px 5px;//Vspadding-top: 1em;padding-right: 3px;padding-bottom: 30px;padding-left: 5px;
border: 1px solide #000//vsborder-width: 1px;border-style: solid;border-color: #000
這7個小實例，是不是很方便，大大減少了CSS代碼，提升了工作效率，是不是很方便？如果你還知道其他簡寫技巧的話，請記得與我們一起來分享！
今天的內容，請先將其保存起來以備將來使用。
感謝你的閱讀。
學習更多技能
請點擊下方公眾號

相關焦點

  • 一行 CSS 代碼的魅力
    之前在知乎看到一個很有意思的討論 一行代碼可以做什麼？[1]那麼，一行 CSS 代碼又能不能搞點事情呢？CSS Battle首先，這讓我想到了，年初的時候沉迷的一個網站 CSS Battle[2] 。0 0 400px #5d3a3a 是可以壓縮到 box-shadow:0+0+0+5in#5d3a3a，CSS 中 1in=96px，但是畫布只有 400px，5in 大於 400px，也沒有問題，能夠充滿畫布，但是 400px 相對 5in 字符多了 2 個。
  • 一行CSS 代碼搞定響應式布局
    最精彩的地方在於：所有的響應特性被添加到了一行 css 代碼中。這意味著我們不必將 HTML 與醜陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個屏幕創建媒體查詢。ok，讓我們發車吧。 設置 在本文中，我將繼續使用我在第一篇 CSS Grid 布局教程文章中的網格布局。然後，我們將在文章末尾添加圖片。
  • 編寫出色CSS代碼的13個建議
    利用CSS繼承如果頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你可以很好的維護你的代碼，並且還可以減少代碼量。屬性多的分行寫，屬性少於3個可以寫一行。9.
  • 讓CSS flex布局最後一行列表左對齊的N種方法
    作者：張鑫旭https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/一、justify-content對齊問題描述在CSS flex布局中，justify-content屬性可以控制列表的水平對齊方式，例如space-between值可以實現兩端對齊
  • 愈發熟練的 CSS 技巧
    font-size 的大小來計算坐作為一個單位；simple-flexible 是根據手淘團隊 lib-flexible.js，比較，改寫的一個插件，兼容 UC 豎屏轉橫屏出現的 BUG，自定義視覺設計稿的寬度：designWidth，設定最大寬度：maxWidth這裡有 simple-flexible 的 Github 地址，下載下來用即可;第一個參數是視覺設計稿的寬度，一般視覺設計稿有 750px，可以根據實際調整第二個參數則是設置製作稿的最大寬度
  • 注意CSS代碼中的!important屬性
    首頁 > 教程 > 關鍵詞 > 注意最新資訊 > 正文 注意CSS代碼中的！前幾天寫一些CSS代碼的時候又難為我了，因為那個該死的IE6對CSS的支持是如此的差勁，以前我還沒注意過，因為做的東西基本都是基於IE的，可是我這次為博客寫的CSS要支持不止IE一個瀏覽器，可恨的是我裝的Windows 7，這裡面自帶的是IE8瀏覽器，我自認為已經沒有問題了，可是打開IE6，仍然出現錯位，於是我決定看看IE6到底是什麼情況。
  • 為什麼我一行代碼就可以完成3個R包的RNA-seq差異分析呢
    exprSet=log(edgeR::cpm(exprSet)+1)  dim(exprSet)  exprSet=exprSet[names(sort(apply(exprSet, 1,mad),decreasing = T)[1:500]),]  dim(exprSet)  M=cor(log2(exprSet+1))  tmp=data.frame(g=
  • 20個讓你效率更高的CSS代碼技巧
    解決這個問題的最佳辦法是在CSS開頭為所有的元素設置通用的CSS Reset重置代碼，這樣你是在沒有任何默認內外邊距的基礎上進行布局，於是所產生的效果也就是統一的。網絡上已經有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你可以在你的項目中引用它們。
  • 20 個讓你效率更高的 CSS 代碼技巧
    解決這個問題的最佳辦法是在CSS開頭為所有的元素設置通用的CSS Reset重置代碼，這樣你是在沒有任何默認內外邊距的基礎上進行布局，於是所產生的效果也就是統一的。網絡上已經有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你可以在你的項目中引用它們。
  • 網頁性能之html css javascript
    2 圖中紅框內的這部分時間則表示瀏覽器從下載完成html之後開始構建dom，當發現一個image標籤時所花費的時間，由此可見dom是順序執行的，當發現image時便立即發起請求，而紫色透明條則是image發起請求時在網絡傳輸時所消耗的時間。3 圖中timeline藍色豎線所處的時間為domComplete時間，紅色豎線為dom的onload時間，由此可見兩種事件的差異。
  • 10 個CSS技巧前端開發必須要知道
    在項目開發中，有些容易被忽略的小問題帶來項目後期的膠水代碼。1、使用相對單位通常我們在項目開發中，使用px作為尺寸的單位，而不是使用相對單位，如：rem、em等。在萬物互聯的時代，最好的方式是相對單位rem、vh、vw等現代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各種終端設備。
  • HTML+CSS:認識css的概念與語法,了解css的優勢
    之前的文章給大家介紹了下網頁中常用的html的基本知識，從這篇文章開始我們開始介紹css的內容。可以這麼說學完了html你可以做出網頁的框架，學好了css之後呢，你就可以給做好的框架進行美化填色，做出各種各樣的網頁。
  • 網站變灰CSS代碼以及html代碼
    悼念舟曲，燭光祈福網頁顏色變黑白代碼1、為方便站點哀悼，特提供css濾鏡代碼，以表哀悼。以下為全站CSS代碼。，將代碼加到CSS最頂端就可以實現素裝。為在地震中遇難的同胞哀悼。
  • CSS文字處理實用小技巧總結
    作為程式設計師的我們，書寫代碼也需要大量的技巧。一份良好的代碼能讓人耳目一新，讓人容易理解，同時也讓自己成就感滿滿。
  • CSS學習筆記總結
    直接將css代碼書寫head標籤內style:專門用來放置css代碼進入此標籤內語法改變為css語法type:MIME數據類型,此數據類型囊括了數十種後綴名,專門用來提示瀏覽器按照何種語法解析因為在h5技術中
  • tailwindcss and postcss for 小程序第二個大版本發布啦!
    @latest tailwindcss-miniprogram-preset@latest一些框架，如vue/cli,uni-app,nuxt2(有postcss8插件)用的Postcss7舊版本，則使用postcss7-compatibility-build
  • Web開發者的福利 30段超實用CSS代碼
    CSS3發光輸入框下面的這段代碼重寫了瀏覽器的默認行為，可以讓Chrome和Safari瀏覽器下普通的表單輸入框產生發光效果。/13.pre標籤封裝代碼pre標籤常用來對代碼進行布局，可以解決因為行太多帶來的滾動條問題。
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。（1）css的繼承規則CSS的某些樣式代碼是具有繼承性的，那麼究竟什麼是繼承呢？比如下面代碼：我們設置p標籤的字體顏色為紅色並添加1像素的紅色邊框。在網頁中的顯示效果就如下圖所示：從上邊的圖片你可以看出字體顏色為紅色不僅使p標籤中的文字變成了紅色，還應用於p標籤中的所有子元素文本，這裡子元素為span標籤。但是邊框屬性並沒有應用到子元素中去。
  • CSS中內聯元素與塊級元素
    （可以使用display=block將行內元素轉換成塊元素，display=none表示生成的元素根本沒有框，也既不顯示元素，不佔用文檔中的空間）A：行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。B：說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的話，它將獨立一行出現。
  • CSS 與網絡性能
    <link rel="stylesheet" href="all.css" />如果我們把全部的 CSS 代碼都放在一個文件中，請求的表現如下：我們可以觀察到，這個單獨的 CSS 文件會以 最高 的優先級下載。