第十章 为文本添加样式

1、选择字体系列font-family

body {
    font-family: Geneva;
}
  • 对于包含多个单词的字体名称,应该用引号(单引号或双引号)包围起来。
  • 可以使用小写字母指定字体名称。
  • select、textarea、input元素除外,font-family可继承。可强制继承父元素的字体设置
input,select,textarea  {
    font-family: inherit;
}

2、指定替代字体

body {
    font-family: Geneva,Tahoma,sans-serif;
}
  • 字体栈:字体列表,通常至少包含三个字体:希望使用的字体,一个或几个替代的字体,以及一个表示类属性的字体serif、sans-serif、cursive、fantasy、monospace(系统通常具有的字体)。

3、创建斜体font-style

body {
    font-style: italic;
}
  • 取消斜体font-style: normal
  • 继承

4、应用粗体格式font-weight

  • font-weight: bold;
  • bold、‘bolder’、lighternormal
  • 继承

5、设置字体大小font-size

  • 1、指定特定字体大小,使用像素、关键字(xx-small、x-small、small、medium、large、x-large、xx-large)
h1 {
    font-size: 35px;
}
  • 2、根据父元素设置字体大小,使用百分数、em、相对关键字(larger、smaller)
  • 3、根据根元设置字体大小,rem
  • 4、
(1)、可继承
(2)、设置了相对字体大小的元素的子元素会继承这个大小,而不是继承相对值

6、设置行高line-height

  • 1、使用数字(与元素的字体大小相乘,得出需要的行高),没有单位
  • 2、使用以像素、em、磅(仅在打印样式)为单位的值
  • 3、字体大小的百分数
  • 4、
(1)、使用数字设定行高,所有的子元素都会继承这个因子
(2)、使用百分数、em只会继承产生的行高

7、同时设置所有的字体值font(至少包含字体大小、字体系列属性)

font: 字型(normal、italic、oblique可选) 粗细(normal、bold、bolder、lighter、100的倍数,可选) 字体大小(必选) /行高 字体系类(必选);
(1)、先字体大小,后字体系列
(2)、若有行高,必须紧跟在字体大小和斜杠后面
(3)、可继承

8、设置颜色color

  • colorname、颜色的十六进制(#rrggbb,当十六进制由三对重复数字组成的时候,可使用#rgb)、rgb(r,g,b)、rgb(r%,g%,b%)、hsl(h,s,l)、rgba(r,g,b,a)、hsla(h,s,l,a)
  • 除了link元素,其他元素都会继承body元素中的color属性、

9、设置背景

(1)、修改文本的背景颜色backgroung-color

  • transparent(允许透过父本元素的背景颜色)、color

(2)、使用背景图像作为背景background-image

  • 图像相对样式表所在位置的路径和文件名、none(不使用图像)

(3)、重复背景图像background-repeat

  • repeat(同时横向和纵向重复图像)、repeat-x(横向)、repeat-y(纵向)

(4)、控制背景图像是否随页面滚动background-attachment

  • fixed(图像附着在浏览器窗口上)、scroll(访问者滚动页面时背景图像会移动)、local(只有滚动背景图像所在的元素,而不是整个页面,背景图像才移动)

(5)、制定元素背景图像的位置background-position

  • x、y:距离左上角的绝对距离、百分数,left(左对齐)、center(居中)、right(右对齐)、top(顶端对齐)、bottom(底端对齐)

(6)、在一条声明中设置所有的背景属性background

  • 排列顺序无要求

10、控制间距

(1)、指定字间距word-spacing

  • 带单位的数字 eg·0.4em、5px·,继承

(2)、指定字偶间距letter-spacing

  • 带单位的数字 eg·0.4em、5px·,继承

11、添加缩进text-indent

  • 带单位的数字 eg·0.4em、5px·,继承
  • 默认情况下对em、strong、cite等内联元素没有影响,将他们设置为diaplay: block、display: inline-block,可强制为其应用text-indent属性

12、对齐文本text-align

  • left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)
  • 只对盒模型元素(h1、p等,显示为单独的行)起作用,对短语内容元素(显示在行内)不起作用,可将其设置为display:block/inline-block

13、修改文本的大小写text-transform

  • capitalize(每隔单词的首字母大写)、uppercase(所有字母大写)、lowercase(所有字母小写)、none(文本保持本来的样子)

14、使用小型大写字母font-variant

  • small-caps、none,继承

15、装饰文本text-decoration

  • unline(下划线)、overline(上划线)、line-through(删除线)、none
  • 除a元素,都有text-decoration属性

16、设置空白属性white-space

  • pre(让浏览器显示原文本中所有的空格和回车)、nowrap(确保所有空格不断行,即文本全部显示在一行),normal(按正常方式处理空格)
posted @ 2017-07-22 18:26  zwfang  阅读(180)  评论(0编辑  收藏  举报