前端学习笔记7 CSS为文本添加样式

2017-02-10 14:31
315


为文本添加样式

  使用CSS可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式,可以决定是否为文本添加下划线或删除线可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。


选择字体系列

  设置字体的方法:在样式表中需要的选择器之后,输入font-family: name;,这里的name是首选字体的名称。


/* 由于font-family是继承属性,而我们对body元素设置了Geneva字体,该样式会应用到其他元素。通过对h1和h2元素设置Gill Sans字体,覆盖了继承属性。代码中的字体名称可以用小写,如`font-family: geneva` */
body {
    font-family: Geneva;
}
h1,h2 {
    font-family: "Gill Sans";
}

  虽然font-family: name;的属性是继承的,但是有几个元素不会继承父元素的字体设置,其中有表单的selecttextareainput元素。不过可以强制它们继承父元素的字体设置,代码为input, select, textarea { font-family: inherit; }


指定替代字体

  尽管可以指定自己想要的任何字体,但这些字体不一定在每个系统上都能显示出来。所以在font-family属性中列举一种以上的字体。浏览器会使用列表中第一个已安装的访问者系统内的字体或Web字体。

body {
    font-family: Geneva, Tahoma, sans-serif;
}
h1,
h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}


  字体列表称为字体栈(font stack),通常字体栈至少包含三个字体。

OS X 和 Windows 上默认共有的字体
Arial
Comic Sans MS
Courier New
Georgia
Impact
Terbuchet MS
Times New Roman
Verdana


  使用font-family: sans-serif,这种方法会让所有的操作系统使用无衬线字体,即Windows的浏览器显示Arial,而 OS X 的浏览器则显示Helvetica。
  系统通常都具有下列表示类属的字体名称对应的字体:serifsans-serifcursivefantasymonospace。因此标准的做法是在字体栈的末尾指定上述字体名称中的一种。到目前为止,serifsans-serif是用得最多的,因此它们分别对应于最为常见的两类字体。serif通常对应Windows上的Times New Roman和 OS X 上的Timessans-serif通常对应Windows上的Arial和 OS X 上的Helvetica


创建斜体

  浏览器通常让一些HTML元素(如cite、em和i)默认以斜体显示,因此不必在CSS中对这些元素设置斜体。有时候我们需要让一些内容以斜体显示,但是上述元素在语义上来讲都不合适,这时用CSS的font-style属性可以让任何元素中的文本以斜体显示。

body {
    font-family: Geneva, Tahoma, Verdana, sans-serif;
}
h1,
h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
p {
    font-style: italic;
}

  取消斜体可以输入font-style: normal;font-style属性是继承的。想取消斜体的一个可能原因是,要从在父元素中继承了斜体格式的段落中对某些文字进行强调。


应用粗体格式

  可以为任何格式添加或取消粗体。添加和取消粗体使用font-weight属性。输入bold让文本显示为具有平均加粗值的粗体。这一属性值适用于大多数情况。或者输入100~900之间100的倍数,其中400代表正常粗细,700代表粗体。如果使用的是具有多种粗细版本的字体,这种方法就很有用(有些Web字体就采用了这种方法)。或者输入bolder(更粗)或lighter(更细)以设置相对当前粗细的值。

body {
    font-family: Geneva, Tahoma, Verdana, sans-serif;
}
h1,
h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: normal;
}
em,
a:link,
.intro .subhead {
    font-weight: bold;
}


设置字体大小

  设置字体大小有两种方法:直接使用像素指定要使用的特定字号,或使用百分数、em或者rem制定相对于父元素文本的大小。

  • 按像素值指定文本大小(但是不太建议使用这种方法)
    body {
      font-family: Geneva, Tahoma, Verdana, sans-serif;
    }
    h1,
    h2 {
      font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
      font-weight: normal;
    }
    em,
    a:link,
    .intro .subhead {
      font-weight: bold;
    }
    h1 {
      font-size: 35px;
    }
    h2 {
      font-size: 28px;
    }
    .intro .subhead {
      font-size: 18px;
    }
    .intro p {
      font-size: 17px;
    }
    .project p {
      font-size: 15px;
    }


  • 建议使用em这样的相对单位。使用相对单位可以有更大的灵活性,而且对定义页面中特定的设计部件(如空白、边距等)的尺寸很有帮助。
    /* body里`font-size: 100%;`声明为字体大小设置了参考的基准。这里的100%将被翻译为默认字体的大小。 */
    body {
      font-family: Geneva, Tahoma, Verdana, sans-serif;
      font-size: 100%; /* 16px */
    }
    h1,
    h2 {
      font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
      font-weight: normal;
    }
    h1 {
      font-size: 2.1875em; /* 35px/16px */
    }
    h2 {
      font-size: 1.75em; /* 28px/16px */
    }
    em,
    a:link,
    .intro .subhead {
      font-weight: bold;
    }
    .intro .subhead {
      font-size: 1.125em; /* 18px/16px */
    }
    .intro p {
      font-size: 1.0625em; /* 17px/16px */
    }
    .project p {
      font-size: .9375em; /* 15px/16px */
    }


