如何優雅的寫 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. 屬性聲明順序

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

定位相關，如 position、top/bottom/left/right、z-index 等
盒模型相關，如 display、float、margin、width/height 等
排版相關，如 font、color、line-height 等
可視相關，如 background、color 等
其他，如 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樣式會覆蓋前面的樣式。

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

在線咨詢

上一篇：電信｜預存50送100活動
下一篇：幾何畫板手機版下載地址，需要的看過來

您的項目需求

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

整合營銷服務商