从0开始学CSS（二）

CSS 字体

font-family 属性font-family:value

规定文本的字体系列
font-family 规定元素的字体系列。
font-family 能够把多个字体名称做为一个“回退”系统来保存。若是浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

p {
  font-family:"Times New Roman",Georgia,Serif;
}
复制代码

• family-name 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。

font-size 属性font-size:value

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}
复制代码

属性可设置字体的尺寸。

• xx-small、x-small、small、medium、large、x-large、xx-large 把字体的尺寸设置为不一样的尺寸，从 xx-small 到 xx-large。 默认值：medium。
• smaller 把 font-size 设置为比父元素更小的尺寸。
• larger 把 font-size 设置为比父元素更大的尺寸。
• length 把 font-size 设置为一个固定的值。
• % 把 font-size 设置为基于父元素的一个百分比值。

font-weight 属性font-weight=value

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
复制代码

设置文本的粗细。

• normal 默认值。定义标准的字符。
• bold 定义粗体字符。
• bolder 定义更粗的字符。
• lighter 定义更细的字符。
• 100-900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

font-style 属性font-style:value

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
复制代码

定义字体的风格

• normal 默认值。浏览器显示一个标准的字体样式。
• italic 浏览器会显示一个斜体的字体样式。
• oblique 浏览器会显示一个倾斜的字体样式。

font-variant 属性

p.small {
  font-variant:small-caps;
  }
复制代码

设置小型大写字母的字体显示文本，这意味着全部的小写字母均会被转换为大写，可是全部使用小型大写字体的字母与其他文本相比，其字体尺寸更小。

• normal 默认值。浏览器会显示一个标准的字体。
• small-caps 浏览器会显示小型大写字母的字体。

CSS 文本

color 属性color:value

body{color:red;}
复制代码

规定文本的颜色。

• color_name 规定颜色值为颜色名称的颜色（好比 red）。
• hex_number 规定颜色值为十六进制值的颜色（好比 #ff0000）。
• rgb_number 规定颜色值为 rgb 代码的颜色（好比 rgb(255,0,0)）。

direction属性direction:value

boody{direction: rtl}  
复制代码

规定文本的方向 / 书写方向。

• ltr 默认。文本方向从左到右。
• rtl 文本方向从右到左。

letter-spacing属性letter-spacing:value

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
复制代码

设置字符间距。

• normal 默认。规定字符间没有额外的空间。
• length 定义字符间的固定空间（容许使用负值）。

line-height属性

p.small {line-height:90%}
p.big {line-height:200%}
复制代码

设置行高。

• normal 默认。设置合理的行间距。
• number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
• length 设置固定的行间距。
• % 基于当前字体尺寸的百分比行间距。

text-align属性

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
复制代码

规定文本的水平对齐方式。

• left 把文本排列到左边。默认值：由浏览器决定。
• right 把文本排列到右边。
• center 把文本排列到中间。
• justify 实现两端对齐文本效果。

text-decoration属性

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
复制代码

规定添加到文本的装饰效果。

• none 默认。定义标准的文本。
• underline 定义文本下的一条线。
• overline 定义文本上的一条线。
• line-through 定义穿过文本下的一条线。

text-indent属性

p{text-indent:50px;}
复制代码

规定文本块首行的缩进。

• length 定义固定的缩进。默认值：0。
• % 定义基于父元素宽度的百分比的缩进。

text-transform属性

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}
复制代码

控制文本的大小写。

• none 默认。定义带有小写字母和大写字母的标准的文本。
• capitalize 首字母大写。
• uppercase 所有大写。
• lowercase 所有小写。

white-space属性

p{white-space: nowrap}
复制代码

规定如何处理元素中的空白。

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式相似HTML 中的 <pre> 标签。
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• pre-wrap 保留空白符序列，可是正常地进行换行。
• pre-line 合并空白符序列，可是保留换行符。

word-spacing属性

p{word-spacing:25px;}
复制代码

设置单词间距。

• normal 默认。定义单词间的标准空间。
• length 定义单词间的固定空间。

text-overflow属性

div.test{
text-overflow:ellipsis;
}
复制代码

规定当文本溢出包含元素时发生的事情。3

• clip 修剪文本。 测试
• ellipsis 显示省略符号来表明被修剪的文本。

text-shadow属性

h1{
text-shadow: 5px 5px 5px #FF0000;
}
复制代码

向文本添加阴影。3

• h-shadow 必需。水平阴影的位置。容许负值。
• v-shadow 必需。垂直阴影的位置。容许负值。
• blur 可选。模糊的距离。 测试
• color 可选。阴影的颜色。

word-wrap属性

p.test {word-wrap:break-word;}
复制代码

容许对长的不可分割的单词进行分割并换行到下一行。

• normal 只在容许的断字点换行（浏览器保持默认处理）。
• break-word 在长单词或 URL 地址内部进行换行。

CSS 边框属性

border-width属性

border-width:thin medium thick 10px;
复制代码

为元素的全部边框设置宽度，或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起做用。若是边框样式是 none，边框宽度实际上会重置为 0。不容许指定负长度值。

• 上边框是细边框
• 右边框是中等边框
• 下边框是粗边框
• 左边框是 10px 宽的边框

border-style 属性

border-style:dotted solid double dashed; 
复制代码

用于设置元素全部边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。

• 上边框是点状
• 右边框是实线
• 下边框是双线
• 左边框是虚线

border-color属性

border-color:red green blue pink;
复制代码

