day-3 css字体与文本样式

时间：2018.5.24

用时：40分钟

css字体

font-family:定义文本的字体系列。（浏览会根据本地的字体来加载定义的文本字体系列中按顺序来匹配是否有该字体，没有就继续往后匹配直到有匹配的字体出现，没有则是默认字体。）

    例子：p{font-family:Times,'New York',serif}对于其中是否加单（双）引号是因为字体名中存在空格或者字体名包括#、$的时候就要加上单（双）引号

font-style:用于规定斜体文本。可选值有：normal(默认)-文本正常显示、italic-文本斜体显示、oblique文本倾斜显示

对于后两者的区别：

    italic：浏览器会显示一个斜体的字体样式。Italic是使用了文字本身的斜体属性。

    oblique：浏览器会显示一个倾斜的字体样式。让没有斜体属性的文字做倾斜处理。

font-variant:设定小型大写字母。可选值有small-caps

font-weight:设置文本的粗细。可选值有normal(默认)、bold-设置文本为粗体、bolder-比继承的更粗的字体、lighter-比继承的更细的字体、100-900px(100-对于最细的字体、400-对应normal、900-对应最粗的字体)

font-size:设置文本的大小(默认文本大小是16px=1em)。font-size的值可以是绝对值或者相对值。

单位有px（物理像素）、em（相对父元素的的大小。例如父元素的font-size：20px，则1em=20px）、%(相对父元素的大小)

各自动优缺点：

绝对值：1:将文本设置为特定的大小2:不允许用户在浏览器中改变大小(不利于可用性)3绝对大小在确定输出物理尺寸的时很有用

相对值：1:相对于周围元素来设置2:允许用户在浏览器改变文本大小

font属性连写的书写顺序如下(且至少要有font-size和font-family)

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

css文字样式

text-indent:属性对文本段落第一行设置缩进

    可以里把text-indent设置为负值来制造’悬挂缩进‘

text-align:元素中的文本行互相之间的对齐方式

    属性值有：left、right、center、justify、inherit

word-spacing：设置单词之间的间距（负值表示紧凑）

letter-spacing：设置字母之间的间距（负值表示紧凑）

text-transform：处理文本的大小写

    属性值：none、uppercase、lowercase、capitalize（首字母大写）

text-decoration：文本装饰，可以多个属性值一起用在上面

    underline、overline、line-throught、none、blink（兼容性问题）

text-shadow：设置文本阴影(可以多个阴影设置)

    属性值：水平阴影、垂直阴影、模糊距离、阴影的颜色(以上四个属性值都是可选)

line-height：设置文本的行高（推荐位1.5-2）

color：设置文本的的颜色 接受类型有四种： #ccc、red、rgb（0，0，0）、inherit