App下載

每個(gè) Web 開(kāi)發(fā)人員都應(yīng)該知道的 10 個(gè) CSS 技巧

紓寒 2021-09-07 10:47:37 瀏覽數(shù) (2234)
反饋

雖然 CSS 不像JavaScript那樣被廣泛使用，但它仍然是排名前 10 的編程語(yǔ)言。由于 CSS 非常健壯、相當(dāng)容易學(xué)習(xí)并且在不同瀏覽器中通用，因此它在web開(kāi)發(fā)人員中很受歡迎。與其他編碼語(yǔ)言一樣，CSS 有幾個(gè)快捷使用的方式或技巧，可讓您編寫更簡(jiǎn)潔的代碼、改進(jìn)設(shè)計(jì)元素并節(jié)省寶貴的時(shí)間。當(dāng)然，您也可以使用代碼編輯器將這些片段直接插入您的web應(yīng)用中。

您不必成為高級(jí) Web 開(kāi)發(fā)人員也可以輕松使用 CSS。來(lái)自 W3Techs 的數(shù)據(jù)顯示，96% 的網(wǎng)站都使用 CSS，并且能夠使用 CSS 來(lái)增強(qiáng)網(wǎng)站的布局和外觀。這也是 WordPress 等主要開(kāi)源 CMS （內(nèi)容管理系統(tǒng)，類似于個(gè)人網(wǎng)頁(yè)、博客之類的系統(tǒng)）功能不可或缺的一部分。

事實(shí)上，大多數(shù)網(wǎng)站構(gòu)建工具允許用戶插入自定義 CSS 代碼。如果您是 CSS 新手，W3Cschool上有一個(gè)很棒的CSS教程視頻，您可以在其中學(xué)習(xí)基礎(chǔ)知識(shí)。如果您已經(jīng)了解CSS的基本使用，那么讓我們開(kāi)始使用這十個(gè) CSS 技巧。

1.如何使用CSS將內(nèi)容居中

將內(nèi)容放在屏幕中間可能會(huì)很棘手。但是，您可以使用?position: absolute?覆蓋動(dòng)態(tài)位置并始終將內(nèi)容放置在中心。

它還適用于跨設(shè)備的所有分辨率。但是，請(qǐng)務(wù)必仔細(xì)檢查所有內(nèi)容是否按您的需要定位，即使在較小的屏幕上元素看起來(lái)也很自然。

示例片段：

section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}

2. 如何在 CSS 中固定元素的位置

盡管網(wǎng)站是動(dòng)態(tài)的，但您可能希望在某些位置修復(fù)一些元素。您可以通過(guò)使用?position:absolute?腳本來(lái)做到這一點(diǎn)。

但是，請(qǐng)謹(jǐn)慎使用此方法并事先在每個(gè)屏幕尺寸和分辨率上進(jìn)行測(cè)試，以免破壞您網(wǎng)站的設(shè)計(jì)。

根據(jù)網(wǎng)頁(yè)文件中的特定位置節(jié)點(diǎn)使用該方法可確保元素對(duì)于所有用戶保持在相同位置。

示例片段：

