雖然 CSS 不像JavaScript那樣被廣泛使用，但它仍然是排名前 10 的編程語言。由于 CSS 非常健壯、相當(dāng)容易學(xué)習(xí)并且在不同瀏覽器中通用，因此它在web開發(fā)人員中很受歡迎。與其他編碼語言一樣，CSS 有幾個快捷使用的方式或技巧，可讓您編寫更簡潔的代碼、改進(jìn)設(shè)計元素并節(jié)省寶貴的時間。當(dāng)然，您也可以使用代碼編輯器將這些片段直接插入您的web應(yīng)用中。
您不必成為高級 Web 開發(fā)人員也可以輕松使用 CSS。來自 W3Techs 的數(shù)據(jù)顯示，96% 的網(wǎng)站都使用 CSS，并且能夠使用 CSS 來增強(qiáng)網(wǎng)站的布局和外觀。這也是 WordPress 等主要開源 CMS （內(nèi)容管理系統(tǒng)，類似于個人網(wǎng)頁、博客之類的系統(tǒng)）功能不可或缺的一部分。
事實(shí)上，大多數(shù)網(wǎng)站構(gòu)建工具允許用戶插入自定義 CSS 代碼。如果您是 CSS 新手，W3Cschool上有一個很棒的CSS教程視頻，您可以在其中學(xué)習(xí)基礎(chǔ)知識。如果您已經(jīng)了解CSS的基本使用，那么讓我們開始使用這十個 CSS 技巧。
1.如何使用CSS將內(nèi)容居中
將內(nèi)容放在屏幕中間可能會很棘手。但是，您可以使用?position: absolute?覆蓋動態(tài)位置并始終將內(nèi)容放置在中心。
它還適用于跨設(shè)備的所有分辨率。但是，請務(wù)必仔細(xì)檢查所有內(nèi)容是否按您的需要定位，即使在較小的屏幕上元素看起來也很自然。
示例片段：
section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 30px;
}2. 如何在 CSS 中固定元素的位置
盡管網(wǎng)站是動態(tài)的，但您可能希望在某些位置修復(fù)一些元素。您可以通過使用?position:absolute?腳本來做到這一點(diǎn)。
但是，請謹(jǐn)慎使用此方法并事先在每個屏幕尺寸和分辨率上進(jìn)行測試，以免破壞您網(wǎng)站的設(shè)計。
根據(jù)網(wǎng)頁文件中的特定位置節(jié)點(diǎn)使用該方法可確保元素對于所有用戶保持在相同位置。
示例片段：
/* suppose you want to fix your sidebar’s position and size */
.sidebar {
position: absolute;
top: 15px;
right: 15px;
width: 300px;
height: 150px;
}3. 如何在 CSS 中使圖片頁面自適應(yīng)
沒有什么比您的圖像超出用戶屏幕更糟糕的了。它絕對可以破壞您網(wǎng)站的設(shè)計并阻止用戶繼續(xù)使用下去。
但是，通過這個簡單的技巧，您可以確保您的圖像始終適合訪問者的屏幕，無論他們使用什么設(shè)備。
示例片段：
img {
max-width: 100%;
height: auto;
}4.如何在CSS中編輯單個頁面上的樣式
如果您有一個 CMS 并且希望您的某些帖子看起來與其他帖子不同，您可以使用自定義類來覆蓋站點(diǎn)的 CSS 樣式。這確保您只調(diào)整一個帖子頁面，而將其他頁面保留為默認(rèn)值。
當(dāng)您在 WordPress 博客上創(chuàng)建帖子時，它將帖子的 id 作為類包含在body中，例如：
然后你可以做這樣的修改來改變那個帖子頁面的樣式：
.postid-330 {
font-size: 24px;
font-weight: 750;
color: red;
}其他流行的 CMS 允許您向單個帖子添加自定義類。例如，Ghost 允許您將帖子標(biāo)記為精選帖子并添加.featured類。
但是，如果您發(fā)現(xiàn)自己經(jīng)常使用這種方法，最好修改主要的 CSS 樣式表，以避免編寫不必要的代碼。
這不僅適用于 CMS - 如果您有一個包含多個 HTML 文件的簡單網(wǎng)站，您可以將自定義樣式應(yīng)用于整個項(xiàng)目的元素，并通過相同的 CSS 文件調(diào)整它們。
例如，如果您有帶有 class 的頁面.landing：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>Landing Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="css/style.css" rel="stylesheet" />
<body class="landing">
<h1>Landing Page</h1>
<p>My landing page.</p>
</body>
</html>
另一個about頁面：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>About Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="css/style.css" rel="stylesheet" />
<body class="landing">
<h1>About Page</h1>
<p>My about page.</p>
</body>
</html>您可以將其添加到主樣式表中，以僅調(diào)整關(guān)于頁面上的樣式：
.about {
font-size: 24px;
font-weight: 750;
color: red;
}5. 如何在 CSS 中整合樣式
如果您知道要為多個項(xiàng)目添加 CSS 樣式，那么將這些代碼一段一段地編寫出來需要時間。但是，當(dāng)您用逗號分隔項(xiàng)目并在其中寫入 CSS 樣式時，樣式就會添加到所有項(xiàng)目中。
這有助于您節(jié)省時間并降低代碼的重量，因?yàn)槟槐囟啻尉帉戭愃频拇a行。
示例片段：
/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
border: 2px solid #000000;
}
/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
color: white;
font-size: 24px;
}6. CSS 中的訪問鏈接樣式
用戶點(diǎn)擊的訪問鏈接的默認(rèn)樣式可能不適用于您當(dāng)前站點(diǎn)的樣式。您可以使用 CSS 代碼來調(diào)整訪問者點(diǎn)擊鏈接前后的外觀。
然后，您可以將這些與您網(wǎng)站的整體風(fēng)格相匹配，以創(chuàng)造獨(dú)特的體驗(yàn)。
示例片段：
a:link {
color: #ff0000; /* the unvisited link is red */
}
a:visited {
color: #ee82ee; /* the visited link turns violet */
}7. CSS 中的懸停效果延遲
這個:hover選擇器是CSS偽類，它允許你創(chuàng)建一個懸停效果。但是，您可以通過添加一個transition元素來延遲懸停效果來進(jìn)一步調(diào)整你的風(fēng)格。
雖然它看起來很整潔，但它也會在用戶的眼睛中產(chǎn)生一種運(yùn)動感，進(jìn)一步引起對該元素的注意。
示例片段：
.entry h2 {
font-size: 48px;
color: #000000;
font-weight: 750;
}
/* Next, add a delay to the hover effect */
.entry h2:hover{
color: #f00;
transition: all 0.5s ease;
}8.如何在CSS中禁用文本換行和添加省略號
如果您的文本空間緊張，您可能需要將其剪短以適應(yīng)其他元素。當(dāng)然，您可以手動調(diào)整每個文本元素，但這需要時間和反復(fù)試驗(yàn)。
您可以做的是組合overflow, white-space, 和text-overflow以在文本中創(chuàng)建一個自然的中斷，使其更容易閱讀。
下面的示例設(shè)置文本寬度的限制，隱藏溢出部分，禁用文本換行，并添加省略號 (...) 以指示用戶有更多文本。
示例片段：
.product-description {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}9. CSS 中的首字母樣式化
首字母或首字下沉已經(jīng)在書籍和雜志設(shè)計中使用了很長的時間。它的工作原理是吸引讀者的注意力并讓他們對閱讀第一行感興趣。
雖然您可能認(rèn)為這種風(fēng)格已經(jīng)過時，但您也可以將其設(shè)計為看起來很現(xiàn)代的頁面，并且仍然可以利用它為您的訪客帶來一定地心理影響。此外，首字下沉選項(xiàng)也被寫入 CSS 語言，因此您可以毫不費(fèi)力地使用它并讓您的段落煥然一新。
示例片段：
p:first-letter {
display: block;
float: left;
margin: 5px;
color: #000000;
font-size: 60px;
}10.如何重置CSS樣式
最后但并非最不重要的一點(diǎn)是，您可能需要覆蓋不同瀏覽器的所有默認(rèn)樣式屬性，以使您的設(shè)計完美運(yùn)行??。
每個瀏覽器都有自己的樣式表，帶有內(nèi)置的默認(rèn)樣式，當(dāng)您試圖使您的網(wǎng)站在所有瀏覽器上看起來一致時，這有時會成為一個問題。
您可以使用全面的 CSS 重置，它幾乎涵蓋了所有元素。您也可以實(shí)現(xiàn)最小的重置結(jié)果，比如下面這種方法：
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}有了這十個技巧可以讓你的 CSS 代碼看起來更整潔，減少你的編碼時間，并讓者使用這感覺到頁面更加友好。
