2、在数据设置界面，找到“排序”选项，点击；
3、在弹出的排序设置框里找到右边的“次序”，点击旁边的倒三角图标；
4、就会出来排序的选项可供选择，这里要使A列按第一个字的拼音首字母由A至Z的顺序排列下来，则选择升序，再点击下方的确定；
无论字体多么独特，它们都有一些共同的特点。就像人体一样，字体可以分解成具有特定名称和功能的解剖部分。无论您是字体设计师还是普通的排版爱好者，学习字体的解剖结构都可以帮助您更好地了解什么是好字体或坏字体，是什么影响了它的易读性，或者是什么创造了一种特定的风格。
此外，您会更有信心选择满足您的需求并适合您的设计项目的字体。x 高度是否定义了小写“x”的高度？在什么情况下跟踪没有帮助，所以您需要应用字距调整？您需要特定的数字字体吗？您将知道如何回答这些问题，并更有信心与其他设计师更详细地讨论字体。
X-height 定义给定字体的所有小写字母的高度。该术语的名称来自用作测量单位的字母“x”。
x 高度越大，字体利用的空白空间越多，即使在小字体大小下，字体也越清晰。例如，设置为 8pts的 Helvetica 仍然保持清晰和独特。
pts 是表示字的 大小 的一个单位，也叫磅。1mm=2.83 pts
与 x 高度相比， 大写高度 测量给定字体的大写字母的高度。最准确的测量来自平底字母，例如 L、E 或 M。弯曲或尖头字母，例如 S、O 或 A，可能会略微超出大写高度，以实现相同尺寸的光学效果.
笔画 是一个通用术语，指的是构成字符主要部分的任何水平线、垂直线或对角线。笔划可以是直的，如 w、k 和 l，也可以是弯曲的，如 c、o 和 s。
上升 线是小写字母（b、d、f、h、k、l、t）上的垂直笔划，延伸到字体的x 高度 或 大写高度 之上。标记给定字体中所有上升线高度的不可见线称为 上升线 。
下降 部分是小写字母延伸到基线以下的部分。字母 g、j、q、p、y 和有时 f 都有这样的“尾巴”，最低部分由一条看不见 的线标记——下降线 。
如果下降线太长，它们可以与下一行字母的上升线相交。通过查找不具有升序或降序的同义词或调整行距来解决此问题。
衬线 是字母笔画开头或结尾的小型装饰性扩展。它们是衬线字体的标志 - 最初由早期印刷杂志推广的最古老的字体。最受欢迎的衬线字体是 Times New Roman、Georgia 和 Baskerville。
衬线字体营造出一种精致、信任和世界级品质的感觉。纽约时报、赫芬顿邮报、Dior 和 Burberry 使用衬线字体作为他们的品牌。
字距 调整是调整单个字符之间的间距，通常是为了获得视觉上吸引人的结果。某些字母组合（通常涉及向外的角度或大的开放空间，如 W、Y、V 或 T）有很大的间隙并且看起来很尴尬。
有些字体的字距调整在小尺寸下看起来不错，但在放大标题时变得不平衡且难以阅读。发生这种情况是因为许多免费（甚至是低成本）字体几乎没有或没有内置字距调整，并且需要手动调整。
与字距调整不同， 跟踪 调整字母之间的整体间距使文本感觉更宽敞，有时可以用来强调一个词，尤其是与大写字母或小写大写字母结合使用。与字距调整一样，跟踪通常应用于标题和徽标，以减少大型文本中的奇怪间隙。
黑色背景上的白色文本在应用了更多跟踪时通常会被认为更清晰。
所有字母所在的不可见水平线称为 基线 。基线以下的所有内容都是 下降 器。
基线定义了每个字母的 x 高度的底部，并在测量文本和元素之间的垂直距离方面发挥着重要作用。
粗细 代表字体笔划的相对粗细。一个常见的字体可能有 3 到 6 个粗细，包括变体，例如轻、常规、中等和粗体。
在 CSS 中，网页设计师使用数值来定义 font-weight 属性：100 - 细，400 - 正常或常规，700 - 粗体，900 - 黑色或粗体。
当使用非常轻（如 100 或 200）或非常重（800 或 900）时，请使用较大的字体。否则，文字将无法辨认。
表格数字 ，又名等宽数字，是指图形的间距，它们都占据相同的水平空间。结果，数字“1111”占用的空间与“9999”一样多。
设计师应在年度报告、价目表、财务报表、发票和其他数值不断变化且可能看起来抵消的数字列中的表格中使用表格数字。使用表格数字，用户可以轻松地扫描和比较数值数据。
与表格图形不同， 比例 图形或非 衬里图形 具有不同的宽度，从而产生更均匀、平衡的间距。设计师应该在标题、副标题或任何其他应融入文本上下文且不需要与其他数字垂直对齐的副本中使用比例数字。
在排版中， 连字 是两个或多个字素或字母组合成一个字形。最常见的连字，如 fi、fl 和 ff，由于其悬垂的形状而涉及小写 f。 另一个著名的连字是和号 (&)，表示来自单词 et 的古老手写拉丁字母 e 和 t 的组合，意思是“和”。
根据它们在文本中的作用，连字分为 4 种类型：
标准
fi、fl、ff、ffi、ffl 和 ft 等连字的存在是为了增加易读性并使这种字母的碰撞更具吸引力。
全权委托
这些连字可能包括 ct、fs、st、sp 并起到装饰作用，创造出更老式的外观。
不寻常或不常见
可能包括在文本中很少遇到的标准和自由连字，如 fj、fk 或 ij。
长款
这些通常是包含长 s 与 h、l、i 或 t 组合的任意连字。
基本
常识与实践
链接方式
基本
最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了
"style="background-image:url({{user.avatar}})"
内部链接
要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面
<style>
p {
color: gray
}
</style>
css文件外置
另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:
<link type="text/css" rel="stylesheet" href="lounge.css" >
多样式表
使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:
<link rel="stylesheet" href="corperate.css">//总公司样式
<link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式
<link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整
简写
css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。
简写格式
padding
padding: 0px 40px 30px 20px,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px
padding-top: 0px
padding-right: 40px
padding-bottom:30px
padding-left: 20px
margin
上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。
border
边框属性简写 border: thin solid #007e73,可以用你喜欢的任何顺序。
background
背景简写 background: white url(images/cocktail.gif) repeat-x，同样顺序随便
字体
字体简写的格式稍微复杂一些:
font : font-style font-variant font-weight font-size/line-height font-family
选择
子孙选择器
父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如
color: black
}
直接孩子
如果要选择直接的孩子,用>
color: black
}
复杂选择
更复杂的选择,方法还是一样
color: blue
}
规则添加
类
当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:
<p class="greentea">
...
</p>
类元素选择器
先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:
p.greentea {
color: green
}
添加类元素
如果想对所有<blockquote>也做同样的处理，可以:
blockquote.greentea,p.greentea {
color: green
}
<blockquote class = "greentea">
类选择器
如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要对类中的所有元素都用同一样式可以用:
.greentea{
color: green
}
/ 省略所有元素名,只有一个点,则会应用到所有成员 /
多类元素
元素可以有多个类,例如:
<p class="greentea raspberry blueberry"
特定元素选择器
如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?
id
id的作用
id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如
<p id="footer">...</p>
选择元素
用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配
color: red
}//选择id为footer的任意元素
p#footer{
color: red
}//选择id为footer的<p>元素
实践建议
继承
样式继承
层叠
媒体查询
link媒体查询
你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如
<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
css媒体查询
可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如
@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
margin-right: 250px
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
margin-right: 30px
}
}
@media print { // 如果要打印页面，使用该规则
body {
font-family: Times, "Times New Roman", serif
}
}
实践建议
属性
盒模型
盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:
border 边框
color 颜色
文本元素的字体颜色
body{
background-color: rgb(80%, 40% , 0%)//橙色
}
还可以指定0-255之间的一个数值,例如:
body{
background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...
}
font-family 字体
大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:
body{
font-family: Verdana, Geneva, Arial, sans-serif<一一首选字体呈降序
}
字体系列
每个font-family包含一组有共同特征的字体。共有5个字体系列:
body { font-size : small}
h1 { font-size : 150%}
h2 { font-size : 120%}
注意老版IE不支持用像素指定的文本缩放
浏览器默认字体大小
其他属性
left 指定一个元素的左边所在位置
top 控制一个元素顶部的位置
background-image 在元素后面放置一个图像,如
background-image: url(images/background.gif)
//用url括起来,注意没有引号
background-repeat 背景图像是否重复
line-height: 1//代表elixirs中的所有元素的行间距为其自己字体大小的1倍
}
width: 200px
float: right
}
background-color: #675c47
color:#efe5d0
text-align: center
padding: 15px
margin: 10px
font-size:90%
clear:right
}
width: 800px
padding-top: 5px
padding-bottom: 5px
background-color: #675c47
}
那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间
凝胶布局 Jello
width: 800px
padding-top: 5px
padding-bottom: 5px
background-color: #675c47
margin-left: auto
margin-right: auto
}
绝对定位
position: absolute
top: 100px
right: 200px
width: 280px
}
display: table
border-spacing: 10px//于是不再需要div中的外边距
}
display: table-row
}
display: table-cell
background: #efe5d0 url(images/background.gif) top left
font-size:105%
padding: 15px
/ margin: 0px 10px 10px 10px/
vertical-align: top//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom
}
display: table-cell
background: #efe5d0 url(images/background.gif) bottom right
font-size:105%
padding: 15px
/ margin: 0px 10px 10px 10px/
vertical-align: top
}
