首頁 > 文章 > web前端 > 每個開發者都應該知道的 7 個 CSS Hack

每個開發者都應該知道的 7 個 CSS Hack

WBOY轉載: 2023-08-29 14:53:02606瀏覽

每个开发者都应该知道的 7 个 CSS Hack

CSS 是層疊樣式表的縮寫。它用於製作具有視覺吸引力的網站。使用它將使製作有效網頁的過程變得更容易。

網站的設計至關重要。它透過促進用戶互動來提高網站的美觀度和整體品質。雖然可以在沒有 CSS 的情況下建立網站，但需要樣式，因為沒有用戶願意與無聊、沒有吸引力的網站互動。在本文中，我們討論了每位開發人員在網頁設計過程中的某個時間點都會需要的 7 個 CSS hack。

使用CSS建立響應式圖片

使用被稱為響應式圖片的各種技術，可以載入適合設備的解析度、方向、螢幕大小、網路連接或頁面佈局的正確圖片。圖片不應該被瀏覽器拉伸以適應頁面佈局，下載圖片不應該花費太長時間或使用過多的網路流量。由於圖片載入快速且對人眼清晰，這可以提高用戶體驗。若要建立響應式圖片，請始終編寫以下語法−

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

創建具有高解析度的照片的最簡單技術是將它們的寬度和高度值設為實際尺寸的一半。

將元素的內容放置在中心

如果你想居中對齊任何元素的內容，有多種方法。下面提到了最簡單的。

持倉屬性

使用CSS的position屬性透過以下語法來將內容置中：

element{
   position: absolute;
   left: value;
   top: value;
}

範例

<!DOCTYPE html>
<html>
<head>
   <style>
      h1{
         text-align: center;
      }
      div{
         position: absolute;
         left: 45%;
      }
   </style>
</head>
<body>
   <h1> Position property </h1>
   <div> This is an example. </div>
</body>
</html>

使用標籤

要居中對齊的內容應寫在

標記內。然後，整個內容將居中對齊。

使用text-align屬性

如果要居中對齊的內容只包含文本，則可以簡單地使用textalign屬性。

text-align: center;

使用通用選擇器

CSS星號(*)選擇器，也稱為CSS通用選擇器，用於一次選擇或匹配整個網頁的所有元素或元素的某些部分。選擇後，您可以使用任何 CSS 自訂屬性來設定對應的樣式。它會匹配任何類型的 HTML 元素，如、

、

通用選擇器實際上是用來設定網頁中每個元素的樣式。通常，維護整個頁面的特定樣式格式很困難，因為瀏覽器設定了預設值。它使開發人員能夠為網頁準備預設樣式。最常見的用途是將網頁的所有元素一起設定樣式。

文法

*{
   Css declarations
}

範例

<!DOCTYPE html>
<html>
<head>
   <style>
      *{
         color: green;
         text-align: center;
         font-family: Imprint MT shadow;
      }
   </style>
</head>
<body>
   <h1>Css Universal Selector</h1>
   <h2>This is an example. It shows how to style the whole document altogether.</h2>
   <div>
      <p class = "para1"> This is the first paragraph. </p>
      <p class= "para2"> This is the second paragraph </p>
   </div>
</body>
</html>

覆蓋 CSS 樣式

通常，我們使用CSS類別來覆蓋CSS樣式。然而，如果您想要指定一個特定的樣式必須套用於一個元素，那麼請使用!important。

文法

element{
   property: value !important;
}

範例

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         color: blue;
      }
      .demo {
         color: red !important;
      }
   </style>
</head>
<body>
   <h2> This is an example #1 </h2>
   <h2> This is an example #2 </h2>
   <h2> This is an example #3 </h2>
   <h2 class= "demo"> This is an example #4 </h2>
   <h2> This is an example #5 </h2>
</body>
</html>

捲動行為

良好且有效率的使用者體驗是網頁設計中最關鍵的因素。如果您的網站不用戶友好，那麼製作網站也沒有意義。為了確保流暢的使用者體驗，您應該在網站上添加平滑滾動效果。

scroll-behaviour 屬性使開發人員能夠指定捲動期間頁面的行為。

html{
   scroll-behaviour: smooth;
}

新增媒體查詢並使版式回應

當媒體類型與顯示文件的裝置類型相符時，具有該媒體類型的媒體查詢將用於將樣式套用至內容。

@media (max-width: 100px){
   {CSS rules….
   }
}

如果您的網站需要在不同裝置上查看，則最好使用視口單位。它可以確保內容根據視窗自動調整大小。

vw– 視窗寬度
vh ——視口高度
#v 分鐘– 視窗最小
v max– #視窗最大
#

CSS 弹性盒

一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。

display:flex帮助开发者让每一个组件都显得合适、可爱。它通过对齐元素的子元素将它们排列成行或列。

它将父元素中的子元素对齐到行或列中。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         background-color: #097969;
         align-items: center;
         justify-content: center;
         width: 60%;
      }
      .demo1, .demo2, .demo3, .demo4 {
         background-color: yellow;
         height : 50px;
         width: 90%;
         margin: 10px;
         padding: 12px;
         font-size: 17px;
         font-weight: bold;
         font-family: verdana;
         text-align: center;
         align-items: center;
         color: brown;
      }
      .demo1{
         order: 1;
      }
      .demo2{
         order: 4;
      }
      .demo3{
         order: 2;
      }
      .demo4{
         order: 3;
      }
   </style>
</head>
<body>
   <h1>Order of Flex Items</h1>
   <p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
   <div class="flex-container">
      <div class= "demo1" > This </div>
      <div class= "demo2"> example </div>
      <div class= "demo3"> is </div>
      <div class= "demo4"> an </div>
   </div>
</body>
</html>

以上是每個開發者都應該知道的 7 個 CSS Hack的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html 选择器样式表 display position flex

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 CSS 正確定位工具提示下一篇：如何使用 CSS 正確定位工具提示

看更多