CSS 整理（2）

Box 属性

属性	描述	CSS
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。	3
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。	3
overflow-style	规定溢出元素的首选滚动方法。	3
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。	3
rotation-point	定义距离上左边框边缘的偏移点。	3

overflow-x  / overflow-y  属性无法在 IE8 以及更早的浏览器正确地工作。

值	描述	测试
visible	不裁剪内容，可能会显示在内容框之外。	测试
hidden	裁剪内容 - 不提供滚动机制。	测试
scroll	裁剪内容 - 提供滚动机制。	测试
auto	如果溢出框，则应该提供滚动机制。	测试
no-display	如果内容不适合内容框，则删除整个框。	测试
no-content	如果内容不适合内容框，则隐藏整个内容。	测试

 

CSS 尺寸属性（Dimension）

 

属性	描述	CSS
height	设置元素高度。 元素内容区的高度	1
max-height	设置元素的最大高度。 元素内容区的宽度	2
max-width	设置元素的最大宽度。	2
min-height	设置元素的最小高度。	2
min-width	设置元素的最小宽度。	2
width	设置元素的宽度。	1

 

img.big 
{
height: 50%
}

JavaScript 语法：	object.style.height="50px"

 

p { height:100px; width:100px; } 

JavaScript 语法：	object.style.width="50px"

max-height / max-width  / min-height / min-width  属性不包括外边距、边框和内边距。

JavaScript 语法：	object.style.maxHeight="50px"

JavaScript 语法：	object.style.minWidth="50%"

 

CSS 字体属性（Font）

 

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

 

1.font 用于一次设置元素字体的两个或更多方面, 至少要指定字体大小和字体系列。未设置的属性会使用其默认值。

可以按顺序设置如下属性: font-style  font-variant  font-weight  font-size/line-height  font-family

p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}

JavaScript 语法：	object.style.font="italic small-caps bold 12px arial,sans-serif"

2.font-family 规定元素的字体系列, font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

• 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
• 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

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

JavaScript 语法：	object.style.fontFamily="arial,sans-serif"

3.font-size该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

值	描述
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 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

 

h2 {font-size: 200%}

JavaScript 语法：	object.style.fontSize="larger"

4.font-style 属性定义字体的风格。该属性设置使用斜体、倾斜或正常字体。

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

 

p.italic {font-style:italic;}

JavaScript 语法：	object.style.fontStyle="italic"

5.font-weight 属性设置文本的粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

 

p.thick {font-weight: bold}

JavaScript 语法：	object.style.fontWeight="900"

 

CSS 列表属性（List）

属性	描述	CSS
list-style	在一个声明中设置所有的列表属性。	1
list-style-image	将图象设置为列表项标记。	1
list-style-position	设置列表项标记的放置位置。	1
list-style-type	设置列表项标记的类型。	1
marker-offset		2

1.list-style 简写属性在一个声明中设置所有的列表属性  可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值

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

ul 
{
list-style: square inside url('/i/eg_arrow.gif')
}

JavaScript 语法：	object.style.listStyle="decimal inside"

2.list-style-type 属性设置列表项标记的类型

值	描述
none	无标记。
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, 等。)

 

ol.decimal {list-style-type: decimal}

ol.uroman {list-style-type: upper-roman}

ol.lalpha {list-style-type: lower-alpha}

JavaScript 语法：	object.style.listStyleType="square"

3.list-style-position 属性设置在何处放置列表项标记。

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

 

ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside
}

JavaScript 语法：	object.style.listStylePosition="inside"

4.list-style-image 属性使用图像来替换列表项的标记。

ul 
{
list-style-image: url('/i/eg_arrow.gif')
}

JavaScript 语法：	object.style.listStyleImage="url('/images/blueball.gif')"

(以上内容摘自http://www.w3school.com.cn)