HTML、CSS知识点,面试开发都会需要--No.5 文章段落

No.5 文章段落


1.文字属性

    文字属性包含font-*和text-*两类。

 

2.基于font的属性

    (1)font-family:字体属性,多个字体之前用逗号隔开。如果第一个字体没找到,则依次找后面的字体。例如:

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

    (2)font-size:字体大小,单位包括pixels, em units, percentages, points。

    (3)font-style:字体样式,包括normal, italic, oblique, and inherit。经常用到normal和italic(斜体)。

    (4)font-variant: 大小写转换,包括:normal, small-caps, and inherit。一般都不会使用该属性。

    (5)font-weight: 设置字体权重,可以是关键字和数字,关键字包括normal, bold, bolder, lighter, and inherit。

           有效枚举数字:100, 200, 300, 400, 500, 600, 700, 800, and 900 。normal 对应400,bold对应700。

    (6)line-height: 设置两行间距,值可以为百分比%、相对倍数em、以及像素数字px。

           例如可设置line-height:150%,line-height: 1.5em,line-height: 24px。一般都使用em相对于font-size设置。

    (7)如何让文本内容垂直居中显示:可把line-height和height设置成同一值。例如:

.btn {
    height: 22px;
    line-height: 22px;
}

    (8)font属性缩写方式:font:font-style, font-variant, font-weight, font-size, line-height, and font-family。font-size和line-height通过”/”分割,font-family通过“,”分割,其他属性通过空格分割。例如:

html {
    font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

 

3.基于text的属性

    (1)text属性包括:decorate、indent、transform、space、align、shadow、transform等。

    (2)text-align: 包含的值有left, right, center, justify、inherit。

    (3)text-align和float区别:text-align设置元素中text的对齐方式,而float将设置整个元素的对齐方式。下面的div还是占一行空间,但文本内容居右显示。

div{
    background: red;
    text-align:right;
}

    下面的div不会占用一行,div按自身内容设置大小,整个div居右显示。

div{
    background: red;
    float:right;
}

    (4)text-decoraton: 设置文字装饰,值包括none、underline、overline(上划线)、line-through(中划线)、inherit。

    (5)text-shadow: 设置文本投影,包含4个值,text-shadow: 水平位移 垂直位移 文本模糊半径 投影颜色。例如:

p {
    text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

    (6)box-shadow和text-shadow区别:box-shadow用于设置整个盒子的投影,包含5个值:inset/outset 水平距离 垂直距离 模半径 颜色。例如:

div{
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}

    (7)text-transform: 文字大小写转换,包含的值有none、capitalize、uppercase、lowercase、inherit。capitalize将每个单词首字母大写,uppercase将所有单词转换为大写,lowercase将所有单词转换为小写。例如:

p {
    text-transform: uppercase;
}

    (8)letter-spacing:设置每个字母之间的间距,下面设置p元素下的每个字母之前间距为基于font-size的-0.5倍。

p {
    letter-spacing: -.5em;
}

    (9)word-spacing: 设置每个单词之间的间距,和letter-spacing相似。

    (10)text-indent:设置第一行左面间距。例如下面设置第一行的左面文字到左边距的举例为15px。

.intro{
    text-indent: 15px;
}

4.自定义web字体

    (1)定义语法:下面代码定义了自定义字体,font-face设置字体参数,font-family为字体名称,src设置字体的网络路径。

@font-face {
    font-family: "Lobster";
    src: local("Lobster"), url("lobster.woff") format("woff");
}

    (2)使用:和其他字体使用一样。例如下面代码吧自定义的字体”Lobster”设置为首选字体。

body {
    font-family: "Lobster", "Comic Sans", cursive;
}

    (3)字体资源:google上面有很多新的字体可供下载,地址为:https://www.google.com/fonts

posted @ 2016-05-20 16:17  席超  阅读(193)  评论(0编辑  收藏  举报