建站
咨詢
售后
建站咨詢
新聞中心
為了充分利用本文，我建議打開一個(gè) CodePen 或 CodeSandbox 選項(xiàng)卡，這樣您就可以在閱讀本文時(shí)使用代碼。
安新網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
CSS（層疊樣式表）是一種功能強(qiáng)大的標(biāo)記語言，允許 Web 開發(fā)人員創(chuàng)建視覺效果驚人且響應(yīng)迅速的設(shè)計(jì)。
以我的愚見，CSS（尤其是與 JS 結(jié)合以實(shí)現(xiàn)響應(yīng)）可能是 Web 開發(fā)中最重要的部分。
一旦我們達(dá)到了特定的性能閾值，普通用戶就會(huì)對(duì)您網(wǎng)站的美學(xué)更感興趣，而不是它的相對(duì)加載時(shí)間。 CSS 也變得非常容易通過組件庫（Bootstrap、Material 等）從您的工作流程中抽象出來。
一些開發(fā)人員也可能選擇大量使用 javascript 的樣式管理方法（即動(dòng)態(tài)添加/減去類），但這會(huì)創(chuàng)建更復(fù)雜的代碼庫并可能使應(yīng)用程序更慢。
今天我們將探索一些鮮為人知的 CSS 屬性，這樣您就可以在不犧牲性能的情況下為您的應(yīng)用程序增添光彩，并將您的前端技能提升到一個(gè)新的水平。
雖然有許多廣為人知的 CSS 屬性和技術(shù)，但還有一些鮮為人知但非常有用的提示和技巧可以將您的網(wǎng)頁設(shè)計(jì)提升到新的高度。
在本文中，我們將探索 15個(gè)鮮為人知的 CSS 技巧，它們將幫助您增強(qiáng)網(wǎng)頁設(shè)計(jì)的性能，并保持有趣性。
1. 使用 :not() 偽類來簡化你的 CSS
:not() 偽類允許您將樣式應(yīng)用于所有不匹配指定選擇器的元素。 這是簡化 CSS 并避免手動(dòng)列出元素或應(yīng)用類來排除某些元素的好方法。
/* Apply styles to all elements except paragraph and anchor tags */
:not(p, a) {
/* Your styles here */
}
2. 使用 ::before 偽元素為損壞的圖像添加樣式
損壞的圖像會(huì)對(duì)您網(wǎng)站的美觀產(chǎn)生負(fù)面影響。 為了優(yōu)雅地處理它們，您可以使用 ::before 偽元素和 content 屬性來顯示替代消息或圖標(biāo)來代替損壞的圖像。
img::before {
content: "Image not available";
display: block;
text-align: center;
/* Additional styles here */
}3.使用:empty偽類隱藏空元素
有時(shí)，您可能希望隱藏空元素以保持干凈的布局。 您可以使用 :empty 偽類來隱藏這些元素，而不需要 JavaScript。
div:empty {
display: none;
}4.使用calc()進(jìn)行動(dòng)態(tài)計(jì)算
calc() 函數(shù)使您能夠使用 CSS 中的不同單位執(zhí)行計(jì)算，例如百分比、像素和 em。 這在創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)特別有用。
.container {
width: calc(100% - 20px);
}5. 使用 :hover 偽類和過渡屬性為元素設(shè)置動(dòng)畫
您可以使用 :hover 偽類結(jié)合 transition 屬性創(chuàng)建簡單的動(dòng)畫。 這是一種無需依賴 JavaScript 或外部庫即可為您的設(shè)計(jì)添加交互性的輕量級(jí)方法。
.button {
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #f00;
}6.使用*選擇器應(yīng)用全局樣式
* 選擇器是一個(gè)通配符選擇器，它以頁面上的所有元素為目標(biāo)。 通過使用此選擇器，您可以輕松地將全局樣式應(yīng)用到您的網(wǎng)站。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}7. 設(shè)置第一個(gè)和最后一個(gè)子元素的樣式
您可以使用 :first-child 和 :last-child 偽類來定位和設(shè)置父元素的第一個(gè)和最后一個(gè)子元素的樣式。 這在設(shè)計(jì)列表或?qū)Ш讲藛螘r(shí)特別有用。
li:first-child {
font-weight: bold;
}
li:last-child {
border: none;
}8. 使用 currentColor 關(guān)鍵字來實(shí)現(xiàn)一致的顏色樣式
.button {
color: #f00;
border: 1px solid currentColor;
}9. 使用 :focus-within 偽類來設(shè)置有焦點(diǎn)子元素的樣式
.form-group:focus-within {
border: 1px solid #f00;
}10.實(shí)現(xiàn)CSS變量，方便主題切換
CSS 變量，也稱為自定義屬性，允許您在整個(gè)樣式表中存儲(chǔ)和重用值。 這在創(chuàng)建主題或需要一次更改多個(gè)值時(shí)特別有用。
:root {
--primary-color: #f00;
}
.button {
background-color: var(--primary-color);
}11. 使用 :checked 偽類樣式復(fù)選框和單選輸入
由于瀏覽器不一致，自定義復(fù)選框和無線電輸入的外觀可能具有挑戰(zhàn)性。 :checked 偽類允許您在選擇這些元素時(shí)設(shè)置它們的樣式，從而提供一致且視覺上吸引人的用戶體驗(yàn)。
input[type="checkbox"]:checked + label {
background-color: #f00;
/* Additional styles here */
}
input[type="radio"]:checked + label {
border: 2px solid #f00;
/* Additional styles here */
}12. 使用 :target 偽類在沒有 JavaScript 的情況下創(chuàng)建滾動(dòng)效果
:target 偽類允許您在元素是當(dāng)前 URL 片段標(biāo)識(shí)符（“#”之后的部分）的目標(biāo)時(shí)設(shè)置元素樣式。 這可用于創(chuàng)建滾動(dòng)效果或突出顯示特定部分，而無需依賴 JavaScript。
section:target {
background-color: #f0f;
/* Additional styles here */
}13、實(shí)現(xiàn)::selection偽元素自定義文本選擇
::selection 偽元素允許您設(shè)置元素中所選文本外觀的樣式。 這可用于通過將文本選擇顏色與您網(wǎng)站的配色方案相匹配來創(chuàng)建更具凝聚力的設(shè)計(jì)。
::selection {
background-color: #f00;
color: #fff;
}14. 利用 :required 和 :optional 偽類來設(shè)置表單輸入的樣式
:required 和 :optional 偽類使您能夠根據(jù)它們被標(biāo)記為必需還是可選來設(shè)置表單輸入的樣式。 這有助于向用戶提供有關(guān)特定表單字段重要性的視覺提示。
input:required {
border: 2px solid #f00;
}
input:optional {
border: 1px solid #ccc;
}15. 使用 ::placeholder 偽元素來設(shè)置輸入占位符的樣式
::placeholder 偽元素允許您在輸入元素中設(shè)置占位符文本的樣式。 這可用于創(chuàng)建視覺上一致且有吸引力的表單，同時(shí)為用戶提供有用的指導(dǎo)。
input::placeholder {
color: #f00;
font-style: italic;
}總結(jié)
CSS就像任何與代碼相關(guān)的東西一樣，需要我們熟能生巧！ 因此，我們可以在 CodePen/CodeSandbox 中測(cè)試其中一些屬性，并增加對(duì)這些鮮為人知的屬性的熟悉程度，以便您可以將它們添加到您的下一個(gè)應(yīng)用程序中。
網(wǎng)頁題目：15個(gè)鮮為人知的CSS技巧
分享路徑：http://www.5511xx.com/article/djpjghd.html
