App下載

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

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

雖然 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)用于整個項目的元素，并通過相同的 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>
索引.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;
}
css/style.css

5. 如何在 CSS 中整合樣式

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

這有助于您節(jié)省時間并降低代碼的重量，因為您不必多次編寫類似的代碼行。

示例片段：

/* 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ú)特的體驗。

示例片段：

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ù)試驗。

您可以做的是組合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)代的頁面，并且仍然可以利用它為您的訪客帶來一定地心理影響。此外，首字下沉選項也被寫入 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 代碼看起來更整潔，減少你的編碼時間，并讓者使用這感覺到頁面更加友好。

謝謝閱讀！


CSS 前端

0 人點(diǎn)贊