web前端入門到實戰：css 中的背景圖片小技巧和存

web前端入門到實戰：css 中的背景圖片小技巧和存在的坑

ody 的背景圖設置

第一種 :這種情況下背景圖片可以縮放但是不能完全等比縮放

background: url(imgs/1.jpg)no-repeat;

background-position:center 0; 背景圖的定位原點,由于body高不確定

background-attachment:fixed; 背景圖片保持固定,不會隨頁面滾動而滾動

第二種: 這種情況下的背景圖會完全的等比縮放, 隨著窗口大小改變

首先給html 設置 height:100%;

給body設置

background: url(imgs/1.jpg) no-repeat;

background-size: 100% 100%; 若background-size 值為cover, 此情況下是只要有一邊碰到窗口邊,就停止, 這種情況下 ,背景圖不會等比縮放

同樣道理,

body中的元素若想寬高100%,

第一種方式:

先給html設置height:100%; 再給該元素設置width:100%;height:100%;

第二種方式: 給width/height 設置100% 的同時,也要設置position:fixed;

頁面若要用到input, 要去掉其默認的 outline 和border, 若使用默認的border,后面js修改時, 第一次交互,會出現微小的像素偏移,建議重置

<linkrel="shortcut icon" href="imgs/favicon.ico"/> 這一句放在<head>中,修改該html網頁title中小圖標

html中將文字縱向顯

對文字對象寬度設置只能排下一個文字的寬度距離，讓文字一行排不下兩個文字使其文字自動換行，就形成了豎立排版需求

此時需要在該css中加上

word-wrap:break-word; word-break:normal;這個兩句可實現標點換行的,同時整體縱向顯示

writing-mode：設置對象書寫方向，有兩個值，

 1.lr-tb：從左向右，從上往下 ，

2. tb-rl：從上往下，從右向左

運行代碼發現，IE顯示正常，火狐、谷歌瀏覽器卻不支持，所以不建議使用writing-mode屬性。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。

盒模型概述

在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。

盒模型的結構

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內容（Content）：這是盒子中的實際內容，包括文本、圖片或其他媒體。
內邊距（Padding）：內容區域周圍的空間，內邊距是透明的。
邊框（Border）：圍繞內邊距和內容的線框，可以設置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框寬度 */
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。

填充（Padding）

填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。

內容（Content）

內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結

理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。

在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。

載說明：原創不易，未經授權，謝絕任何形式的轉載

雅虎（Yahoo!）創建了一個簡單的CSS框架，被稱為Pure.css（https://purecss.io/），以提供一套基礎樣式集，可作為網頁開發的起點。Pure.css旨在輕量、模塊化和響應式，使構建快速加載、適用于任何設備的移動友好網站變得簡單。在本文中，我們將討論Pure.css的工作原理以及如何使用它。

為了使默認樣式在多個瀏覽器中保持一致，我們使用Normalize.css來構建Pure.css。因此，您可以利用Pure.css來構建在所有現代瀏覽器中看起來相同的網站，而不必擔心不一致或跨瀏覽器兼容性問題。除了提供一組基本樣式外，Pure.css還包括幾個預設計的UI組件，您可以使用這些組件快速創建常見的用戶界面元素，如按鈕、菜單、表單和網格。這些組件是模塊化和可定制的，因此您可以輕松地為您的網站創建您想要的外觀和感覺，而無需編寫大量自定義的CSS代碼。

好處

使用Pure.css有幾個好處，包括：

它輕巧且加載速度快：Pure.css的設計目標是簡潔輕量，這意味著它不會拖慢您的網站。這對于移動用戶尤為重要，他們可能擁有較慢的互聯網連接，并對頁面加載時間更為敏感。
它具有響應式和移動友好的特性：Pure.css包含一個響應式網格系統，可以自動適應不同的屏幕尺寸和設備。這意味著您的網站將在臺式電腦、平板電腦和智能手機上呈現出很好的效果，而無需編寫任何自定義代碼。
它易于學習和使用：Pure.css的設計簡單直觀，所以即使你是新手，也能很快上手。Pure.css網站上的文檔和示例清晰簡潔，能幫助你迅速入門。
它是可定制和可擴展的：盡管Pure.css是極簡主義的，但它仍然提供了許多靈活性和定制選項。您可以輕松定制您的網站的樣式和布局，以創建您想要的外觀和感覺，您還可以通過編寫自定義樣式和組件來擴展Pure.css。
它得到了很好的支持并且被廣泛使用：Pure.css是由知名且備受尊敬的科技公司雅虎開發和維護的。此外，許多網站和網頁開發人員都在使用Pure.css，這意味著有一個龐大的用戶社區可以在你有任何問題或需要支持時提供幫助。

