快看！ 10個值得收藏的CSS實用小技巧

這篇文章跟大家分享10個很棒的CSS使用技巧，讓前端開發更輕鬆，快來收藏吧，希望對大家有幫助！

我會為你帶來 10 個很棒的 CSS 技巧，它們會讓你作為開發人員更輕鬆，特別是如果你是初學者。 （推薦學習：css影片教學）

1.如何在CSS中修復網頁上的水平滾動

#如果你在設定網頁樣式並且在底部看到水平捲軸，則需要找到寬度大於可用螢幕寬度的元素。

例如，在下面的螢幕截圖中，你可以看到有一個水平滾動：

你可以使用通用選擇器(*) 透過應用以下規則來尋找罪魁禍首元素：

* { 
     border: 2px solid red;
}

這會將2 個像素的紅色邊框套用到頁面上的每個元素，因此你可以輕鬆找出需要調整的元素。

套用上述樣式後，結果如下：

你可以看到第二個綠色波浪正在導致水平捲動。這是因為寬度設定為 1400 像素，比 1200 像素的可用螢幕寬度更寬。

.wave2 {
  width: 1400px;
}

將寬度設定回 1200 像素或將其完全刪除將解決問題，因此不再有水平滾動。

2. 如何在CSS 中覆寫樣式

#在某些特定情況下，你可能想要覆寫已經存在的特定樣式（例如來自函式庫） 。或者，你可能有一個帶有大型樣式表的模板，你需要自訂其中的特定部分。

在這些情況下，您可以套用 CSS specificity 的規則，!important也可以在規則前面使用例外。

在下面的範例中，!important為每個h1 元素提供#2ecc71（我最喜歡的顏色）的翠綠色變體：

h1 {
    color: #2ecc71 !important;
}

但要注意——使用這個異常被認為是不好的做法，你應該盡可能避免它。

為什麼？嗯，!important實際上破壞了 CSS 的級聯特性，它會使調試變得更加困難。

最好的用例!important是在處理大量模板樣式表或舊程式碼時，使用它來識別程式碼庫中的問題。然後你可以快速修復問題並消除異常。

除了使用 !important 來應用樣式之外，您還可以了解更多關於 CSS 的特殊性並應用這些規則。

3. 如何用CSS 製作正方形

如果你想製作一個正方形而不必過多地弄亂寬度和高度，您可以透過設定背景顏色、所需寬度和縱橫比來設定div [或視情況而定的跨度] 的樣式與相等的數字。第一個數字是頂部和底部尺寸，第二個是左右。

你可以透過玩這兩個數字來製作矩形和任何你想要的正方形，從而更進一步。

<div class="square"></div>

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

4. 如何使用 CSS 使 div 居中

隨著樣式表變大，將 div 置中會變得非常困難。若要設定任何 div 的樣式，請為其設定區塊顯示、自動邊距和低於 100% 的寬度。

<div class="center"></div>

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

5. 如何在CSS 中移除盒子中的額外填充

#使用box-sizing: border-box#將確保在為框設定寬度和填充時不會向框添加額外的填充。這將幫助您的佈局看起來更好。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

6. 如何使用 CSS 製作首字下沉

您可以使用首字母偽元素製作首字下沉。是的！你在報紙上看到的首字下沉。

選擇適當的 HTML 元素並套用樣式，如下所示：

 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

#

7. 如何在 CSS 中将文本设为大写或小写

大写或小写字母不必直接来自您的 HTML。您可以在 CSS 中强制任何文本为大写或小写。

我希望将来会有 SentenceCase 和 tOGGLEcASE 的选项。但是你为什么要写一个文本 toOGGLEcASE 呢？

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

8. 如何声明变量以保持 CSS DRY

变量？是的。您可以在 CSS 中声明变量。

当您声明变量时，您可以在许多其他样式中使用它们。如果您有任何要更改的内容，您只需更改该变量，结果将反映在使用它们的任何地方。这将有助于保持您的 CSS 代码干燥（不要重复自己）。

您可以通过将变量放置在根范围内来声明变量，以便它在样式表中是全局的。要使用您的变量，您可以将属性放在“var”关键字旁边的大括号内。

通常在样式表的顶部声明变量 - 即在重置之前。

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. 如何使用:before和:after选择器向你的 CSS 添加额外的内容

CSS 中的:before选择器可帮助您在元素之前插入内容：

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

选择:after器做同样的事情，但它在元素之后插入内容：

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}

10. 如何使用纯 CSS 实现平滑滚动

您可以在网页上应用平滑滚动，而无需编写复杂的 JavaScript 或使用插件。因此，如果您有链接到网页上多个部分的锚标记并单击它们，则滚动是平滑的。

html {
  scroll-behavior: smooth;
}

（学习视频分享：web前端入门教程）

以上是快看！ 10個值得收藏的CSS實用小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！