自学CSS技术（三）

CSS 文本格

文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 – 如: ＃FF0000
一个RGB值 – 如: RGB(255,0,0)
颜色的名称 – 如: red

body {color:red;} 定义整个文本为红色，在没有特殊定义下都为红色
h1 {color:#00ff00;}定义h1为绿色
h2 {color:rgb(0,0,255);}定义h2为蓝色

文本的对齐方式属性是text-align

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}文本居中
p.date {text-align:right;}文本居右
p.main {text-align:justify;}每一行被展开为宽度相等，左，右外边距是对齐

文本修饰 text-decoration属性

text-decoration 属性用来设置或删除文本的装饰。

a {text-decoration:none;}没有线条
h1 {text-decoration:overline;}上面带线条
h2 {text-decoration:line-through;}文字中间带线条
h3 {text-decoration:underline;}下面带线条

文本转换text-transform

p.uppercase {text-transform:uppercase;}全部大写
p.lowercase {text-transform:lowercase;}全部小写
p.capitalize {text-transform:capitalize;}首字母大写

CSS 字体font-family 属性设置文本的字体系列。

CSS字体属性定义字体，加粗，大小，文字样式。
font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”。
多个字体系列是用一个逗号分隔指明：

字体样式font-style

主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
正常 – 正常显示文本
斜体 – 以斜体字显示的文字
倾斜的文字 – 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}正常
p.italic {font-style:italic;}斜体常用
p.oblique {font-style:oblique;}斜体

字体大小font-size 属性设置文本的大小。

字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）也可以使用em定义文字大小。

h1 {font-size:40px;}字体大小40
h2 {font-size:30px;}字体大小30
p {font-size:14px;}字体大小14

[v_notice]所有CSS字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。[/v_notice]

CSS 列表ul和ol

在HTML中，有两种类型的列表：
ul无序列表 – 列表项标记用特殊图形（如小黑点、小方框等）
ol有序列表 – 列表项的标记有数字或字母

不同的列表项标记，list-style-type属性指定列表项标记的类型

ul.a {list-style-type: circle;}无序标记前面圆圈
ul.b {list-style-type: square;}无序标记前面方框
ol.c {list-style-type: upper-roman;}有序罗马字符
ol.d {list-style-type: lower-alpha;}有序abc标记

list-style-image作为列表项标记的图像

ul{list-style-image: url('sqpurple.gif');}用图片作为无序标记

[v_notice]所有的CSS列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。[/v_notice]

表格边框，使用border属性

：定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
    border-collapse:collapse;边框属性折叠成一个单一的边框或隔开
}

table, th, td
{
    border: 1px solid black; 定义边框为黑色边框， 
}

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

表格宽度和高度Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table {width:100%;}
th{height:50px;}

表格填充如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

td{padding:15px;}15像素的填充

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td, th{border:1px solid green;}定义实线绿色表格
th{background-color:green;color:white;}定义除表头外所有为绿框白色字

[v_notice]边框线条属性边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅）[/v_notice]