整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          如何優雅的寫 css 代碼

          如何優雅的寫 css 代碼

          者:京東科技 楊健

          CSS(全稱 Cascading Style Sheets,層疊樣式表)為開發人員提供聲明式的樣式語言,是前端必備的技能之一,基于互聯網上全面的資料和簡單易懂的語法,CSS 非常易于學習,但其知識點廣泛且分散,很難做到精通,在我們日常開發中,常常忽視了 CSS 代碼的質量,很容易寫出雜亂無章的 CSS 文件。

          代碼優化建議

          1. 使用縮寫屬性精簡代碼

          適用于:margin、padding、border、font、background 等

          但并非所有情況下都必須縮寫,因為當一個屬性的值縮寫時,總是會將所有項都設置一遍,而有時候我們不希望設置值里的某些項,這時候需要開發者自行判斷。

          .content{
              // 縮寫前
              margin-right:16px;
              margin-top:30px;
              width:184px;
              height:32px;
              background:#FFFFFF
              margin-left:10px;
          }
          .content{
              //縮寫后
              margin:30px 16px 0 10px;
              width:184px; 
              height:32px; 
              background:#FFFFFF
          }
          

          2. 合并選擇器

          使用 "," 連接多個選擇器定義公用屬性,不僅能增加可讀性,還能減小 css 文件大小。

          .content{
            display: flex;
            .flush, 
            .include, 
            .underline{
             margin-right: 12px; 
             padding: 3px 6px; 
             border: 1px solid #a96161; 
             font-size: 12px; 
             color: #412c2c; 
             }
             .flush{ 
             color: #FFFFFF; 
             background-color: aqua; 
             }
             .include{ 
             color: #5d3e3e; 
             background-color: #657f7f; 
             }
              .underline{ 
              color: #7da938; 
              background-color: #7c6a6a; 
              }
          }
          

          3. 使用更語義化的單詞命名 class

          命名的時候以 “在你之后開發的人不會產生疑惑” 為目標 如下

          .curr{
              color:#FFFFFF;
              background:red;
          }
          .future{
              background:#9f6262;
          }
          // curr 是啥? future又是啥? ??
          
          .current-count{ 
              color:#FFFFFF; 
              background:red; 
          } 
          .future-count{ 
              background:#9f6262; 
          }
          

          4. 屬性聲明順序

          選擇器中屬性數量較多時,將相關的屬性聲明放在一起,并按以下順序排列:

          1. 定位相關,如 position、top/bottom/left/right、z-index 等
          2. 盒模型相關,如 display、float、margin、width/height 等
          3. 排版相關,如 font、color、line-height 等
          4. 可視相關,如 background、color 等
          5. 其他,如 opacity、animation 等

          建議:在屬性數量較多時可以參考這 5 個類別歸類排列。

            /* 定位相關 */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            /* 盒模型相關 */
            display: block;
            float: right;
            width: 100px;
            height: 100px;
            /* 排版相關 */
            font: normal 13px "Helvetica Neue", sans-serif;
            line-height: 1.5;
            color: #333;
            text-align: center;
            /* 可視相關 */
            background-color: #f5f5f5;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            /* 其他 */
            opacity: 1;
          

          5. 使用 & 符號引用父選擇器

          & 是 Sass 和 Less 中提供的語法糖,用于表示對父選擇器的引用

          優點:非常適合用于編寫組件的樣式,減少了很多重復單詞

          缺點:從 HTML 的 class name 中尋找對應樣式的成本增加

          .first {
              .first-title {/* styles */}
              .first-title:after {/* styles */}
              .first-content {/* styles */}
          }
          /* 用&引用來優化代碼 */
          .first {
              &-title {
                  /* styles */
                  &:after {/* styles */}
              }
              &-content {/* styles */}
          }
          

          Sass .vs. Less?

          預處理器將 CSS 從聲明語言轉換成一門編程語言

          可嵌套的語法增加了樣式文件的可讀性和可維護性

          變量與混合特性能夠減少很多重復的樣式聲明

          Less 更像 CSS,易于上手,能夠從 CSS 平滑過渡;Sass 的縮進語法接受度因人而異,Sass3.0 中提出了兼容 CSS 的 Scss,用戶可以選擇使用 Sass 或 Scss。

          當項目 CSS 中需要涉及復雜邏輯時,Sass/Scss 更適合,Sass 提供了更強大、更接近編程語言的 @function、@if/@else、@while 等語法;當項目的樣式復雜度不高時,選 Sass 或 Less 都可以。 (下面是一個 Less 和 Scss 語法對比例子)

          // Less
          .mixin( @count )when( @count > 0 ){
              background-color: black;
          }
          .mixin( @count )when( @count <=0 ){
              background-color: white;
          }
          .tag {
              .mixin(100);
          }
          // Scss
          @function selectCount($count) {
              @if $count > 0 {
                  return black;
              }
              @else {
                  return white;
              }
          }
          .tag {
              background-color: checkCount(100);
          }
          

          綜上,CSS 作為一門前端必備的基礎技能,具有許多原生的痛點。近年來,開發者們也在源源不斷地提出了不同的優化方案,我們在日常關注 Vue、React、NodeJS、性能優化等熱門前端話題的時候,也不要忘了好好寫 CSS 代碼呀~

          一部分:HTML簡介

          什么是HTML?

          HTML代表超文本標記語言(Hypertext Markup Language)。它是一種用于構建網頁的標記語言。HTML文件包含一組標簽,這些標簽用于定義網頁的結構和內容。瀏覽器讀取HTML文件,并根據標記中的指示呈現網頁內容。

          HTML的主要作用是定義文本內容、圖像、鏈接和其他媒體的排列方式,并提供交互元素,例如表單和按鈕。

          HTML的基本結構

          每個HTML文檔都應該遵循以下基本結構:

          <!DOCTYPE html>
          <html>
          <head>
              <title>網頁標題</title>
          </head>
          <body>
              <!-- 內容在這里 -->
          </body>
          </html>
          

          讓我們逐步解釋這個結構:

          • <!DOCTYPE html>:這是文檔類型聲明,它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
          • <html>:HTML文檔的根元素。所有其他元素都包含在<html>標簽內。
          • <head>:包含與文檔相關的元信息,如頁面標題、字符集聲明和外部樣式表鏈接。
          • <title>:定義網頁的標題,顯示在瀏覽器標簽頁上。
          • <body>:包含網頁的主要內容,如文本、圖像和其他媒體。

          HTML標簽和元素

          HTML標簽是由尖括號括起來的名稱,例如<p>表示段落,<img>表示圖像。標簽通常成對出現,有一個開始標簽和一個結束標簽。例如:

          <p>這是一個段落。</p>
          

          <p>是開始標簽,</p>是結束標簽,文本位于兩個標簽之間。標簽定義了元素的類型和結構。

          有些HTML標簽是自封閉的,不需要結束標簽,例如<img>用于插入圖像。

          HTML注釋

          在HTML中,你可以使用注釋來添加說明性文字,注釋不會在瀏覽器中顯示。HTML注釋使用<!--開頭和-->結尾,如下所示:

          <!-- 這是一個注釋 -->
          

          注釋通常用于添加文檔說明、調試代碼或標記未來的修改。

          第二部分:HTML基本元素

          文本

          HTML中的文本通常包含在段落、標題、列表等元素中。以下是一些常見的文本元素:

          • <p>:定義一個段落。
          • <h1><h6>:定義標題,<h1>是最高級別的標題,<h6>是最低級別的標題。
          • <strong>:定義強調文本,通常以粗體顯示。
          • <em>:定義強調文本,通常以斜體顯示。
          • <a>:定義超鏈接,允許用戶點擊跳轉到其他頁面。

          示例:

          <p>這是一個段落。</p>
          <h1>這是一個標題</h1>
          <p><strong>這是強調文本。</strong></p>
          <p><em>這是斜體文本。</em></p>
          <p>訪問<a href="https://www.example.com">示例網站</a></p>
          

          圖像

          要在網頁中插入圖像,可以使用<img>標簽。它是一個自封閉標簽,需要指定圖像的src屬性來指定圖像文件的路徑。

          示例:

          htmlCopy code
          <img src="image.jpg" alt="圖像描述">
          
          • src:指定圖像文件的路徑。
          • alt:提供圖像的替代文本,用于無法加載圖像時的文字描述。

          鏈接

          通過使用<a>標簽,可以在網頁中創建鏈接。鏈接通常包含在文本或圖像中,并使用href屬性指定目標URL。

          示例:

          <a href="https://www.example.com">訪問示例網站</a>
          
          • href:指定鏈接的目標URL。

          列表

          HTML支持有序列表(<ol>)、無序列表(<ul>)和定義列表(<dl>)。

          無序列表

          無序列表使用<ul>標簽定義,每個列表項使用<li>標簽。

          示例:

          <ul>
              <li>項目1</li>
              <li>項目2</li>
              <li>項目3</li>
          </ul>
          

          有序列表

          有序列表使用<ol>標簽定義,每個列表項使用<li>標簽。

          示例:

          <ol>
              <li>第一項</li>
              <li>第二項</li>
              <li>第三項</li>
          </ol>
          

          定義列表

          定義列表使用<dl>標簽定義,每個定義項目使用<dt>標簽定義術語,使用<dd>標簽定義描述。

          示例:

          <dl>
              <dt>術語1</dt>
              <dd>描述1</dd>
              <dt>術語2</dt>
              <dd>描述2</dd>
          </dl>
          

          第三部分:HTML表單

          HTML表單允許用戶與網頁進行交互,提交數據。以下是HTML表單的基本元素:

          <form>元素

          <form>元素用于創建表單,可以包含文本字段、復選框、單選按鈕、下拉列表等。

          示例:

          <form action="submit.php" method="post">
              <!-- 表單元素在這里 -->
          </form>
          
          • action:指定表單數據提交的目標URL。
          • method:指定提交方法,通常是"post"或"get"。

          輸入字段

          輸入字段用于接收用戶輸入的數據,常見的輸入字段類型包括文本框、密碼框、單選按鈕、復選框等。

          文本框

          文本框使用<input>標簽,type屬性設置為"text"。

          示例:

          <input type="text" name="username" placeholder="用戶名">
          
          • type:指定字段類型。
          • name:指定字段的名稱。
          • placeholder:設置文本框的占位符文本。

          密碼框

          密碼框使用<input>標簽,type屬性設置為"password"。

          示例:

          htmlCopy code
          <input type="password" name="password" placeholder="密碼">
          

          單選按鈕

          單選按鈕使用<input>標簽,type屬性設置為"radio"。

          示例:

          <input type="radio" name="gender" value="male">男
          <input type="radio" name="gender" value="female">女
          
          • name:指定單選按鈕組的名稱。
          • value:指定每個選項的值。

          復選框

          復選框使用<input>標簽,type屬性設置為"checkbox"。

          示例:

          <input type="checkbox" name="subscribe" value="yes">訂閱新聞
          

          下拉列表

          下拉列表使用<select><option>標簽創建。<select>定義下拉列表,而<option>定義選項。

          示例:

          <select name="country">
              <option value="us">美國</option>
              <option value="ca">加拿大</option>
              <option value="uk">英國</option>
          </select>
          
          • name:指定下拉列表的名稱。
          • 每個<option>標簽表示一個選項,使用value屬性定義選項的值。

          第四部分:HTML樣式和CSS

          HTML用于定義網頁的結構和內容,但要使網頁看起來更吸引人,需要使用CSS(層疊樣式表)。CSS允許你定義字體、顏色、布局等樣式。

          內聯樣式

          可以在HTML元素內部使用style屬性來定義內聯樣式。

          示例:

          <p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>
          

          外部樣式表

          外部樣式表將樣式規則保存在獨立的CSS文件中,并通過<link>標簽將其鏈接到HTML文檔。

          示例(style.css):

          /* style.css */
          p {
              color: blue;
              font-size: 16px;
          }
          

          在HTML中鏈接外部樣式表:

          <link rel="stylesheet" type="text/css" href="style.css">
          

          這使得可以在整個網站上共享相同的樣式。

          總結

          HTML是構建現代網頁的基礎。通過學習HTML的基本語法和元素,你可以創建吸引人且功能強大的網頁。無論是文本、圖像、鏈接還是表單,HTML提供了豐富的工具來呈現內容和實現用戶交互。

          這篇文章提供了HTML的基礎知識,但HTML是一個廣泛的主題,還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助,讓你能夠開始創建自己的網頁。繼續學習和實踐,你將成為一個熟練的網頁開發者。

          一篇文章說了HTML,現在再來說一說CSS,所謂CSS是指層疊樣式表 (Cascading Style Sheets),通過引入樣式表,從而極大的提高了工作效率。

          搭配視頻觀看效果更佳~~

          Web前端開發零基礎入門HTML/CSS/JavaScript

          https://www.ixigua.com/6907467670300393988


          什么是CSS?

          Cascading Style Sheet

          層疊樣式表語言(不是編程語言,屬于樣式表語言,沒有變量、數據類型、控制語句...)

          CSS其實是專門用來修飾HTML的,讓HTML更好看。

          CSS是HTML的化妝品。

          CSS是為HTML服務的,所以HTML還是主體,CSS是依附在HTML上的,

          所以進行CSS的開發,我們還是需要新建html/htm文件。

          在HTML中怎么嵌入CSS樣式呢?

          第一種方式:內聯定義

          第二種方式:定義內部樣式塊對象

          第三種方式:鏈入外部樣式表文件(這種方式最常用!)

          關于選擇器的優先級:

          • 標簽選擇器優先級最低。
          • 其次是類選擇器。
          • 最高優先級是id選擇器。

          CSS設置背景(background)

          • 背景顏色 background-color
          • 背景圖片 background-image
          • 背景重復 background-repeat:repeat-x/repeat-y
          • 背景位置 background-position:bottom/left/top/right/center
          • 背景關聯 background-attachment:fixed/scroll

          綜合寫法:

          .tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

          CSS設置文本格式

          通過文本屬性,您可以改變文本的顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進,等等。

          文本縮進 :Text-indent:2em

          文本對齊方式:Text-align:left/right/center/ justify

          文本修飾:Text-decoration:underline/line-through/overline/none

          字符間距:Word-spacing:px/em 英文單詞之間的間隔;

          Letter-spacing:px/em漢字和英文字母之間的間隔;

          文本轉換:Text-transform:uppercase/lowercase/ capitalize

          行與行間距:Line-height:px/%

          垂直對齊圖像: vertical-align:text-top/text-bottom

          文本陰影:text-shadow:水平偏移,垂直偏移 顏色

          字體

          字體類型:font-family:”sans-serif”;

          字體樣式:font-style:normal ;

          字體大小:font-size:20px/3.75em/100%;默認大小為16px,字體為宋體

          字體加粗:font-weight:normal;

          字體的轉變:font-variant:normal/smallcaps;

          CSS鏈接

          鏈接的四種狀態

          a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
          a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
          a:hover {color:#FF00FF;}    /* 鼠標指針移動到鏈接上 */
          a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

          【注意】當為鏈接的不同狀態設置樣式時,請按照以下次序規則:

          a:hover 必須位于 a:link 和 a:visited 之后

          a:active 必須位于 a:hover 之后

          去掉a鏈接默認的下劃線

          text-decoration:{none/underline}

          a:link {text-decoration:none;}
          a:visited {text-decoration:none;}
          a:hover {text-decoration:underline;}
          a:active {text-decoration:underline;}

          創建鏈接塊

          display:block;

          列表樣式

          在一個無序列表中,列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中,標志可能是字母、數字或另外某種計數體系中的一個符號。

          要修改用于列表項的標志類型,可以使用屬性 list-style-type:

          ul {list-style-type : square;}

          上面的聲明把無序列表中的列表項標志設置為方塊。

          列表項圖像

          你可能想對各標志使用一個圖像,這可以利用 list-style-image 屬性做到:

          ul li {list-style-image : url(xxx.gif);}

          列表標志位置

          ul{
            list-style-position:inside;
            }

          CSS表格

          表格邊框

          table,th,td{border:1px solid red;}

          折疊邊框

          border-collapse:collapse;

          • 表格的寬度和高度

          width,height

          • 表格的文字水平對齊

          text-align:center/right/left;

          • 表格的文字垂直對齊

          vertical-align:bottom;

          • 表格的內邊距

          padding

          • 表格的背景顏色

          background

          盒子模型

          margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

          根據上, 右, 下, 左的順時針規則, 簡寫為

          margin: 40px 40px 40px 40px;

          為便于記憶, 請參考下圖:

          當上下, 左右margin值分別一致, 可簡寫為:

          margin: 40px 40px;

          前一個40px代表上下margin值, 后一個40px代表左右margin值.

          當上下左右margin值均一致, 可簡寫為:

          margin: 40px;

          padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離

          【注意】當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.

          邊框

          • 邊框樣式:border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
          • 邊框寬度:border-width
          • 邊框顏色:border-color

          綜合寫法:

          border:1px solid red;

          輪廓(outline)

          可以按順序設置如下屬性:

          • outline-color
          • outline-style
          • outline-width

          CSS所有尺寸

          • 寬度

          width/min-width/max-width

          • 高度

          height/min-height/max-height

          • 行高

          line-height

          display顯示類型

          隱藏元素—–display:none或者visibility:hiddden

          display通常可以設置為none、inline、block

          visibility通常可以設置為hidden、visible

          二者的區別在于display會將元素隱藏掉,并且位置不再被占據,而visibility則是占據原來的位置。

          CSS塊級元素和內聯元素—-display:block/inline/inline-block;

          CSS定位(position)

          position 屬性值的含義:

          static

          元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置于其父元素中。

          relative

          元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

          absolute

          元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

          fixed

          元素框的表現類似于將 position 設置為 absolute,不過其包含塊是視窗本身。

          CSS浮動

          設置浮動:float:left/right;

          清除浮動:clear:both/left/right/null;

          浮動的兩個影響因素:1、文檔流 2、顯示類型

          元素內容溢出

          • 溢出滾動條

          overflow:scroll(不管是否溢出都會有滾動條)、auto(自動添加)

          • 溢出隱藏

          overflow:hidden;

          CSS的相關特性

          1、繼承性

          它不僅允許樣式應用于某個特定的html標簽元素,而且還可引用于其后代;

          2、CSS層疊

          當有相同權重的樣式存在時,會根據這些CSS樣式的前后順序來決定,處于最后面的CSS樣式會被應用,后面的CSS樣式會覆蓋前面的樣式。

          總而言之:內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)


          主站蜘蛛池模板: 杨幂AV污网站在线一区二区| 一区二区三区日本电影| 国产精品毛片VA一区二区三区| 国产精品第一区揄拍无码| 日韩精品午夜视频一区二区三区| 濑亚美莉在线视频一区| 天码av无码一区二区三区四区| 日韩在线视频一区| 国产亚洲情侣一区二区无码AV| 色窝窝无码一区二区三区| 亚洲日韩AV一区二区三区中文| 秋霞电影网一区二区三区| 奇米精品一区二区三区在| 精品国产福利一区二区| 美女视频免费看一区二区| 国产免费无码一区二区 | 国产一区二区高清在线播放| 久久一区二区精品| 日本精品一区二区三本中文 | 精品一区精品二区制服| 日韩在线视频一区| 亚洲AV综合色一区二区三区| 午夜视频在线观看一区| 亚洲AV无一区二区三区久久| 国产精品免费综合一区视频| 一区二区三区视频免费| 亚洲一区影音先锋色资源| 人妻无码一区二区三区| 亚洲视频一区二区三区四区| 国产伦精品一区二区三区视频金莲 | 无码人妻精品一区二区三区在线| 精品亚洲福利一区二区| 人妻AV中文字幕一区二区三区| 日韩A无码AV一区二区三区| 激情亚洲一区国产精品| 亚洲无线码在线一区观看 | 亚洲一区二区三区在线视频| 女女同性一区二区三区四区| 亚洲国产综合精品中文第一区| 国产伦精品一区二区免费| 日韩精品一区二区三区中文版|