缺點

然而，也有一些缺點：

Pure.css的主要缺點之一是它是一個非常簡潔的框架，這意味著它不像其他CSS框架那樣提供很多功能和樣式。如果你正在開發一個需要許多自定義樣式和組件的復雜項目，這可能是一個不利之處。
另一個潛在的缺點是Pure.css使用Normalize.css，這是一個樣式表，旨在使默認樣式在不同瀏覽器中保持一致。雖然這通常是一件好事，但有時候如果您使用某些HTML元素或CSS樣式，而這些元素或樣式并不被所有瀏覽器支持，就可能會出現問題。在這些情況下，您可能需要編寫額外的CSS代碼來修復不一致性，這可能會耗費時間并令人沮喪。
最后，由于Pure.css是一個相對較新的框架，它的文檔和支持可能不如其他一些CSS框架那樣完善。雖然Pure.css的官方網站提供了一些文檔和示例，但有時可能不太清楚如何使用某些功能或解決某些問題。此外，由于Pure.css社區規模相對較小，你可能會更難找到問題的答案或從其他用戶那里獲得幫助。

兼容性

Pure.css旨在與所有現代Web瀏覽器兼容，包括：

Google Chrome
Mozilla Firefox
Apple Safari
Microsoft Edge
Opera

入門指南

在開始編寫代碼之前，了解Pure.css的安裝過程非常重要，這個過程非常簡單。請記住，無論您選擇哪個框架，都可以按照本文的安裝部分中所述的步驟來實施前端項目的安裝過程。

通過NPM安裝

要使用npm（Node包管理器）安裝Pure.css，您必須在計算機上安裝npm。如果您尚未安裝npm，可以按照npm網站上的說明進行安裝。安裝npm后，您可以在終端或命令提示符中運行以下命令來安裝Pure.css：

npm install purecss

這將下載最新版本的Pure.css并將其添加到您的項目中。然后，您可以通過在頁面的 Pure.css<head>Pure.css 部分添加以下代碼行來在HTML文檔中包含Pure.css樣式表：

<link rel="stylesheet" href="node_modules/purecss/build/pure.css" />

這將加載Pure.css樣式表并將其樣式應用于您的網站。然后，您可以在您的HTML和CSS代碼中使用Pure.css提供的樣式和組件來創建您想要的網站外觀和感覺。

要在React應用程序中使用Pure.css，您首先必須在項目中包含Pure.css樣式表。然后，您必須使用“className”屬性將Pure.css類應用于您的JSX組件。下面是一個示例，展示了如何在項目中使用Pure.css樣式表：

import 'purecss/build/pure.css';

需要注意的是，使用npm安裝Pure.css的確切步驟可能會因您的特定項目設置和要求而有所不同。如果您遇到任何問題或疑問，可以查閱Pure.css文檔或向Pure.css社區尋求幫助。

通過CDN進行設置

要在項目文件中加載Pure.css樣式表，您只需使用CDN即可。這樣做非常簡單；您只需將下面提供的CDN復制并粘貼到您的HTML頁面的頭部即可：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css" />

一旦將上述代碼粘貼到您的HTML文檔中，您的項目將能夠使用Pure.css樣式。

組件

Pure.css提供了一系列標準UI組件和基本構建元素的樣式，如按鈕、圖片、表單和表格，以及可用于創建響應式設計的布局模塊。在本節中，我們將使用Pure.css最基本的構建塊，這些構建塊也是項目中最常用的。你只需要熱熱手，我們就可以寫出漂亮的代碼。我們之前列出的大多數組件將在本組件部分進行處理。

Buttons

要在Pure.css中使用按鈕，您必須在HTML文檔中包含Pure.css樣式表。您可以通過在頁面的 <head> 部分添加以下代碼行來實現：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css">

一旦包含了Pure.css樣式表，您可以使用 <button> 元素和 pure-button 類來創建按鈕。以下代碼創建了一個基本的 Pure.css 按鈕：

<button class="pure-button">Button</button>

這將創建一個帶有默認Pure.css樣式的按鈕，包括淺灰色背景和圓角。

