CSS其它样式

前面的文章主要介绍的是css框模型和定位方案，可以帮助我们设计出想要的页面布局。除此之外，css还可以对页面内容的样式进行控制，这些不像定位方案等需要理解，所以在这里只记录下各个样式的重点信息。

1.  颜色和背景

color：应用与所有元素，设置文本的颜色。可继承。

background相关属性：应用与所有元素（包括行内元素），设置的是元素border框内的背景，默认是透明的transparent，不可继承。

• background-color：设置背景颜色
• background-image：设置背景图片，以url（）指定图片。
• background-repeat：图片默认从原始边框的左上角放置，如果图片小于元素的大小，指定图片是否重复以填充满整个区域（no-repeat），填充的话该如何平铺（repeat-x、repeat-y）。默认的值是repeat，即x轴、y轴两个方向都进行平铺。。
• background-position：设置背景图片的位置，适用于块元素和替换元素，默认值是0% 0% 。它可以设置成以下几种类型的值。

1. 关键字：top、bottom、left、right 和 center，指定背景图片水平和垂直方向的位置。如果只指定了一个值，那么另一个方向的值设置为center。
2. 百分比：如果只设置一个值，那么该值应用与水平方向，垂直方向的值为50%。值a% b%表示的是，背景图片距左a%、距顶b%的点与元素距左a%、距顶b%的点对齐。两种值的对应关系是，top left=0% 0%, right bottom=100% 100%。
3. 长度值：如果只设置了一个值，那么该值应用与水平方向，垂直方向的值为50%。值a、b表示的是，背景图片的左上角距元素左上角的水平距离为a，垂直距离为b。
   

<div style='margin:0; width:200px; height:200px; border:solid 1px; background-image: url(/i/eg_bg_03.gif); background-repeat: no-repeat; background-position:10% 10%;'></div>

• background-attachment ：设置背景图片是否随着文档的滚动而滚动，默认是scroll（滚动）。如果设为fixed的话，则背景图片对于可视区是固定的。

具体例子可以参照w3school中css背景一节  http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment

以上属性可以缩写为background，值以空格分开。

例如上文中的例子可以简写为

background: url(/i/eg_bg_03.gif) no-repeat 10% 10%

2.  字体

font相关属性：定义了字体的样式，都是可以继承的。

• font-family：定义文本的字体系列，可以有一个或多个的值，以逗号分隔，用户代理将从前往后寻找第一个它可以实现的字体并应用之。在 CSS 中，有两种不同类型的字体系列名称：通用字体系列 -- 拥有相似外观的字体系统组合（"Serif"、“Sans-serif” 、"Monospace"、“Cursive ”、“Fantasy ”五种）;特定字体系列 - -具体的字体系列（比如 "Times" 或 "Courier"）。如果用户代理并没有安装指定的字体，就会按照该代理默认的字体呈现。所以为了防止出现上述情况，可以结合特定字体名和通用字体系列，这样至少用户代理可以从通用字体里选择一个。如果字体名中含有空格，那么需要使用引号。

<p style='font-family: Times, Fantasy;'>This is a paragraph.</p>
<p style='font-family: Tim, Fantasy;'>This is a paragraph.</p>
<p>This is a paragraph.</p>

• font-style:规定字体家族中常规，斜体和侧体的样式。w3school中说，

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

例子参见 http://www.w3school.com.cn/tiy/t.asp?f=csse_font-style

• font-weight：设置文本的粗细，分为I00-900几个等级，依次渐粗。normal等价于400， bold等价于700。bolder设置为比继承来的粗细更粗一级的字体直至900封顶，lighter设置为比继承来的粗细更细一级的字体直至100。但是对于许多浏览器，并没有按照9个等级划分粗细，那么能实现的就是weight值大的字不会比weight值小的更细。子元素将继承父元素的计算值。

<p>This is a paragraph.</p>
<p style='font-weight:100'>This is a paragraph.
<p style='font-weight:900'>This is a paragraph.</p>
<p style='font-weight:border'>This is a paragraph.</p>
</p>

在firefox和chrome中，看来只有两个等级的粗细。

• font-size 属性设置文本的大小。值可以为长度值或是百分比。长度值是绝对的像素大小px，定义了字体的高度，但问题是在不同显示环境下字体无法自动调整。百分百值分为em和%。em针对的是当前的字体尺寸、%针对的是父元素字体的大小.由于font-size的计算值是继承的，所以两者效果一样。百分比的好处是可以在不同环境下自动调整字体大小。