更好的rem设置字体大小(这种方式IE不太兼容):
  CSS3引入了这个特性,它同em很像,不过它总是以根元素为参照系设置其他元素的字体大小,而不是父元素。根元素是html元素。这样做简化了字体大小的设置,因为html的字体大小通常不变。

html {
    /* typically font-size: 100% will map to 16px unless your visitor 
        has increased or decreased the font size in his or her browser */
     font-size: 100%;
}
body {
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    font-size: 100%; /* 16px */
}
h1,
h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: normal;
}
h1 {
    font-size: 35px; /* optional fallback for IE8 and other old browsers */
    font-size: 2.1875rem; /* 35px/16px */
}
h2 {
    font-size: 28px; /* optional fallback for IE8 and other old browsers */
    font-size: 1.75rem; /* 28px/16px */
}
em,
a:link,
.intro .subhead {
    font-weight: bold;
}
.intro .subhead {
    font-size: 18px; /* optional fallback for IE8 and other old browsers */
    font-size: 1.125rem; /* 18px/16px */
}
.intro p {
    font-size: 17px; /* optional fallback for IE8 and other old browsers */
    font-size: 1.0625rem; /* 17px/16px */
}
.intro a {
    font-size: 16px; /* optional fallback for IE8 and other old browsers */
    font-size: 1rem; /* was .941176em */
}
.project p {
    font-size: 15px; /* optional fallback for IE8 and other old browsers */
    font-size: .9375rem; /* 15px/16px */
}


设置行高

/* ...省略前面的CSS... */
.intro {
    line-height: 1.45;
}
.intro .subhead {
    font-size: 1.125em; /* 18px/16px */
}
.intro p {
    font-size: 1.0625em; /* 17px/16px */
}
.project p {
    font-size: .9375em; /* 15px/16px */
    line-height: 1.65; /* 15px x 1.65 = 24.75px */
}


  如果使用百分数或em值,那么只会继承产生的行高(即计算出来的值)。
  如果使用数字设置行高(通常都这么做),那么所有的子元素都会继承这个因子。因此,如果父元素的字体大小是16像素(或以em等表示的等价大小),行高是1.5,则该元素行高为16px1.5.如果子元素的字体大小是10px,则该元素的行高就是10px1.5。


同时设置所有字体值

  可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列。这种方法更加简洁高效。使用font简写属性不要求指定所有字体属性,但至少应该包含字体大小和字体系列属性。

body {
    font: 100% Geneva, Tahoma, Verdana, sans-serif;
}
h1,
h2 {
    /* Can't combine these into 
    font shorthand unless you include 
    font size with them in the shorthand. */
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: normal;
}
h1 {
    /* Can't combine these into
    font shorthand unless you include 
    font family with them in the shorthand. */
    font-size: 2.1875em; /* 35px/16px */
    line-height: 1.19318; /* I left this out of book just to keep example simple */
}
h2 {
    font-size: 1.75em; /* 28px/16px */
}
em,
a:link,
.intro .subhead {
    font-weight: bold;
}
.intro {
    line-height: 1.45;
}
.intro .subhead {
    font-size: 1.125em; /* 18px/16px */
}
.intro p {
    font-size: 1.0625em; /* 17px/16px */
}
.project p {
    /* Can't combine these into
    font shorthand unless you include 
    font family with them in the shorthand. */
    font-size: .9375em; /* 15px/16px */
    line-height: 1.65;
}


  这个例子结合了font-sizeline-heightfont-family声明的font简记法的例子,行高跟在字体大小和一个斜杠后面。font简写属性中还可以包含font-styleline-variantfont-weight

.example-2 {
    font: .875em/1.3 "Palatino Linotype", Palation, serif;
}


  下面这个例子包含了所有的属性。只要font中声明了字体大小和字体系列属性,其他属性可以任意组合。前三个属性的次序无关紧要。

.example-3 {
    font: italic small-caps bold .875em/1.3 "Palatino Linotype", Palatino, serif;
}


同时设置所有字体值的步骤

  • 输入font:(注:该属性是继承的)。
  • 可选步骤,输入normal、italic或oblique以设置字型。
  • 可选步骤,输入normal、bold。bolder、lighter或100的倍数(最大到900)以设置粗细。
  • 可选步骤,输入normal、small-caps来取消或者设置小型大写字母。
  • 输入需要的字体大小。
  • 如果需要,输入/line-height,这里的line-height是行与行之间的距离。
  • 输入一个空格,再按优先次序输入需要的字体系列,以逗号分隔。

注:必须始终显示的声明字体大小和字体系列属性:显示字体大小,再是字体系列。


设置颜色

  修改网页中文本的颜色,我们的样式表可以包含颜色名称、十六进制值、RGB、HSL、RGBA和HSLA值的任意组合来定义颜色(其他细节参见本博客的 CSS Lesson2)。