以下代碼創建一個藍色按鈕：

<button class="pure-button pure-button-primary pure-button-rounded">
  Button
</button>

您還可以在其他HTML元素上使用 Pure.css pure-button Pure.css 類，例如 Pure.css <a>Pure.css 和 Pure.css <input> Pure.css ，以創建具有不同樣式和行為的按鈕。

以下代碼創建了一個樣式為按鈕的鏈接：

<a class="pure-button" href="#">Link Button</a>

Pure.css中按鈕的確切外觀和行為將取決于您使用的特定類別以及應用于您的網站的其他樣式。

Colors

Pure.css 包含一組預定義的顏色，您可以在樣式表中使用它們。這些顏色是使用 CSS 變量定義的，這意味著您可以在樣式表中使用它們，而無需指定確切的顏色值。

例如，下面的代碼將Pure.css pure-button-primary Pure.css變量應用于按鈕，這將使其呈現藍色：

<button class="pure-button pure-button-primary">A Primary Button</button>

您可以在Pure.css文檔中（https://purecss.io/）了解更多有關可用顏色及其使用方法的信息。如果您在應用顏色方面遇到困難，仍然可以使用標準的內聯或外部樣式來為按鈕或任何其他元素著色。

Images

在Pure.css中，您可以使用Pure.css pure-img-responsive Pure.css類來使圖像具有響應性。我們將利用該類名來創建一個使用Pure.css的圖像庫。通過將圖像的響應性與網格類結合，我們可以輕松地獲得圖像庫。

<div class="pure-g">
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg"
      alt="Peyto Lake"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg"
      alt="Train"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg"
      alt="T-Shirt Store"
    />
  </div>
  <div class="pure-u-1-4">
    <img
      class="pure-img-responsive"
      src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg"
      alt="Mountain"
    />
  </div>
</div>

通過在上述代碼中的圖像標簽中使用“pure-img-responsive”類來實現響應式。為了使照片以行的方式靈活排列，我使用Pure.css中的網格中的“pure.g”類將它們分組。

Forms

要在Pure.css中使用表單，您需要在HTML文檔中包含Pure.css樣式表。一旦包含了Pure.css樣式表，您就可以使用 Pure.css <form> Pure.css 元素和 Pure.css pure-form Pure.css 類來創建表單。例如，以下代碼創建了一個基本的Pure.css表單：

<form class="pure-form">
  <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Username" />
    <input type="text" class="pure-input-1-2" placeholder="Password" />
    <input type="email" class="pure-input-1-2" placeholder="Email" />
  </fieldset>
  <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="A title" />
    <textarea
      class="pure-input-1-2"
      placeholder="Textareas work too"
    ></textarea>
  </fieldset>
  <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">
    Sign in
  </button>
</form>

從上面的輸出中，您可以看到我們使用Pure.css的默認樣式創建了一個表單，包括用于提交的藍色背景按鈕。使用額外的自定義樣式，您可以改變表單及其字段的外觀。

Grids

當提到網站的布局時，網格是一種具有行和列的結構，類似于電子表格。它為網站材料提供了統一的結構，并使頁面更易于用戶閱讀和導航。一旦包含了Pure.css樣式表，您就可以使用 Pure.css <div> Pure.css 元素和 Pure.css pure-g Pure.css 類來創建網格。在pure.css中使用網格時，單位的寬度由各種類名表示。

<div class="pure-g">
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>HTML</h3>
      <p>HTML is a markup language, not a programming language.</p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>JavaScript</h3>
      <p>
        Programmers all over the world use Javascript to make dynamic and
        interactive online apps and browsers.
      </p>
    </div>
  </div>
</div>

以下代碼創建了一個包含三列的網格：

<div class="pure-g">
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>HTML</h3>
      <p>HTML is a markup language, not a programming language.</p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>CSS</h3>
      <p>
        Cascading Style Sheets (CSS) is a stylesheet language used to describe
        the presentation of a document written in HTML
      </p>
    </div>
  </div>
  <div class="pure-u-1-3">
    <div class="l-box">
      <h3>JavaScript</h3>
      <p>
        Programmers all over the world use Javascript to make dynamic and
        interactive online apps and browsers.
      </p>
    </div>
  </div>
</div>

一個網站的網格系統非常重要。點擊這里訪問官方Pure.css文檔，了解更多關于網格的信息。

Layouts