/* 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è)面自適應(yīng)

沒(méi)有什么比您的圖像超出用戶屏幕更糟糕的了。它絕對(duì)可以破壞您網(wǎng)站的設(shè)計(jì)并阻止用戶繼續(xù)使用下去。

但是，通過(guò)這個(gè)簡(jiǎn)單的技巧，您可以確保您的圖像始終適合訪問(wèn)者的屏幕，無(wú)論他們使用什么設(shè)備。

示例片段：

img {
  max-width: 100%;
  height: auto;
}

4.如何在CSS中編輯單個(gè)頁(yè)面上的樣式

如果您有一個(gè) CMS 并且希望您的某些帖子看起來(lái)與其他帖子不同，您可以使用自定義類來(lái)覆蓋站點(diǎn)的 CSS 樣式。這確保您只調(diào)整一個(gè)帖子頁(yè)面，而將其他頁(yè)面保留為默認(rèn)值。

當(dāng)您在 WordPress 博客上創(chuàng)建帖子時(shí)，它將帖子的 id 作為類包含在body中，例如：

然后你可以做這樣的修改來(lái)改變那個(gè)帖子頁(yè)面的樣式：

.postid-330 {
  font-size: 24px;
  font-weight: 750;
  color: red;
}

其他流行的 CMS 允許您向單個(gè)帖子添加自定義類。例如，Ghost 允許您將帖子標(biāo)記為精選帖子并添加.featured類。

但是，如果您發(fā)現(xiàn)自己經(jīng)常使用這種方法，最好修改主要的 CSS 樣式表，以避免編寫不必要的代碼。

這不僅適用于 CMS - 如果您有一個(gè)包含多個(gè) HTML 文件的簡(jiǎn)單網(wǎng)站，您可以將自定義樣式應(yīng)用于整個(gè)項(xiàng)目的元素，并通過(guò)相同的 CSS 文件調(diào)整它們。

例如，如果您有帶有 class 的頁(yè)面.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>
索引.html

另一個(gè)about頁(yè)面：

<!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)于頁(yè)面上的樣式：

.about {
  font-size: 24px;
  font-weight: 750;
  color: red;
}
css/style.css

5. 如何在 CSS 中整合樣式

如果您知道要為多個(gè)項(xiàng)目添加 CSS 樣式，那么將這些代碼一段一段地編寫出來(lái)需要時(shí)間。但是，當(dāng)您用逗號(hào)分隔項(xiàng)目并在其中寫入 CSS 樣式時(shí)，樣式就會(huì)添加到所有項(xiàng)目中。

這有助于您節(jié)省時(shí)間并降低代碼的重量，因?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 中的訪問(wèn)鏈接樣式

用戶點(diǎn)擊的訪問(wèn)鏈接的默認(rèn)樣式可能不適用于您當(dāng)前站點(diǎn)的樣式。您可以使用 CSS 代碼來(lái)調(diào)整訪問(wèn)者點(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 中的懸停效果延遲

這個(gè):hover選擇器是CSS偽類，它允許你創(chuàng)建一個(gè)懸停效果。但是，您可以通過(guò)添加一個(gè)transition元素來(lái)延遲懸停效果來(lái)進(jìn)一步調(diào)整你的風(fēng)格。

雖然它看起來(lái)很整潔，但它也會(huì)在用戶的眼睛中產(chǎn)生一種運(yùn)動(dòng)感，進(jìn)一步引起對(duì)該元素的注意。

示例片段：

.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中禁用文本換行和添加省略號(hào)

如果您的文本空間緊張，您可能需要將其剪短以適應(yīng)其他元素。當(dāng)然，您可以手動(dòng)調(diào)整每個(gè)文本元素，但這需要時(shí)間和反復(fù)試驗(yàn)。

您可以做的是組合overflow, white-space, 和text-overflow以在文本中創(chuàng)建一個(gè)自然的中斷，使其更容易閱讀。

下面的示例設(shè)置文本寬度的限制，隱藏溢出部分，禁用文本換行，并添加省略號(hào) (...) 以指示用戶有更多文本。

示例片段：

.product-description {
max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

9. CSS 中的首字母樣式化

首字母或首字下沉已經(jīng)在書籍和雜志設(shè)計(jì)中使用了很長(zhǎng)的時(shí)間。它的工作原理是吸引讀者的注意力并讓他們對(duì)閱讀第一行感興趣。

雖然您可能認(rèn)為這種風(fēng)格已經(jīng)過(guò)時(shí)，但您也可以將其設(shè)計(jì)為看起來(lái)很現(xiàn)代的頁(yè)面，并且仍然可以利用它為您的訪客帶來(lái)一定地心理影響。此外，首字下沉選項(xiàng)也被寫入 CSS 語(yǔ)言，因此您可以毫不費(fèi)力地使用它并讓您的段落煥然一新。

示例片段：

p:first-letter {
  display: block;
  float: left;
  margin: 5px;
  color: #000000;
  font-size: 60px;
}

10.如何重置CSS樣式

最后但并非最不重要的一點(diǎn)是，您可能需要覆蓋不同瀏覽器的所有默認(rèn)樣式屬性，以使您的設(shè)計(jì)完美運(yùn)行??。

每個(gè)瀏覽器都有自己的樣式表，帶有內(nèi)置的默認(rèn)樣式，當(dāng)您試圖使您的網(wǎng)站在所有瀏覽器上看起來(lái)一致時(shí)，這有時(shí)會(huì)成為一個(gè)問(wèn)題。

您可以使用全面的 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;
}

有了這十個(gè)技巧可以讓你的 CSS 代碼看起來(lái)更整潔，減少你的編碼時(shí)間，并讓者使用這感覺(jué)到頁(yè)面更加友好。

謝謝閱讀！


CSS 前端

0 人點(diǎn)贊