css基础学习笔记（二）

一、css背景

背景色

p {background-color: gray;}

p {background-color: gray; padding: 20px;}（背景色从元素中的文本向外少有延伸，只需增加一些内边距）

背景图像

body {background-image: url(/i/eg_bg_04.gif);}

p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}

背景重复

body
  {
  background-image: url(/i/eg_bg_03.gif);      （默认为repeat,在x和y上平铺）
  background-repeat: repeat-y;    （no-repeat 则不允许图像在任何方向上平铺）
  }

背景定位

关键字（top、bottom、left、right 和 center，通常成对使用，默认为center）

p
  {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;（等价于top center)
  }

百分数值(图像中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像)

body
  {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

长度值(图像的左上角与 background-position 声明中的指定的点对齐，而不是中心对齐）

body
  {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

背景关联

body
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed（图像相对于可视区是固定的（fixed），不会受到滚动的影响）
  }

二、css文本

p {text-indent: 5em;}（缩进文本）

p {text-indent: -5em; padding-left: 5em;}

使用百分比缩进，百分数要相对于缩进元素父元素的宽度

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

水平对齐

text-align:center （left、right ）

属性justify（两端对齐）

字间隔

word-spacing（可以为正值和负值）

letter-spacing （字母间隔，可以为正值和负值）

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

字符转换

text-transform（值none， uppercase ，lowercase， capitalize）处理文本的大小写

h1 {text-transform: uppercase}

文本装饰

text-decoration （none， underline ，overline ，line-through， blink）

三、css字体

指定字体系列 font-family

当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号。

body {font-family: sans-serif;}

字体风格  font-style

  normal - 文本正常显示

  italic - 文本斜体显示

  oblique - 文本倾斜显示

p.italic {font-style:italic;}

字体加粗  font-weight

关键字 100 ~ 900 为字体指定了 9 级加粗度。700 等价于 bold

p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小  font-size

使用 em 来设置字体大小，1em 就等于 16 像素

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}