CSS笔记（字体样式，文本属性和颜色样式）

1 字体样式

1.1 字体系列（font family）

在CSS中，字体划分为五组“字体系列”，分别为：

sans-serif字体系列：没有衬线的字体，最常用不为过，如 Arial、Verdana，Arial Black，Geneva等
serif 字体系列：有衬线的字体，常用于新闻文字排版，如 Times，Times New Roman，Georgia等
monospace 字体系列：每个字符都包含固定的宽度，主用于显示软件代码，如 Courier New，Adale Mono，Courier
cursive 字体系列：Comic Sanc，Apple Chancery
fantasy 字体系列：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 百分比（%）

用百分比指定字体大小就是基于父元素继承的字体大小上，得出的结果。如果没有指定字体大小，那么默认的<body>字体大小为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为：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />');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>元素的链接取消下划线 */
a {。
    text-decoration:none;
}

2文本属性

2.1 文本缩进（text-indent）

text-indent 属性可以定义——所有元素的第一行缩进的给定长度值，这个值甚至可以为负值，属性本身可继承。
当属性值为百分数时，其相对对象为父类块元素的宽度。

body {
    text-indent:4em;
}

2.2 文本水平对齐（text-align）

text-align 属性不仅作用于文本，它可以对块元素中的所有内联元素内容对齐，text-align 属性只应用于块级元素，所以说在内联元素如<img>是不起作用的，得把它包围在块元素中，后到块元素上设置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倍？
其实只要没有设置过数值的元素都是继承父类元素的。比如来讲，当前元素的字体大小属性是从<body>元素继承的，而<body>默认字体为small,那么设定的行距就可以算出来了。
而问题又出来了，假如当前元素下有类如<h1>,<h2>这些元素又怎么办呢？
因为设定的行距是基于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，使其容器如<div>的内容自动换行，属性值有三个分别是：normal（使用浏览器默认规则），break-all（允许在单词内换行）以及keep-all（只能在半角空格或连字符处换行）
word-wrap，使其容器如<div>的内容自动换行，属性值有两个分别是：normal（使用浏览器默认规则），break-word（允许长单词留到下一行，前提是留到下一行时，容器能装得下，否则还是要换行）
white-space，详情可看这里，的属性值：
- normal：不保留书写形式换行，忽略空白符
- nowrap：合并空白符序列，不保留书写形式换行，定义文本不换行，直到遇到 <br> 标签为止
- 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属性指定边框颜色

posted @ 2017-07-07 20:40 Seiei 阅读(566) 评论(0) 编辑收藏举报

刷新页面返回顶部

KeePCoding

脚踏实地，厚积薄发

CSS笔记（字体样式，文本属性和颜色样式）

1 字体样式

1.1 字体系列（font family）

1.1.1 引用外部字体

1.1.2 使用系统字体

1.2 字体大小（font-size）

1.2.1 像素（px）

1.2.2 百分比（%）

1.2.3 单位（em）

1.2.5 单位（rem）

1.2.6 单位（vw）

1.2.7 单位（vh）

1.2.7 关键字

1.3 字体的粗细以及风格

1.3.1 字体得粗细（font-weight）

1.3.2 字体的风格（font-style）

1.4 文本的装饰（text-decoration）

2文本属性

2.1 文本缩进（text-indent）

2.2 文本水平对齐（text-align）

2.3 文本垂直对齐（vertical-align）

2.4 行高（line-height）

2.5 字间距（word-spacing）

2.6 字母间距（letter-spacing）

2.7 `word-break`，`word-wrap`以及`white-space`

3 颜色

公告

KeePCoding

脚踏实地，厚积薄发

CSS笔记（字体样式，文本属性和颜色样式）

1 字体样式

1.1 字体系列（font family）

1.1.1 引用外部字体

1.1.2 使用系统字体

1.2 字体大小（font-size）

1.2.1 像素（px）

1.2.2 百分比（%）

1.2.3 单位（em）

1.2.5 单位（rem）

1.2.6 单位（vw）

1.2.7 单位（vh）

1.2.7 关键字

1.3 字体的粗细以及风格

1.3.1 字体得粗细（font-weight）

1.3.2 字体的风格（font-style）

1.4 文本的装饰（text-decoration）

2文本属性

2.1 文本缩进（text-indent）

2.2 文本水平对齐（text-align）

2.3 文本垂直对齐（vertical-align）

2.4 行高（line-height）

2.5 字间距（word-spacing）

2.6 字母间距（letter-spacing）

2.7 word-break，word-wrap以及white-space

3 颜色

公告

2.7 `word-break`，`word-wrap`以及`white-space`