CSS样式笔记_背景文本字体链接

CSS背景属性：

background：简写属性在一个声明中设置所有的背景属性。可以用于设置最底层的背景图片。

background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动。值如果为fixed，那么图像不会随页面的其余部分滚动。如果是scroll（默认效果）随着页面的滚动它不动，就会慢慢的看不见的。

background-color：设置背景颜色的。一般有三种格式：第二种第三种是一样的，用rgb代表。red，green，blue在00-FF即0-255直接选择。默认值是transparent。

body  {  background-color:yellow;  }h1  {  background-color:#00ff00;  }p  {  background-color:rgb(255,0,255);  }

background-image：设置背景图片，默认值为none。如果用在body元素内是对整个页面加背景图片。其中url指向图像的路径。

body  {   background-image: url(bgimage.gif);  }

background-position：对图像进行定位。默认值是0%，0%===top，left===左上角，也可以直接定义像素点位置。如果用单词定义位置的话，有top，buttom和center三个值，两个参数，如果只写出第一个参数，那么第二个参数就会默认为center。下面的例子的图片将会是在页面的中心位置。

body{   background-image:url('/i/eg_bg_03.gif');  background-attachment:fixed;  background-position:center;}

background-repeat：设置背景图标是否重复，怎么样重复。默认值是repeat在水平和垂直同时重复。另外还有别的值repeat-x，repeat-y，no-repeat。分别表示只在水平重复，只在垂直重复，不重复。

背景属性可以放在任意的元素内，比如<p>，<div>不限于整个页面背景。

CSS文本属性：

color：跟background-color一模一样，有三种方法，只是这是设置文本字体颜色。

direction：文字的输出方向，默认值是ltr，从左至右，左对齐。还有rtl，表示从右至左，而且是右对齐。

line-height ：属性设置行间的距离（行高）。默认值是normal。也可以用百分比表示该属性的值，大多数浏览器中默认行高大约是 110% 到 120%（是因为基于字体的大小嘛？）。低于百分之一百的话，段落里的文字会有些重叠。等于百分之百上行贴着下行也不好看。也可用像素值，在大多数浏览器中默认行高大约是 20px（基于一般字体的大小）。也可以直接用长度值了，1是默认行高。低于1就会有重叠。

letter-spacing： 属性增加或减少字符间的空白（字符间距）。默认值是normal，规定字符之间没有额外的的空白。该值可以为负值，字符之间就会产生重叠。值可以是em（字体高度，不是固定的，可以继承）或者px（像素值）。

text-align ：属性规定元素中的文本的水平对齐方式。如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right

h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}

还有个属性值是justify实现两端对齐文本效果，两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。因为主要是调整字符间隔来实现该效果，如果letter-spacing被明确定义了，这个就会出现问题，会影响元素的外观，甚至改变其高度。

text-decoration： 属性规定添加到文本的修饰。默认值为none，标准的文本属性，也可加上划线，下划线，中间的删除线，闪烁字体（我用几个浏览器都没有看到效果）。几个属性值分别是

h1 {text-decoration: overline}h2 {text-decoration: line-through}h3 {text-decoration: underline}h4 {text-decoration:blink}a {text-decoration: none}

text-indent ：属性规定文本块中首行文本的缩进。默认值是not specified。值可以是像素也可以是数值。如果是百分比，是定义基于父元素宽度的百分比的缩进。

p {text-indent:20px}p {text-indent:2cm}

text-shadow：设置文本阴影，css2.1之后没有保留该属性。

text-transform ：属性控制文本的大小写。默认是none，标准文本。属性值的名字便是效果：变大写，变小写，每个单词首字母大写（此处别的不会改变，如果不是首字母也大写，是不会让其变成小写的。

  p.uppercase {text-transform: uppercase}  p.lowercase {text-transform: lowercase}  p.capitalize {text-transform: capitalize}

white-space ：属性设置如何处理元素内的空白。默认是normal，即是忽略空白。别的属性值还有pre，nowrap，pre-wrap，pre-line效果分别是保留空白，不折行（换行符除外），正常换行保留空白，合并空白符保留空白。
word-spacing ：属性增加或减少单词间的空白（即字间隔）。默认是normal，单词间的标准空间。属性值与letter-spacing一样的。允许为负值。

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

CSS字体属性：

font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。默认值为not specified（跟浏览器默认字体有关咯）。多个单词别忘了加引号。

p.serif{font-family:"Times New Roman",Georgia,Serif}p.sansserif{font-family:Arial,Verdana,Sans-serif}

font-size 属性可设置字体的尺寸。它设置的是字体中字符框的高度。默认值medium。可能的值：xx-small，small，large，xx-large，smaller，larger，length，%。

font-style 属性定义字体的风格。下面是正常，斜体，倾斜（后两个我是看不出啥差别）

p.normal {font-style:normal}p.italic {font-style:italic}p.oblique {font-style:oblique}

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

p.normal {font-variant: normal}p.small {font-variant: small-caps}

font-weight 属性设置文本的粗细。属性值normal，bold，bolder，lighter。也可是length自由设置粗细，为100-900，其中400 等同于 normal，而 700 等同于 bold。

CSS链接属性：

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接有四种状态

a:link {color:#FF0000;}    /* 未被访问的链接 */a:visited {color:#00FF00;} /* 已被访问的链接 */a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */a:active {color:#0000FF;}  /* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后。a:active 必须位于 a:hover 之后。

text-decoration 属性大多用于去掉链接中的下划线：

a:link {text-decoration:none;}    /* 未被访问的链接 */a:visited {text-decoration:none;} /* 已被访问的链接 */a:hover {text-decoration:underline;}   /* 鼠标指针移动到链接上 */a:active {text-decoration:underline;}  /* 正在被点击的链接 */

这样的话，只有鼠标悬浮在连接上还有点击的时候才能显示下划线，这样比较美观。同样可以的话还可以用background-color来设置背景颜色。