這篇文章要跟大家分享12個值得收藏的 CSS 技巧,大家可以試著記住,在關鍵時可救命喲!希望對大家有幫助!
1. 使用 Shape-outside 在浮動圖像周圍彎曲文字
它是一個允許設定形狀的 CSS 屬性。它也有助於定義文字流動的區域。 css程式碼:
.any-shape { width: 300px; float: left; shape-outside: circle(50%); }
2. 魔法組合
這個小組合其實可以防止你在 HTML 中遇到的大多數佈局錯誤的問題。我們確實不希望水平滑桿或絕對定位的項目做他們想做的事情,也不希望到處都是隨機的邊距和填充。所以這是你們的魔法組合。
* { padding: 0; margin: 0; max-width: 100%; overflow-x: hidden; position: relative; display: block; }
有時「display:block」沒有用,但在大多數情況下,你會將<a></a>
和<span></span>
視為與其他塊一樣的塊。所以,在大多數情況下,它實際上會幫助你!
3. 分割 HTML 和 CSS
這更像是一種「工作流程」類型的技巧。我建議你在開發時創建不同的 CSS 文件,最後才合併它們。例如,一個用於桌面,一個用於移動等。最後,你必須合併它們,因為這將有助於最大限度地減少您網站的 HTTP 請求數量。
同樣的原則也適用於 HTML。如果你不是在 Gatsby 等 SPA 環境中進行開發,那麼 PHP 可用於包含 HTML 程式碼片段。例如,你希望在單獨的檔案中保留一個「/modules」資料夾,該資料夾將包含導覽列、頁尾等。因此,如果需要進行任何更改,你不必在每個頁面上都對其進行編輯。模組化越多,結果越好。
4. ::首字母
它將樣式套用於區塊級元素的第一個字母。因此,我們可以從印刷或紙本雜誌中引入我們熟悉的效果。如果沒有這個偽元素,我們將不得不創建許多跨度來實現這種效果。例如:
這是如何做到的?程式碼如下:
p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }
5. 四大核心屬性
CSS 動畫提供了一種相對簡單的方法來在大量屬性之間平滑過渡。良好的動畫介面依賴於流暢流暢的體驗。為了在我們的動畫時間軸中保持良好的性能,我們必須將我們的動畫屬性限制為以下四個核心:
- 縮放- transform:scale(2)
- 旋轉- transform:rotate(180deg)
- #位置– transform:translateX(50rem)
- #不透明度- opacity: 0.5
邊框半徑、高度/寬度或邊距等動畫屬性會影響瀏覽器佈局方法,而背景、顏色或框陰影的動畫會影響瀏覽器繪製方法。所有這些都會大大降低您的 FPS (FramesPerSecond)。您可以使用這些屬性來產生一些有趣的效果,但應謹慎使用它們以保持良好的性能。
6. 使用變數保持一致
保持一致性的一個好方法是使用 CSS 變數或預處理器變數來預先定義動畫時間。
:root{ timing-base: 1000;}
在不定義單元的情況下設定基線動畫或過渡持續時間為我們提供了在 calc() 函數中呼叫此持續時間的靈活性。此持續時間可能與我們的基本 CSS 變數不同,但它始終是對該數字的簡單修改,並將始終保持一致的體驗。
7. 圓錐梯度
有沒有想過是否可以只用 CSS 建立圓餅圖?好消息是,您實際上可以!這可以使用 conic-gradient 函數來完成。此函數會建立一個由漸變組成的影像,其中設定的顏色過渡圍繞著中心點旋轉。您可以使用以下程式碼行執行此操作:
.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }
8. 更改文字選擇顏色
#要更改文字選擇顏色,我們使用 ::selection。它是一個偽元素,在瀏覽器級別覆蓋以使用您選擇的顏色替換文字突出顯示顏色。使用遊標選擇內容後即可看到效果。
::selection { background-color: #f3b70f; }
9. 懸停效果
懸停效果通常用於按鈕、文字連結、網站的區塊部分、圖示等。如果您想在有人將滑鼠懸停在其上時更改顏色,只需使用相同的 CSS,但要添加 :hover到它並更改樣式。這是您的方法;
.m h2{ font-size:36px; color:#000; font-weight:800; } .m h2:hover{ color:#f00; }
當有人將滑鼠懸停在 h2 標籤上時,這會將您的 h2 標籤的顏色從黑色更改為紅色。它非常有用,因為如果您不想更改它,則不必再次聲明字體大小或粗細。它只會更改您指定的任何屬性。
10.投影
新增此屬性可為透明影像帶來更好的陰影效果。您可以使用給定的程式碼行執行此操作。
.img-wrapper img{ width: 100% ; height: 100% ; object-fit: cover ; filter: drop-shadow(30px 10px 4px #757575); }
11. 使用放置项居中 Div
居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友,你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素,然后使用如下所示的 place-items 属性。
main{ width: 100% ; height: 80vh ; display: grid ; place-items: center center; }
12. 使用 Flexbox 居中 Div
我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题,使用 flexbox 将 div 居中。为此,让我们看一下下面的示例:
<div class="center h-48"> <div></div> </div>
.center { display: flex; align-items: center; justify-content: center; } .center div { width: 100px; height: 100px; border-radius: 50%; background: #b8b7cd; }
首先,我们需要确保父容器持有圆,即 flex-container。在它里面,我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性:
- display: flex; 这确保父容器具有 flexbox 布局。
- align-items: center; 这可确保 flex 子项与横轴的中心对齐。
- justify-content: center; 这确保 flex 子项与主轴的中心对齐。
之后,我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的,试试吧!
更多编程相关知识,请访问:编程视频!!
以上是12個值得收藏的 CSS 技巧! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Dreamweaver Mac版
視覺化網頁開發工具

SublimeText3漢化版
中文版,非常好用

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中