body {
    color: blue;
    font: 100% Geneva, Tahoma, Verdana, sans-serif;
}
...
h2 {
    color: #7d717c;
    font-size: 1.75em; /* 28px/16px */
}
...
/* :::: Links :::: */
a:link {
    color: #e10000; /* a red */
}
a:visited {
    color: #b44f4f;
}
a:hover {
    color: #f00;
}
.intro a {
    color: #fdb09d; /* a litle pinkish */
}
.intro a:hover {
    color: #fec4b6;
}


设置背景

  设置背景有很多属性可以利用,包括background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position等。还可以使用background简记法,该属性将上述属性合并了,可以节省大量的输入。

body {
    background-color: #88b2d2;
    font: 100% Geneva, Tahoma, Verdana, sans-serif;
}
...
h2 {
    background-color: #eaebef;
    color: #7d717c;
    font-size: 1.75em; /* 28px/16px */
}
...
.intro a {
    color: #fdb09d;
}
.intro a:hover {
    color: #fec4b6;
}


  使用背景图像作为背景(注:url后括号中的内容为图像相对于样式表所在位置的路径和文件名)。

body {
    background-color: #ccc;
    background-image: url(bg-pattern.png);
    ...
}


  重复背景图像可以输入background-repeat: direction。这里的direction可以取四个值:repeatrepeat-xrepeat-yno-repeat

body {
    background-image: url(sky.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    ...
}


控制背景图像是否随页面滚动:

  • 输入background-attachment:
  • 输入fixed背景图像会附着在浏览器窗口上(也就是说即使访问者滚动页面,图像仍会继续显示);或scroll访问者滚动页面时背景图像会移动;或local,只有访问者滚动背景图像所在的元素(而不是整个页面)时,图像背景才移。注:浏览器通常默认值scroll
body {
    background: #004 url(../img/ufo.png) no-repeat 170px 20px;
    /*  The shorthand above is the same as writing these individually:
        background-color: #004;
        background-image: url(../img/ufo.png);
        background-repeat: no-repeat;
        background-position: 170px 20px;
    */
    color: greenyellow;
    font: 1.1em sans-serif;
    padding: .25em 0 1em 1em;
}


  指定元素背景图像的位置:输入background-position_x_y,其中x和y可以表示为距离左上角的绝对距离或百分数。也可以用left左对齐、center居中right右对齐表示x,用top顶端对齐、center居中或bottom底端对齐表示y。如果两个值都使用关键字表示,那么两者的顺序无关紧要。


属性 默认值
background-color transparent(透明)
background-image none
background-repeat repeat
background-attachment scroll(滚动)
background-position 0 0(等价于 top left,即左上角)


控制间距

  可以增加或减少单词之间或字母之间的距离,前者称为字间距(tracking),后者称为字偶距(kerning);
  指定字间距(是继承的):输入word-spacing: length,这里的length是一个带单位的数字,如0.4em等;
  指定字偶距(是继承的):输入letter-spacing: length,这里的length是一个带单位的数字,如0.4em等。


添加缩进

通过设置text-indent属性(是继承的)可以指定段落第一行前面应该空出多大的空间:

.project p {
    font-size: 0.9375em;  /* 15px/16px */
    line-height: 1.65;
    text-indent: 2em; /* 30px */
}


对齐文本

根据需要可以让文本左对齐、右对齐、居中对齐或两端对齐(属性是继承的):

  • 输入text-align:
  • 输入left让文本左对齐;输入right让文本右对齐;输入center让文本居中在屏幕的中间;或输入justify让文本两端对齐。


修改文本的大小写

使用text-transform属性(是继承的)可以为样式定义文本的大小写:

  • 输入text-transform:
  • 在冒号后输入capitalize让每个单词的首字母大写;
  • 或者输入uppercase让所有字母大写;
  • 或者输入lowercase让所有字母小写;
  • 或者输入none让文本保持本来的样子(可以用来取消继承的值)。


使用小型大写字母

使用font-variant(属性是继承的)调用小型大写字母变体:

  • 使用小型大写字母的方法:输入font-variant: small-caps
  • 取消小型大写字母的方法:输入font-variant: none


装饰文本

使用text-decoration:属性装饰文本,如添加下划线或者其他类型的线条:

  • 输入text-decoration:
  • 在冒号后输入underline以添加下划线。
  • 或者输入overline以添加上划线。
  • 或者输入line-through以添加删除线。
  • 或者输入none以取消文本装饰。


设置空白属性

如果要让浏览器显示额外的空格,可以使用white-space属性:

  • 输入white-space:
  • 输入pre,以让浏览器显示原文本中所有的空格和回车;
  • 或者输入nowrap,以确保所有空格不断行,也就是文本全部显示在一行;
  • 或者输入normal,按正常方式处理空格。



HTML and CSS 读书笔记



我的空间

| Linkedin | Levi.Blog | oschina | CSDN | 掘金 | JEESNS | 知乎主页 | 知乎专栏 | 微博 | 豆瓣 |
| GitHub | GitBook | Segmentfault | 微信公众号:心源呓码 (账号: xyyima) |


帖子评论

关注 / 粉丝

我无话可说