• 一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

    首頁>>前端開發

    優化 CSS 代碼的12個小技巧

    首頁 2022-11-26 前端開發 723 ℃Tags: css


    今天來分享 12 個優化 CSS 代碼小技巧!

    css文字漸變色_css文字顏色漸變的3種實現方式

    1. 避免高消耗屬性

    分析表明,一些CSS屬性的渲染速度比其他屬性慢,因此應該謹慎使用。包括以下屬性:

    • box-shadow
    • border-radius
    • position: fixed
    • transform
    • :nth-child
    • filter

    上述屬性都是對性能要求比較高的。如果這些屬性使用較少,那這就不是問題。但是如果一個頁面出現幾百次,那么整體的CSS可能會受到影響,所以要謹慎使用。

    2. 使用 <link> 代替 @import

    @import 規則主要用于導入資源或者CSS文件。它會阻止其他文件并行下載,并可能會導致網站速度變慢。

    ? 不要在CSS中這樣操作:

    @import url("header.css");
    @import url("slider.css");
    @import url("content.css");
    @import url("footer.css");

    可以使用多個HTML 中的<link>標簽來代替@import,它將并行加載CSS文件,可以在一定程度上提高應用的加載的速度。

    ? 可以在HTML這樣操作:

    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="slider.css">
    <link rel="stylesheet" href="content.css">
    <link rel="stylesheet" href="footer.css">

    3. 簡化選擇器

    我們知道,有很多方法可以對 HTML 元素進行樣式設置,而最復雜的 CSS 選擇器可能需要幾毫秒的時間來解析。降低選擇器的復雜性就可以減少瀏覽器的負載并保持代碼簡潔明了。

    ? 避免這么寫:

    .container > div.links-container ul li .link {

    }

    ? 可以這么寫:

    .container .link {

    }

    4. 避免使用 !Important

    在一些時候,可以使用!Important 來提高樣式的優先級,以使樣式生效。除非沒有別的辦法,否則不要使用!Important。

    添加 !Important CSS聲明將覆蓋掉其他對應的樣式聲明,如果CSS的規則中 !Important 太多,瀏覽器就必須對代碼進行額外的檢查,這可能會降低頁面的加載速度。所以,盡量避免使用!Important。在很多情況下我們是可以通過選擇器來實現樣式重寫的,除非是想要對第三方庫的CSS進行重寫。

    5. CSS實現特效和SVG代替圖片

    頁面中加載圖像很可能需要很長的時間,尤其是在圖像未針對web進行優化的情況下。在實現背景圖、漸變、幾何圖形時,盡量少使用圖片,而是使用CSS代碼實現。使用 CSS 代碼實現就會比圖片加載速度更快。

    還可以使用SVG來代替PNG或者JPG圖片:

    • 可以給圖片添加效果;
    • 圖像加載速度更快;
    • 圖像自動適應用戶屏幕。

    6. 壓縮 CSS

    我們可以通過壓縮CSS文件來刪除文件中所有的空白和不必要的代碼來減少文件的大小。CSS文件變小了,加載的時間自然就變少了,頁面的加載速度就會變。

    7. 使用0而不是0px

    當一個屬性的值為0時,我們可以不添加任何單位。即不要這么寫:0rem,0em,0px等。

    當然,這么寫是沒有錯的,但是這些單位是沒有用的,當處理一個巨大的CSS文件時,沒有單位會比有單位時文件小一點。

    8. 使用十六進制而不是顏色名稱

    當我們將顏色設置為顏色名稱時,瀏覽器就會花費更多時間來找出顏色的十六進制值。假如想使用紅色,那設置為color:red之后,不同的瀏覽器顯示效果可能是不一樣的,作為開發人員,我們不能讓瀏覽器來決定網頁將如何顯示。

    因此,盡量使用使用十六進制(例如紅色#ff0000)來定義顏色,就能確保在所有瀏覽器中以相同的色調準確得顯示想要的顏色。

    9. 避免過多 font-family

    為每個選擇器去定義字體并不是一個好的辦法,它會導致代碼很難維護,假如以后想要更改字體,就不得不在每個選擇器中更改它。

    因此不要像下面這樣來定義字體:

    h1 {
      font-family: Arial, Helvetica, sans-serif;
    }

    p {
      font-family: Arial, Helvetica, sans-serif;
    }

    .selection {
      font-family: Arial, Helvetica, sans-serif;
    }

    .footer {
      font-family"Times New Roman", Times, serif;
    }

    可以在正文中定義要使用的字體,如果想要在其他選擇器中覆蓋該字體,就可以通過在該選擇器中使用所需的字體來實現:

    body{
      font-family: Arial, Helvetica, sans-serif;
    }

    footer{
      font-family"Times New Roman", Times, serif";
    }

    如果頁面中很多部分的字體都不盡相同,就可以將字體定義在 class 中,然后在需要的HTML標簽上使用該class即可:

    .font-helvetica {
      font-family: Arial, Helvetica, sans-serif;
    }

    .font-times {
      font-family"Times New Roman", Times, serif";
    }

    10. 使用備用字體

    有些情況下,應用中使用的字體可能在用戶設備上不可用。在這種情況下,可以指定使用其他備用字體:

    p{
      font-family'Open Sans', Arial, Helvetica, sans-serif;
    }

    這樣,瀏覽器就會按順序進行解析,直到解析到第一個可用的字體,如果都不可用,就會使用瀏覽器的默認字體。

    11. 使用 CSS 重置

    每個瀏覽器都有自己的 HTML 元素默認樣式。假如有一個沒有任何樣式的 H1 元素,那么在默認情況下,在Firefox中,會給它一個上下為21.433px,左右為 0 的margin值。而在Safari中,會給它一個上下為21px,左右為 0 的margin值。

    因此,重置CSS樣式,一個很好的做法就是從頭開始定義樣式。很多開發人員會使用通用選擇器(*)來執行基本重置:

    * {
      margin0;
      padding0;
      box-sizing: border-box;
    }

    在使用通用選擇器 (*) 進行重置有時會導致性能問題,因為它會針對每個標簽去設置其樣式。

    可以使用一些常用的CSS重置代碼庫,比如normalize。也可以參考一些CSS重置的最佳實踐。

    12. 減少重復代碼

    當兩個元素或選擇器具有相同的 CSS 屬性時,可以使用逗號來組合這些選擇器,而不是重復聲明樣式,這樣它們將共享 CSS 樣式。

    ? 避免這樣寫:

    .header {
      background-color#fefefe;
      padding20px 0;
    }

    .footer {
      background-color#fefefe;
      padding20px 0;
    }

    ? 建議這樣寫:

    .header,
    .footer {
      background-color#fefefe;
      padding20px 0;
    }


    搜索
    分類
    熱門標簽
  • 首頁
  • 電話
  • QQ
  • ?
    聯系老劉手機
    1043025812
    聯系老劉微信
    掃描微信二維碼
    34pao国产成视频永久免费_国产精品专区第5页_无码精品A∨在线观看_国色天香精品一卡二卡三卡_ww.国产精品