1 字体样式
1.1 字体系列（font family）
在CSS中，字体划分为 五组“字体系列”，分别为：
sans-serif字体系列：没有衬线的字体，最常用不为过，如 Arial、Verdana，Arial Black，Geneva等serif字体系列：有衬线的字体，常用于新闻文字排版，如 Times，Times New Roman，Georgia等monospace字体系列：每个字符都包含固定的宽度，主用于显示软件代码，如 Courier New，Adale Mono，Couriercursive字体系列：Comic Sanc，Apple Chanceryfantasy字体系列：LAST NINJA，Impact
简单来说，serif字体高雅传统；sans-serif字体外观清晰，可读性强，最常用；Monospace字体像是打印；而Cursive和fantasy这是一种有趣风格。
CSS使用font-family去定义字体时，支持候选字体，以防浏览器没有对应的字体，如：
body {
font-family:Verdana,Geneva,Arial,sans-serif;
}
/*
注意的是字体名称大小写要区分开来，而且如果字体名称有空格如：Comic Sanc，就要使用引号了"Comic Sanc"，最后要以字体系列作为结尾以防浏览器之前的指定字体都不支持
*/注：
宋体–> “SimSun”
黑体–> “SimHei”
微软雅黑 –> “Microsoft YaHei”
1.1.1 引用外部字体
如果想要使用外部指定的字体就要使用到CSS的一个内置规则——@font-face规则。
@font-face {
font-family:Seiei;
scr:url("url1")
url("url2")
}
h1 {
font-family:Seiei;
}
/*
@font-face先是命名了字体名字，然后使用scr调用外部字体，注意的是这个scr:url("url")的书写方法，同样的这里也是可以候选，这里主要是担心文件格式，最为广泛流传的格式是：".woff" 以及 ".svg"
*/CSS还有其他的一些内置规则，如
@import和@media。@media用于创建应对某些用户客户端的规则，比方说屏幕小于几寸，就要使用这个样式等等。@import用于允许导入其他CSS文件
1.1.2 使用系统字体
如果希望页面结合用户操作系统设置，就可以使用font 来定义（这个可以用来简写），其值有：
- cation ：用于有标题的控件，如按钮
- icon ：用于对图标加标签
- menu ：用于菜单（下拉菜单和菜单列表）
- message-box ：用于对话框
- small-caption ：用于对小控件加标签
- status-bar ：用于窗口状态条
button {
font:cation;
font-size:1em;
/*
假如此时cation样式的大小不足，可以自己调节
*/1.2 字体大小（font-size）
调整字体大小，这里有几种方法（其实诸如框架的外边距，内边距什么的，都是类似这样的方法）
1.2.1 像素（px）
定义像素就是准确的告诉浏览器要高度多高的字体（这个高度是指平时3条线的英语本中最高那条与最低的之间的距离）
body {
font-size:14px;
}1.2.2 百分比（%）
用百分比指定字体大小就是基于父元素继承的字体大小上，得出的结果。如果没有指定字体大小，那么默认的字体大小为16px
body {
font-size:14px;
}
h1 {
font-size:150%;
}
/*
h1的字体为21px
*/1.2.3 单位（em）
在CSS中，1个em 定义为一种 给定字体 的font-size 值，比方说某个元素的font-size 为14像素，那么对于该元素，1em 就等于14像素。
body {
font-size:14px;
}
p {
font-size:1em;
}
/*
p的字体为14px
*/1.2.5 单位（rem）
相对于em，rem有统一的参考font-size，那就是html标签上的字体大小，这对于响应式布局有很大的帮助，比如说可以使用JS检测屏幕大小，从而生成自适应的html标签上的font-size。
以下js插件用于检测生成html标签字体大小
!function(e){function t(){var t=a.clientWidth,i="}";!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)&&t>1024&&(t=640,i=";max-width:"+t+"px;margin-right:auto!important;margin-left:auto!important;}"),e.rem=t/10,/ZTE U930_TD/.test(navigator.userAgent)&&(e.rem=1.13*e.rem),s.innerHTML="html{font-size:"+e.rem+"px!important;}body{font-size:"+12*(t/320)+"px"+i}var i,n,a=document.documentElement,r=document.querySelector('meta[name="viewport"]'),s=document.createElement("style");if(i=e.devicePixelRatio||1,n=1/i,!r)return void console.warn('请设置默认viewport为：');var o=a.clientWidth;a.firstElementChild.appendChild(s),a.setAttribute("data-dpr",i),e.dpr=i,e.addEventListener("resize",function(){t()},!1),e.addEventListener("pageshow",function(e){e.persisted&&t()},!1),t()}(window),function(e,t){var i=[],n={add:function(){i.push({type:"add",args:arguments})},use:function(){i.push({type:"use",args:arguments})},ready:function(){var e=t.KISSY;e&&e.each(i,function(t){e[t.type].apply(null,t.args)})}};t.GL=n}(document,window);
1.2.6 单位（vw）
以视口的宽度大小为标准，分为100份，而1vw则代表1/100的视口宽带大小。
h1 {
font-size: 8vw;
}
/* 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100 */1.2.7 单位（vh）
单位vh的用法与单位vw类似，但vh适用于高度
1.2.7 关键字
这一种指定的方法比较特别，也最推荐使用，这里把字体得大小指定为
- xx-small
- x-small
- small（最常用，约12px，后一层比前一层大约20%）
- medium（约14px）
- large
- x-large
- xx-large
body {
font-size:small;
}
h1 {
font-size:1.5em;
}
/*
这种定义是最常用的，最推荐的
*/1.3 字体的粗细以及风格
1.3.1 字体得粗细（font-weight）
字体的粗细可以使用font-weight表示，可以定义关键字：
- lighter
- normal
- bold
- boler
通常只用 normal 和 bold，当然也可以设置数值100~900（只能是100的倍数）
body {
font-weight:normal;
}1.3.2 字体的风格（font-style）
这里风格的意思其实就是：是否为斜体（有区分斜体**italic还是倾斜**oblique，不过不重要）
body {
font-style:italic;
}1.4 文本的装饰（text-decoration）
文本装饰允许你为文本增加一些装饰性的效果，如下划线、上划线和删除线，只需使用text-decoration
/* 删除线 */
em {
text-decoration:line-through;
}
/* 上划线 */
em {
text-decoration:overline;
}
/* 下划线 正常来讲文本是不会使用字体下划线的以防被认为是链接，通常会使用边框 “border-bottom” */
em {
text-decoration:underline;
}
/* 下划线与上划线,只需用空格连接 */
em {
text-decoration:overline underline;
}
/* 最后就是取消装饰，例如对元素的链接取消下划线 */
a {。
text-decoration:none;
}2文本属性
2.1 文本缩进（text-indent）
text-indent 属性可以定义——所有元素的第一行缩进的给定长度值，这个值甚至可以为负值，属性本身可继承。
当属性值为百分数时，其相对对象为父类块元素的宽度。
body {
text-indent:4em;
}2.2 文本水平对齐（text-align）
text-align 属性不仅作用于文本，它可以对块元素中的所有内联元素内容对齐，text-align 属性只应用于块级元素，所以说在内联元素如text-align 属性。
属性值有四个，除了左右中三个之外，还有一个justify 属性值。justify 属性值作用是两端文本对齐。
body {
text-align:justify;
}2.3 文本垂直对齐（vertical-align）
vertical-align 属性只能应用于内联元素和替换元素（如图像和表单元素），不能继承。
关键字属性值有：
- baseline ：基线对齐，如果元素没有基线（图像或表单），则该元素地段与父元素基线对齐。
- sub ：下标，具体距离由浏览器决定
- super ：上标，具体距离由浏览器决定
- bottom ：底端对齐，元素行内框底端与行框底端对齐
- top ：顶端对齐，注意是行内框与行框
- middle ：居中对齐，接近但不是中点对齐，对齐目标是父元素的基线上方0.25处
2.4 行高（line-height）
line-height属性允许定义文本行高（注意不是行距）
body {
line-height:20%
}
/*
0.2倍行高
*/上述值得注意的是20%，代表的到底是谁的0.2倍？
其实只要没有设置过数值的元素都是继承父类元素的。比如来讲，当前元素的字体大小属性是从元素继承的，而默认字体为small,那么设定的行距就可以算出来了。
而问题又出来了，假如当前元素下有类如,这些元素又怎么办呢？
因为设定的行距是基于small字体大小的，那么这些元素定然会靠得很近，所以这里就可以直接给line-height赋予数值，这样的意义是基于当前元素字体大小的倍数，如：
body {
line-height:1.5;
}
/*
直接赋予数值
*/一旦给定了内容行已经生成的所有行内框，下来再行框的构造中就会考虑这些行内框。（行内框与行框不是同一种东西）
2.5 字间距（word-spacing）
word-spacing 属性定义字间距，“字”是任何非空白字符组成的字符串。
body {
word-spacing:0.2em;
}2.6 字母间距（letter-spacing）
字母间距使用lettr-spacing来定义
body {
letter-spacing:1em;
}字体属性简写形式：
body {
font:font-style font-weight font-variant font-size/line-height font-family
}
/*
注意斜杠号，不分顺序，除字体大小必须填写外，其它可选，font-family候选时要使用逗号
font属性属于简写属性，因此每次定义都会覆盖先前给定的元素指定值
*/2.7 word-break，word-wrap以及white-space
关于字符转行，需要了解以上三个属性。
word-break，使其容器如的内容自动换行，属性值有三个分别是：normal（使用浏览器默认规则），break-all（允许在单词内换行）以及keep-all（只能在半角空格或连字符处换行）word-wrap，使其容器如的内容自动换行，属性值有两个分别是：normal（使用浏览器默认规则），break-word（允许长单词留到下一行，前提是留到下一行时，容器能装得下，否则还是要换行）white-space，详情可看这里，的属性值：
normal： 不保留书写形式换行，忽略空白符nowrap：合并空白符序列，不保留书写形式换行，定义文本不换行，直到遇到pre：保留空白符与书写形式换行，段落不会自动换行pre-wrap：保留空白符序列，保留书写形式换行，段落会自动换行pre-line： 合并空白符序列，保留书写形式换行，段落会自动换行
3 颜色
CSS提供了几种指定颜色的方法，如：
- 指定颜色名
- 通过百分比指定红绿蓝各自的值
- 通过数值（0~255）指定红绿蓝各自的值
- 通过使用十六进制（hex）指定红绿蓝各自的值（前面要加
#号）
十六进制是制定Web颜色最为常用的方法，不过所有这些指定颜色的方法最终目的都是告诉浏览器，这个颜色种红、绿、蓝分量分别是多少。
/* 百分比 255*80%,40%255,0 */ body { color:rgb(80%,40%,0%); } /* 数值 */ body { color:rgb(204,102,0); } /* 十六进制 12*16+12,6*16+6,0 */ body { color:#cc6600; } /* 十六进制颜色有简写，如上述可写成：#c60 */color属性实际上控制着一个元素的前景色，所以它会控制文本和边框的颜色，所以当文本与边框颜色冲突时，可以使用border-color属性指定边框颜色转载于:https://www.cnblogs.com/AB786883603/p/8325420.html