整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导语：在涉及到一些表单页面的设计时，必填项目常常需要用“*”来进行特殊标记。本篇文章作者从十分常见的星号（*）出发，从“星号（*）”起源到现在的用户界面应用，将相关信息汇总归纳，一起来看。
这次的起因是在工作涉及到一些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小时内与您取得联系。