<h1>This is heading 1</h1>
<div style='font-size:50%;'>
<h1 style='font-size:2em;'>This is heading 1</h1>
<h1 style='font-size:200%;'>This is heading 1</h1>
</div>

以上属性可以缩写为font，即把以上各属性的值以空格分开，写在一起。值得注意的是font-size和line-height的值类型一样，所以采用<'font-size'> [ / <'line-height'> ]?的模式书写，即要么只有font-size的值，要么两者以斜杠分开。其他没有指定值的属性默认为初始值，如果一个值匹配多条属性的值域，那么这些属性都设为该值。

例如 p { font: normal small-caps 120%/120% fantasy }。该规则设置了'font-variant'（'small-caps'），'font-size'（父元素字体尺寸的120%），'line-height（字体尺寸的120%）以及'font-family'（'fantasy'）。关键字'normal'将适用于另外两个属性：'font-style'和'font-weight'。

3. 文本

• direction 属性：影响块级元素中文本的书写方向、元素布局等。它有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

<h2>left to right</h2>
<h2 style='direction:rtl'>right to left</h2>

• text-intent : 应用与块级元素，指定块中文本第一行缩进多少，准确来说就是该块内第一个行框里第一个盒子（文本、inline-block等）缩进多少，也可以为负值。可以设置的值是长度或是百分比。长度很好理解，对于百分比em，同font-size中em的大小定义一样。对于百分百%来说，计算基于的是是包含块的宽度。该值的计算值是可以继承的。

<div style='width: 500px;'>
<div style='text-indent: 0.1em;'>some text. some text. some text.</div>
<div style='text-indent: 10%;'><img src="/i/eg_cute.gif" />some text. some text. some text.
<p style='width: 200px;'>this is a paragragh.</p>
</div>
</div>

可以看出与font-size的计算不同，0.1em的计算值不等于10%的计算值，行内图片一同缩进了50px，同时50px的计算值被子元素p继承了下来。

• text-align：应用与块级元素，规定块内文本水平对齐方式。默认的值与direction的值相关，如果设置direction是rtl即文本从右往左排列，那么默认为left，否则为right。该值也是可以继承的。

<h2 style='text-align: center'>align center</h2>
<h2 style='text-align: left'>align left</h2>
<h2 style='text-align: right'>align right</h2>
<h2 style='text-align: justify'>align justify</h2>

对于justify的值，w3school中说：

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。可以看到在firefox中没有出现拉伸的现象。

• word-spacing：可以改变字（单词）之间的标准间隔。例子参见http://www.w3school.com.cn/tiy/t.asp?f=csse_letter-spacing
  
• letter-spacing：可以修改字符或字母之间的间隔。例子参见http://www.w3school.com.cn/tiy/t.asp?f=csse_text_word-spacing
  
• text-transform：处理文本的大小写，有 4 个值：none、uppercase（大写）、lowercase（小写）、capitalize（首字母大写）

以上三种属性都是可以继承的。

• text-decoration：可以对文字添加修饰，有5个值none、underline（下划线）、overline（上划线）、line-through（贯穿线）、blink（文字闪烁）。最后一个值暂没有找到浏览器可以实现所说的效果，所以还是不要用了。。。
• white-space：指定了如何处理元素内的空白和回车符，它应用与块级元素，是可以被继承的

值	空白符	换行符	自动换行
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许
pre-line	合并	保留	允许

下面一个例子可以看出这5种值的差别

<p style='white-space: normal;'>This     paragraph has    a  great    many  s p a c e s   with its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<p style='white-space: pre;'>This     paragraph has    a  great    many  s p a c e s   with its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<p style='white-space: nowrap;'>This     paragraph has    a  great    many  s p a c e s   with its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<p style='white-space: pre-wrap;'>This     paragraph has    a  great    many  s p a c e s   with its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<p style='white-space: pre-line;'>This     paragraph has    a  great    many  s p a c e s   with its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>
</body>

4. 列表

这里主要列出两个属性来修改列表标记

• list-style-type：标记样式，默认是圆点，可以设置为none，即没有标记，也可以设置成方块、数字等，具体可以查看css手册
• list-style-image：使用图片作为标记，用法是指定url
  

<ul style='list-style-type: circle'>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul style="list-style-image: url('/i/eg_arrow.gif');">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>