整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：在涉及到一些表單頁面的設計時，必填項目常常需要用“*”來進行特殊標記。本篇文章作者從十分常見的星號（*）出發，從“星號（*）”起源到現在的用戶界面應用，將相關信息匯總歸納，一起來看。
這次的起因是在工作涉及到一些B端表單頁的設計，其中必填項目需要用“*”來進行特殊標記，這本來是大家常見共識的點，但慢慢發現，有的頁面中幾乎全部都是必填項，就開始思考既然全都需要用“*”標記，那標記還有意義嗎？于是就去查閱了部分資料，從“星號（*）”起源到現在的用戶界面應用，將相關信息匯總歸納，集合這一篇。
星號（英文：asterisk，拉丁文：asteriscum，意謂“小星星”，來自希臘文 ?στερ?σκο?）是印刷符號或字形。之所以稱為星號是因為與一般人印象中的星星相似。計算機科學家與數學家常稱之為“star”或“星”。
星號起源于歐洲封建時代，族譜印制者要表示出生日期的符號。最初的形狀是六芒，每一芒都像是由中央散開的淚珠。因此，有些電腦界的圈子稱之為“splat”（狀聲詞，類似中文的“啪”），或許是因為許多早期的列式打印機印出來的星號看起來像是被壓扁的蟲子。
現代的計算機操作體統已經可以同時兼容多種字體，因此使用不同的輸入法，所展示出的星號*也各不相同。
那我們回到之前的那個問題，同一頁內表單設計中如果存在大量標記符號，是否可以省略呢？答案是絕對不可以。要明確的一點是，表單上標記符號的目的是提醒用戶注意這里是一個重要項，要謹慎仔細的進行操作（常見為必填項）。
那除了使用標記符號外， 也可以在表單下方進行單獨說明告知用戶進行相應操作（此處要和驗證提示的說明文字區分開）。
回到一開始對于“標記符號（*）”的解釋，目的是為了提醒用戶注意，如果用戶已經知道該項為重要項，在某些特殊場景，例如“登錄頁”都需要輸入賬號密碼，已經是大家的共識（雅各布定律）的情況下，可以不進行特殊標示。
需要注意的是注冊頁是必須要進行標示的，需要根據實際業務情況選擇需要將哪些標示為必填項。
首先要明確一點，在界面設計中，“*”既有標示符號的屬性，其本身具有字符屬性。因此需要注意在使用標示符屬性時，“*”是一個獨立的元素。因為“*”經常和表題一起，就會有很多設計師直接在表題同一個文本框內打出一個*字符，這其實在邏輯上是不對的（盡管看起來一樣）。
標記符號（*）的放置位置并沒有一個統一的標準，在查閱大廠規范后發現放在表題前、表題后并沒有一致的標準，在實際項目中優先選擇放在前面，因為這種情況更多，用戶更容易接受。如果有其他的想法，注意保持全局統一。
前面說過“*”在作為標示符號時，是一個獨立的元素，那么在一個頁面中元素之間應該符合整體的柵格規范。如果直在表題框內打一個*，那么*就會和文字貼在一起，有的設計師會打兩個空格作為間距來改善視覺效果，這種做法仍然有些草率。在Ant Design中“*”和表題之間間距為4px。
在上文介紹了關于“*”的基本知識和界面設計中的使用方式，像是這種被大家習以為常的小細節，很容易被忽略。在平時的實踐過程中，應該多注意這些“共識性“的內容，并在系統學習分析后，再落實在自己的設計之中。
資料參考：
本文由 @YMOOOM 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
.概念
層疊樣式表（Cascading Style Sheets），用于美化網頁。在網頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
2.語法:由選擇器和聲明兩大部分組成，聲明又是由屬性和屬性值兩部分組成
選擇器{ 屬性1：屬性值1；屬性2：屬性值2； }
div { font-size: 12px; color: #F00; …… }
/*聲明放在花括號中，每條聲明結束要加分號，屬性和屬性值之間用冒號，標點符號必須是英文*/選擇器：選擇需要修改的網頁內容。
基本選擇器有三個（id、類(class)、標簽）
① id選擇器：使用#號開頭，后面寫上id的名稱。body標簽內的所有元素都有 id 屬性。一個頁面中只能使用一個id名，id名必須是唯一的。id名命名要語義化，不允許使用中文，數字，或以數字開頭，關鍵詞常見命名方法：駝峰命名法（qfEduTit） 下劃線連接命名法（qf_edu_tit）。
② 類(class)選擇器：使用 . 號來表示開頭，后面寫上類的名稱，body標簽中的所有標簽都有class屬性。class名稱可以重復使用。
③ 標簽選擇器：直接使用標簽，html中的所有標簽都可以作為選擇器。
三種選擇器的優先級：范圍越小，優先級越大，id選擇器>類(class)選擇器>標簽選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/*類選擇器*/ /* CSS注釋的內容 */
.text{
color: red;
}
/*id選擇器 #*/
#idText{
color:pink;
}
/*標簽選擇器*/
p{
font-size:100px;
}
/*通配符選擇器 匹配網頁中所有的內容*/
*（注意前面是個星號){
}
</style>
</head>
<body>
<h1>css的基本選擇器</h1>
<!--使用class屬性的時候 他的屬性值可以重復使用-->
<p class="text">xxx</p>
<p class="text">xxxx</p>
<!--id屬性的屬性值 只能是唯一的-->
<h1 id="idText">xxxx</h1>
<p id="idTextb">xxxx</p>
<!--標簽選擇器-->
<p>段落標簽</p>
</body>
</html>3.引用方式
① 內聯(行內樣式)
<p style="color: red;">xxx</p>
直接寫在標簽中② 內部樣式表
將html代碼和css樣式做簡單分離，在網頁頭部創建style標簽，寫入css樣式，如上。
③ 外部樣式表
將css樣式單獨寫入到一個后綴名 .css 外部文件中，然后引入
（a）使用link標簽引入外部css文件；
<link rel="stylesheet" type="text/css" href="demo.css">
link標簽一般放在head部分，
rel="stylesheet"：聲明外部樣式；
type="text/css"：引入文件類型；
href="xxxx.css"：引入文件地址（b）使用@import導入外部css文件，@import url(css文件路徑);
兩者區別：link引入的css文件和頁面同時加載，而@import引入的css文件則是在頁面加載完后才加載；link不存在兼容性問題，而@import是css2.1提出的，ie5及以下瀏覽器不支持；link屬于html標簽。
樣式表的優先級：當多個樣式表里給同一個元素設置相同樣式時，會出現優先級問題，一般使用就近原則，即離被設置元素越近，優先級越高。
內聯>內部樣式>外部樣式
4.更多選擇器
①、后代選擇器
語法： 選擇符1 選擇符2{屬性:屬性值;} 選擇符之間有空格
eg: ul li{ color:red; }
選擇符1和選擇符2必須滿足包含與被包含的關系，才可以使用后代選擇器
②、子選擇器
語法：選擇符1>選擇符2{屬性:屬性值;}
總結：> 作用于選中元素的第一代后代(Child selectors)，空格作用于選中元素的所有后代。子選擇器范圍比后代選擇器范圍小。
子選擇器
后代選擇器
③、并集/群組選擇器，當需要給不同類型的元素設置相同的樣式時
語法：選擇符1,選擇符2,選擇符3{屬性:屬性值;}
eg: h1,h2,h3,h6,p,b{ font-weight:normal; }
④、通配符（通用選擇器）
語法： *{屬性:屬性值;}
*匹配包括html元素在內的所有標簽元素
擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
CSS代按碼注釋寫法不是亂搞的，當你在鍵盤上按下注釋鍵那一刻時，就可以發現，其實注釋是有規范的。今天我就來捋一捋這些注釋的規則。
注意到了，單選注釋時，星號必須和內容保留一個空格。
看出來了，星號要對齊，星號和內容之間必須保留一個空格。
塊內注釋，比如SCSS文件里就可以這么注釋，也需要注意，//后面加上一個空格，注釋獨立一行。
一般文件頂部必須包含詳細的文件注釋，這樣另一個人查看時才順手。甚至自己今后翻看時也能更清晰。上面看出，用@name標識文件說明，星號要一列對齊，星號與內容之間必須保留一個空格，標識符冒號與內容之間必須保留一個空格。
其中@update為可選項，建議每次改動都更新一下。
當該業務項目主要由固定的幾個人負責時，另外要添加@author，寫上作者名稱。一方面，尊重勞動成果。另一方面方便在需要時快速責任人。
總結一下：
這些規則很容易被忽略掉，好的注釋能大大提高代碼的質量，同時JS文件也適應。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
