【慕课网】Web学习笔记———CSS3 （二）

【慕课网】Web学习笔记———CSS3 （一）

CSS3字体样式

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

样式属性

字体:为网页中的文字设置字体为宋体:body{font-family:"宋体";}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}
注：
第一种方法比第二种方法兼容性更好一些。因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

字体大小使用font-size设置字体大小为10像素：body{font-size:10px;}

字体粗细：使用font-weight设置字体粗细为粗体：p span{font-weight:bold;}

字体样式：font-style可以实现正常字体（normal），斜体（italic），以及倾斜的字体（oblique）
其中：

• 正常字体为normal,也是font-style的默认值。
• italic为设置字体为斜体，用于字体本身就有倾斜的样式。
• oblique为设置倾斜的字体，强制将字体倾斜。

在网页上的样式为：

字体颜色：color属性可以设置字体颜色。color的值有3种设置方式：

• 英文命令颜色 p{color:red;}
• RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue)三种颜色的比例来配色。p{color:rgb(133,45,200);}每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：p{color:rgb(20%,33%,25%);}
• 十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制
  00-ff。p{color:#00ffff;}
  HTML 拾色器(菜鸟教程)

font样式的简写方式

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：body{ font:italic bold 12px/1.5em "宋体",sans-serif; }
注：

• 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如
  font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
• 在缩写时 font-size 与 line-height
  中间要加入“/”斜扛。一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用:body{font:12px/1.5em "宋体",sans-serif;}只是有字号、行间距、中文字体、英文字体设置。

CSS3文本样式

样式属性

文本修饰:text-decoration可以设置添加到文本的修饰。

• text-decoration默认值为none, 定义标准的文本。
• text-decoration的值为underline为定义文本下的一条线。
• text-decoration的值为overline为定义文本上的一条线。
• text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

效果呈现为：

首行缩进：使用text-indent为文本添加首行缩进。例：p{text-indent:2em}
2em表示为文字的两倍大小

行间距：使用line-height设置行间距属性。例：p{line-height:1.5em}

减少字符间的空白：
设置文字间隔或者字母间隔就可以使用letter-spacing 来实现，如下面代码：h1{letter-spacing:50px;}
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置，可以使用 word-spacing 来实现。如下代码：h1{word-spacing:50px;}

对齐方式：为块状元素中的文本、图片设置居中样式时可以使用text-align样式代码。例：h1{ text-align:center; }
同样可以设置居左或者居右：h1{ text-align:left; } h1{ text-align:right; }

长度值

目前比较常用到的长度单位为：px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

像素
像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
例：p{font-size:14px} span{font-size:0.8em;}
<p>以这个<span>例子</span>为例。</p>
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

【慕课网】Web学习笔记———CSS3 （三）