CSS初學(xué)者實(shí)用技巧有哪些

這篇文章主要介紹“CSS初學(xué)者實(shí)用技巧有哪些”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS初學(xué)者實(shí)用技巧有哪些”文章能幫助大家解決問題。

1.如何在CSS中修復(fù)網(wǎng)頁上的水平滾動(dòng)

如果你在設(shè)置網(wǎng)頁樣式并且在底部看到水平滾動(dòng)條，則需要找到寬度大于可用屏幕寬度的元素。

例如，在下面的屏幕截圖中，你可以看到有一個(gè)水平滾動(dòng)：

你可以使用通用選擇器 (*) 通過應(yīng)用以下規(guī)則來查找罪魁禍?zhǔn)自兀?/p>

* { 
     border: 2px solid red;
}復(fù)制代碼

這會(huì)將 2 像素的紅色邊框應(yīng)用于頁面上的每個(gè)元素，因此你可以輕松找出需要調(diào)整的元素。

應(yīng)用上述樣式后，結(jié)果如下：

你可以看到第二個(gè)綠色波浪正在導(dǎo)致水平滾動(dòng)。這是因?yàn)閷挾仍O(shè)置為 1400 像素，比 1200 像素的可用屏幕寬度更寬。

.wave2 {
  width: 1400px;
}復(fù)制代碼

將寬度設(shè)置回 1200 像素或?qū)⑵渫耆珓h除將解決問題，因此不再有水平滾動(dòng)。

2. 如何在 CSS 中覆蓋樣式

在某些特定情況下，你可能希望覆蓋已經(jīng)存在的特定樣式（例如來自庫）。或者，你可能有一個(gè)帶有大型樣式表的模板，你需要自定義其中的特定部分。

在這些情況下，您可以應(yīng)用 CSS specificity 的規(guī)則，!important也可以在規(guī)則前面使用異常。

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

h2 {
    color: #2ecc71 !important;
}復(fù)制代碼

但要注意——使用這個(gè)異常被認(rèn)為是不好的做法，你應(yīng)該盡可能避免它。

為什么？嗯，!important實(shí)際上破壞了 CSS 的級(jí)聯(lián)特性，它會(huì)使調(diào)試變得更加困難。

最好的用例!important是在處理大量模板樣式表或舊代碼時(shí)，使用它來識(shí)別代碼庫中的問題。然后你可以快速修復(fù)問題并消除異常。

除了使用 !important 來應(yīng)用樣式之外，您還可以了解更多關(guān)于 CSS 的特殊性并應(yīng)用這些規(guī)則。

3. 如何用 CSS 制作正方形

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

你可以通過玩這兩個(gè)數(shù)字來制作矩形和任何你想要的正方形，從而更進(jìn)一步。

<div class="square"></div>復(fù)制代碼

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}復(fù)制代碼

4. 如何使用 CSS 使 div 居中

隨著樣式表變大，將 div 居中會(huì)變得非常困難。要設(shè)置任何 div 的樣式，請(qǐng)為其設(shè)置塊顯示、自動(dòng)邊距和低于 100% 的寬度。

<div class="center"></div>復(fù)制代碼

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}復(fù)制代碼

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

使用box-sizing: border-box將確保在為框設(shè)置寬度和填充時(shí)不會(huì)向框添加額外的填充。這將幫助您的布局看起來更好。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}復(fù)制代碼

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

您可以使用首字母?jìng)卧刂谱魇鬃窒鲁?。是的！你在?bào)紙上看到的首字下沉。

選擇適當(dāng)?shù)?HTML 元素并應(yīng)用樣式，如下所示：

 <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>復(fù)制代碼

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}復(fù)制代碼

7. 如何在 CSS 中將文本設(shè)為大寫或小寫

大寫或小寫字母不必直接來自您的 HTML。您可以在 CSS 中強(qiáng)制任何文本為大寫或小寫。

我希望將來會(huì)有 SentenceCase 和 tOGGLEcASE 的選項(xiàng)。但是你為什么要寫一個(gè)文本 toOGGLEcASE 呢？

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>復(fù)制代碼

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}復(fù)制代碼

8. 如何聲明變量以保持 CSS DRY

變量？是的。您可以在 CSS 中聲明變量。

當(dāng)您聲明變量時(shí)，您可以在許多其他樣式中使用它們。如果您有任何要更改的內(nèi)容，您只需更改該變量，結(jié)果將反映在使用它們的任何地方。這將有助于保持您的 CSS 代碼干燥（不要重復(fù)自己）。

您可以通過將變量放置在根范圍內(nèi)來聲明變量，以便它在樣式表中是全局的。要使用您的變量，您可以將屬性放在“var”關(guān)鍵字旁邊的大括號(hào)內(nèi)。

通常在樣式表的頂部聲明變量 - 即在重置之前。

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

p {
  color: var(--text-color);
}復(fù)制代碼

9. 如何使用:before和:after選擇器向你的 CSS 添加額外的內(nèi)容

CSS 中的:before選擇器可幫助您在元素之前插入內(nèi)容：

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>復(fù)制代碼

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}復(fù)制代碼

選擇:after器做同樣的事情，但它在元素之后插入內(nèi)容：

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}復(fù)制代碼

10. 如何使用純 CSS 實(shí)現(xiàn)平滑滾動(dòng)

您可以在網(wǎng)頁上應(yīng)用平滑滾動(dòng)，而無需編寫復(fù)雜的 JavaScript 或使用插件。因此，如果您有鏈接到網(wǎng)頁上多個(gè)部分的錨標(biāo)記并單擊它們，則滾動(dòng)是平滑的。

html {
  scroll-behavior: smooth;
}復(fù)制代碼

關(guān)于“CSS初學(xué)者實(shí)用技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。