CSS 整理(2)
2015-08-01 14:03
711 查看
Box 属性
属性 | 描述 | CSS |
---|---|---|
overflow-x | 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 | 3 |
overflow-y | 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 | 3 |
overflow-style | 规定溢出元素的首选滚动方法。 | 3 |
rotation | 围绕由 rotation-point 属性定义的点对元素进行旋转。 | 3 |
rotation-point | 定义距离上左边框边缘的偏移点。 | 3 |
值 | 描述 | 测试 |
---|---|---|
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" |
---|
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" |
---|
有两种类型的字体系列名称:
指定的系列名称:具体字体的名称,比如:"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" |
---|
值 | 描述 |
---|---|
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" |
---|
值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
p.italic {font-style:italic;}
JavaScript 语法: | object.style.fontStyle="italic" |
---|
值 | 描述 |
---|---|
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 |
可以按顺序设置如下属性: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" |
---|
值 | 描述 |
---|---|
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" |
---|
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
ul.inside { list-style-position: inside } ul.outside { list-style-position: outside }
JavaScript 语法: | object.style.listStylePosition="inside" |
---|
ul { list-style-image: url('/i/eg_arrow.gif') }
JavaScript 语法: | object.style.listStyleImage="url('/images/blueball.gif')" |
---|
相关文章推荐
- html/css的网页制作
- BootStray CSS代码
- CSS从大图中抠取小图完整教程(background-position应用)
- css 8.1
- css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;
- css 7.30
- CSS 整理(1)
- JSP样式表加载不上的问题
- 【CSS学习】CSS 框模型(Box Model)
- 【CSS学习】CSS 表格
- CSS+DIV:实现炫酷网页样式与布局
- Css样式表 (常用基础)
- Web 设计师不可错过的 25+ CSS 工具
- CSS布局——元素浮动与定位篇
- CSS基础2
- CSS页面布局篇
- div+css position定位浅析
- CSS嵌套导航栏
- CSS盒模型理解
- css3改变元素基点transform-origin