布局描述了我們如何安排設計內容的元素。布局的兩個主要目標是展示重要信息和以邏輯和一致的方式呈現數據。

例如，以下代碼為頭部創建了一個基本的Pure.css布局：

<div class="header">
  <div class="pure-menu pure-menu-horizontal">
    <a class="pure-menu-heading" href="">
      <img
        width="50"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
        alt=""
      />
    </a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item pure-menu-selected">
        <a href="#" class="pure-menu-link">Home</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">Blog</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">About</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">FAQ</a>
      </li>
      <li class="pure-menu-item">
        <a href="#" class="pure-menu-link">Login</a>
      </li>
    </ul>
  </div>
</div>

Tables

要在Pure.css中使用表格，您必須在HTML文檔中包含Pure.css樣式表。您可以通過在頁面的 Pure.css<head>Pure.css 部分添加以下代碼行來實現：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css" />

一旦包含了Pure.css樣式表，您可以使用 Pure.css <table> Pure.css 元素和 Pure.css pure-table Pure.css 類來創建表格。例如，以下代碼創建了一個基本的Pure.css表格：

<table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Honda</td>
      <td>Accord</td>
      <td>2009</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Toyota</td>
      <td>Camry</td>
      <td>2012</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Hyundai</td>
      <td>Elantra</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

默認情況下，表格將使用 Pure.css 的默認樣式來實現表格，包括灰色邊框和表頭的灰色背景。更多表格信息可以在 Pure.css 官方網站上找到，您可以通過點擊此鏈接訪問。

Menus

要在 Pure.css 中使用菜單，您仍然需要在HTML文檔中包含 Pure.css 樣式表。您可以通過在頁面的 Pure.css <head> Pure.css 部分添加以下代碼行來實現：

您可以使用 Pure.css<ul>Pure.css 元素和`Pure.css pure-menu-list Pure.css`類來創建菜單。例如，以下代碼生成一個基本的Pure.css菜單：

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link"
        ><img
          width="100"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
          alt=""
      /></a>
    </li>
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Email</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Twitter</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Map</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

以上截圖的輸出是一個菜單，它使用了 Pure.css 的默認樣式，包括在懸停在“聯系”選項卡容器上時的淺灰色背景。向菜單添加更多自定義類可以改變其設計。有關菜單的更多信息可以在Pure.css的官方網站上找到，您可以通過點擊此鏈接訪問。

如何在 Pure.css 中防止樣式沖突

為了避免在 Pure.css 中出現樣式沖突，您可以使用CSS命名空間來隔離您網站的樣式與Pure.css的樣式。命名空間是一個前綴，它被添加到CSS類的名稱中，有助于防止與其他樣式表中具有相同名稱的類發生沖突。例如，您可以創建一個名為 Pure.css my-website Pure.css 的命名空間，并將其用作樣式表中所有類的前綴，如下所示：

<style>
  .my-website-container {
    /* styles for container elements */
  }

  .my-website-button {
    /* styles for buttons */
  }
</style>

<div class="my-website-container">
  <button class="my-website-button">Button</button>
</div>

這將確保您樣式表中的類是唯一的，并且不會與Pure.css樣式表或頁面上包含的任何其他樣式表中的任何類發生沖突。此外，您可以在樣式表中使用 Pure.css !important Pure.css 規則來防止 Pure.css 樣式覆蓋您的樣式。 Pure.css !important Pure.css 規則指定應將特定樣式應用于元素，而不管應用于該元素的任何其他樣式。例如，如果您想要覆蓋Pure.css按鈕的默認顏色，可以在樣式表中使用 Pure.css !important Pure.css 規則，如下所示：

.my-website-button {
  color: red !important;
}

這將確保按鈕的顏色始終為紅色，而不受應用于按鈕的任何其他樣式的影響。使用命名空間和 Pure.css !important Pure.css 規則可以幫助防止Pure.css中的樣式沖突，并確保您的樣式在網站上一致應用。

結論

在這個教程中，我們學習了如何設置Pure.css，并創建了一些Pure.css示例來理解語法的核心思想。如果你想為自己或客戶構建一個漂亮而快速的網站，你可以根據需要修改這個示例，或者你可以嘗試將所學的知識應用到構建其他漂亮的網站中。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

在線咨詢

上一篇：Java培訓：Java與JavaScript有什么不
下一篇：Via瀏覽器，重新定義什么是簡潔輕快的瀏覽器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商