设置四条边框的颜色。

• 上边框是红色
• 右边框是绿色
• 下边框是蓝色
• 左边框是粉色

border属性

在一个声明设置全部的边框属性。

能够按顺序设置以下属性：
1. border-width
2. border-style
3. border-color

border-radius 属性

border-radius:2em;
border-radius:10px;
复制代码

元素添加圆角边框

ul、li列表

list-style属性

list-style:square inside url('/i/arrow.gif');
复制代码

在一个声明中设置全部的列表属性。

能够按顺序设置以下属性：
- list-style-type
- list-style-position
- list-style-image

list-style-image属性

list-style-image:url("/i/arrow.gif");
复制代码

将图象设置为列表项标记。

• URL 图像的路径。

list-style-position属性

list-style-position:inside;
复制代码

设置列表项标记的放置位置。

• inside 列表项目标记放置在文本之内，且环绕文本根据标记对齐。
• outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本之外，且环绕文本不根据标记对齐。

list-style-type属性

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
复制代码

设置列表项标记的类型。

• disc 默认。标记是实心圆。
• circle 标记是空心圆。
• square 标记是实心方块。
• decimal 标记是数字。
• decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
• lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
• upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
• lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
• upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
• lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
• lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
• upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
• hebrew 传统的希伯来编号方式
• armenian 传统的亚美尼亚编号方式
• georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
• cjk-ideographic 简单的表意数字
• hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
• katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
• hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
• katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

表格（Table） 属性

border-collapse 属性

设置表格的边框是否被合并为一个单一的边框，仍是象在标准的 HTML 中那样分开显示。

• collapse 若是可能，边框会合并为一个单一的边框。
• separate 默认值。边框会被分开。

border-spacing 属性

设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。

• length length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不容许使用负值。
  • 若是定义一个 length 参数，那么定义的是水平和垂直间距。
  • 若是定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

caption-side 属性

设置表格标题的位置。

• top 默认值。把表格标题定位在表格之上。
• bottom 把表格标题定位在表格之下。

empty-cells 属性

设置是否显示表格中的空单元格（仅用于"分离边框"模式）。

• hide 不在空单元格周围绘制边框。
• show 在空单元格周围绘制边框。默认。

定位和浮动

position属性 规定元素的定位类型。

• absolute 生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom"` 属性进行规定。
• relative 生成相对定位的元素，相对于其正常位置进行定位。 所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。
• fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• static 默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

bottom属性

设置定位元素下外边距边界与其包含块下边界之间的偏移。

left属性

设置定位元素左外边距边界与其包含块左边界之间的偏移。

right属性

设置定位元素右外边距边界与其包含块右边界之间的偏移。

top属性

设置定位元素的上外边距边界与其包含块上边界之间的偏移。

z-index属性

设置元素的堆叠顺序。

vertical-align属性

设置元素的垂直对齐方式。

• baseline 默认。元素放置在父元素的基线上。
• sub 垂直对齐文本的下标。
• super 垂直对齐文本的上标
• top 把元素的顶端与行中最高元素的顶端对齐
• text-top 把元素的顶端与父元素字体的顶端对齐
• middle 把此元素放置在父元素的中部。
• bottom 把元素的顶端与行中最低的元素的顶端对齐。
• text-bottom 把元素的底端与父元素字体的底端对齐。
• length
• %使用 "line-height" 属性的百分比值来排列此元素。容许使用负值。

visibility属性

规定元素是否可见。

• visible 默认值。元素是可见的。
• hidden 元素是不可见的。

clear属性

规定元素的哪一侧不容许其余浮动元素。

• left 在左侧不容许浮动元素。
• right 在右侧不容许浮动元素。
• both 在左右两侧均不容许浮动元素。
• none 默认值。容许浮动元素出如今两侧。

cursor属性

规定要显示的光标的类型（形状）。

• default 默认光标（一般是一个箭头）
• auto 默认。浏览器设置的光标。
• crosshair 光标呈现为十字线。
• pointer 光标呈现为指示连接的指针（一只手）
• move 此光标指示某对象可被移动。
• e-resize 此光标指示矩形框的边缘可被向右（东）移动。
• ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
• nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
• n-resize 此光标指示矩形框的边缘可被向上（北）移动。
• se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
• sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
• s-resize 此光标指示矩形框的边缘可被向下移动（南）。
• w-resize 此光标指示矩形框的边缘可被向左移动（西）。
• text 此光标指示文本。
• wait 此光标指示程序正忙（一般是一只表或沙漏）。
• help 此光标指示可用的帮助（一般是一个问号或一个气球）。

float属性

规定框是否应该浮动。

• left 元素向左浮动。
• right元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

clear 属性

clear 属性规定元素的哪一侧不容许其余浮动元素。

• left 在左侧不容许浮动元素。
• right 在右侧不容许浮动元素。
• both 在左右两侧均不容许浮动元素。
• none 默认值。容许浮动元素出如今两侧。

display属性

规定元素应该生成的框的类型。

• none 此元素不会被显示。
• block 此元素将显示为块级元素，此元素先后会带有换行符。
• inline 默认。此元素会被显示为内联元素，元素先后没有换行符。
• inline-block 行内块元素。（CSS2.1 新增的值）

overflow属性

规定当内容溢出元素框时发生的事情。

• visible 默认值。内容不会被修剪，会呈如今元素框以外。
• hidden 内容会被修剪，而且其他内容是不可见的。
• scroll 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
• auto 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。