CSS3

最新推荐文章于 2025-09-12 12:39:11 发布

转载最新推荐文章于 2025-09-12 12:39:11 发布 · 86 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/yzbxcf/1202030

文章标签：

#xhtml #ruby

本文详细介绍了CSS样式中的定位、布局、盒子模型、尺寸等核心概念及其语法取值，帮助读者全面理解CSS样式的设置方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

<!--

属性：

1.定位

>语法：

position：static | relative | absolute | fixed

取值：

static：无特殊定位,默认值：static。

relative：将依据top，right，bottom，left等属性在正常文档流中偏移位置。

absolute：使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed：使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

>语法：

z-index: auto | <integer>

取值：

auto：遵从其父对象的定位,默认值：auto;

<integer>：用整数值来定义堆叠级别。可以为负值

>语法：

top: <length> | <percentage> | auto

right：<length> | <percentage> | auto

bottom: <length> | <percentage> | auto

left: <length> | <percentage> | auto

取值：

auto：无特殊定位,为默认值。

<length>：用长度值来定义距离顶部的偏移量。可以为负值。

<percentage>：用百分比来定义距离顶部的偏移量。可以为负值。

2.布局

>语法：

取值：

none：隐藏对象。

inline：指定对象为内联元素。

block：指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。（CSS2）

inline-box：将对象作为内联块级弹性盒模型显示（CSS3 ）

table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）

table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）

table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）

table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）

table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）

table-column：指定对象作为表格列。类同于html标签<col>（CSS2）

table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）

table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）

table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）

compact：分配对象为块对象或基于内容之上的内联对象（CSS3）

run-in：分配对象为块对象或基于内容之上的内联对象（CSS3）

ruby：将对象作为表格脚注组显示（CSS3）

ruby-base：将对象作为表格脚注组显示（CSS3）

ruby-text：将对象作为表格脚注组显示（CSS3）

ruby-base-group：将对象作为表格脚注组显示（CSS3）

ruby-text-group：将对象作为表格脚注组显示（CSS3）

box：将对象作为弹性盒模型显示（CSS3）

>语法：

float：none | left | right

取值：

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

>语法：

clear：none | left | right | both

取值：

none：允许两边都可以有浮动对象

both：不允许有浮动对象

left：不允许左边有浮动对象

right：不允许右边有浮动对象

>语法：

visibility：visible | hidden | collapse

取值：

visible：设置对象可视

hidden：设置对象隐藏

collapse：主要用来隐藏表格的行或列,隐藏的行或列能够被其他内容使用。

>语法：

取值：

auto：对象无剪切

rect：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪

切。

必须将position的值设为absolute，此属性方可使用

>语法：

overflow:visible | hidden | scroll | auto

overflow-x:visible | hidden | scroll | auto

overflow-y:visible | hidden | scroll | auto

取值：

visible：不剪切内容。

hidden：将超出对象尺寸的内容进行裁剪，将不出现滚动条。

scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。

auto：在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

例：overflow:scroll;

3.盒子模型

>语法：

box-orient：horizontal | vertical

取值：

horizontal：设置弹性盒模型对象的子元素为水平排列

vertical：设置弹性盒模型对象的子元素为纵向排列

例：需要先用display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;声明，再用:box-

orient:horizonta;

>语法：

box-pack：start | center | end | justify

box-align：start | end | center | baseline | stretch

取值：

start：设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）

center：设置弹性盒模型对象的子元素居中对齐

end：设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）

baseline：设置弹性盒模型对象的子元素基线对齐

stretch：设置弹性盒模型对象的子元素自适应父元素尺寸

justify：设置或弹性盒模型对象的子元素两端对齐

>语法： box-flex：<number>

取值：

<number>：使用浮点数指定对象所分配其父元素剩余空间的比例。

>语法：

box-flex-group：<integer>

取值：

<integer>：用整数值来定义弹性盒模型对象的子元素所在的组。

>语法：

box-ordinal-group：<integer>

取值：

<integer>：用整数值来定义弹性盒模型对象的子元素显示顺序,数值较低的元素显示在数值较高的元素前面.

>语法：

box-direction：normal | reverse

取值：

normal：设置弹性盒模型对象的子元素按正常顺序排列

reverse：反转弹性盒模型对象的子元素的排列顺序

>语法：

box-lines：single | multiple

取值：

single：弹性盒模型对象的子元素只在一行内显示

multiple：弹性盒模型对象的子元素超出父元素的空间时换行显示

4.尺寸

>语法：

width：<length> | <percentage> | auto

min-width：<length> | <percentage>

max-width：<length> | <percentage> | none

height：<length> | <percentage> | auto

min-height：<length> | <percentage>

max-height：<length> | <percentage> | none

取值：

auto：无特定宽度值，取决于其它属性值

none：无最小高度限制

<length>：用长度值来定义宽度。不允许负值

<percentage>：用百分比来定义宽度。不允许负值

5.外补白

margin：[ <length> | <percentage> | auto ]{1,4}

默认值：看每个独立属性

相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

取值：

auto：值被设置为相对边的值

<length>：用长度值来定义外补白。可以为负值

<percentage>：用百分比来定义外补白。可以为负值

6.内补白

padding：[ <length> | <percentage> ]{1,4}

默认值：看每个独立属性

相关属性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

取值：

<length>：用长度值来定义内补白。不允许负值

<percentage>：用百分比来定义内补白。不允许负值

7.边框

>语法：

border：[ border-width ] || [ border-style ] || [ border-color ]

默认值：看每个独立属性

相关属性：[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]

取值：

[ border-width ]：设置或检索对象边框宽度。

[ border-style ]：设置或检索对象边框样式。

[ border-color ]：设置或检索对象边框颜色。

>语法：

border-p_w_picpath：<border-p_w_picpath-source> || <border-p_w_picpath-slice> [ / <border-p_w_picpath-width>? [ / <border-p_w_picpath-outset> ]?

]? || <border-p_w_picpath-repeat>

说明：

border-p_w_picpath-source : none | <url>

该属性用于指定是否用图像定义边框样式或图像来源路径。

border-p_w_picpath-slice : [ <number> | <percentage> ]{1,4} && fill?

该属性用于指定对边框背景图的分割方式

border-p_w_picpath-width : [ <length> | <percentage> | <number> | auto ]{1,4}

该属性用于指定边框宽度。该属性可省略，由外部的border-width来定义

也可以省略此属性，在外部用border-width属性来设置该值

border-p_w_picpath-outset : [ <length> | <number> ]{1,4}

该属性用于指定对边框背景图的扩展

border-p_w_picpath-repeat : [ stretch | repeat | round | space ]{1,2}

该属性用于指定边框背景图的填充方式。可定义0-2个参数值.

取值：

none：无背景图片。

<url>：使用绝对或相对地址指定图像。

<number>：用浮点数指定宽度。不允许负值。

<percentage>：用百分比指定宽度。不允许负值。

<length>：用长度值指定宽度。不允许负值。

stretch：指定用拉伸方式来填充边框背景图。

repeat：指定用平铺方式来填充边框背景图。

round：指定用平铺方式来填充边框背景图。

例：-moz-border-p_w_picpath:url(练习/jpg.jpg) 27/27px stretch;-webkit-border-p_w_picpath:;-o-border-p_w_picpath:;border-p_w_picpath:;

>语法：

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

相关属性：border-top/bottom-left/right-radius

取值：

从：上右下左赋值

<length>：用长度值设置对象的圆角半径长度。不允许负值

<percentage>：用百分比设置对象的圆角半径长度。不允许负值

>语法：

box-shadow：<shadow> = inset? && [ <length>{2,4} && <color>? ]

取值：

none：无阴影

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值

<color>：设置对象的阴影的颜色。

inset：设置对象的阴影类型为内阴影。

例：-moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;-webkit-box-shadow:;-o-box-shadow:;box-shadow:;

>语法：

box-reflect：none | <direction> <offset>? <mask-box-p_w_picpath>?

<direction> = above | below | left | right

<repeating-radial-gradient>

默认值：none

取值：

none：无倒影

<direction>: 简单图片倒影

above：指定倒影在对象的上边

below：指定倒影在对象的下边

left：指定倒影在对象的左边

right：指定倒影在对象的右边

<offset>: 图片与倒影间隔

<length>：用长度值来定义倒影与对象之间的间隔。可以为负值

<percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-p_w_picpath>: 更真实的图片倒影文字倒影与渐变

none：无遮罩图像

<url>：使用绝对或相对地址指定遮罩图像。

<linear-gradient>：使用线性渐变创建遮罩图像。

<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。

8.背景：

>语法：

background-color：<color>

取值：

<color>：指定颜色。

>语法：

background-p_w_picpath：<bg-p_w_picpath> [ , <bg-p_w_picpath> ]*

radial-gradient>

取值：

none：无背景图。

<url>：使用绝对或相对地址指定背景图像。

<linear-gradient>：使用线性渐变创建背景图像。（CSS3）

<radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）

<repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）

<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

>语法：

background-repeat：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

取值：

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺

no-repeat：背景图像不平铺

round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

>语法：

background-p_w_upload：<p_w_upload> [ , <p_w_upload> ]*

<p_w_upload> = fixed | local | scroll

取值：

fixed：背景图像相对于窗体固定。

scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动。

local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动。（CSS3）

>语法：

background-position：<position> [ , <position> ]*

<percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

取值：

<percentage>：用百分比指定背景图像填充的位置。可以为负值。

<length>：用长度值指定背景图像填充的位置。可以为负值。

center：背景图像横向和纵向居中。

left：背景图像在横向上填充从左边开始。

right：背景图像在横向上填充从右边开始。

top：背景图像在纵向上填充从顶部开始。

bottom：背景图像在纵向上填充从底部开始。

>语法：

background-origin：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box

取值：

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

>语法：

background-clip：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box | text

取值：

padding-box：从padding区域（不含padding）开始向外裁剪背景。

border-box：从border区域（不含border）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

>语法：

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值：auto

取值：

<length>：用长度值指定背景图像大小。不允许负值。

<percentage>：用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

>语法：

background：[ background-p_w_picpath ] || [ background-repeat ] || [ background-p_w_upload ] || [ background-position ]

相关属性：[ background-origin ] || [ background-clip ] || [ background-size ]

例：多重背景图像

url(jpg.jpg ) no-repeat scroll 10px 20px,url(jpg.jpg) no-repeat scroll 50px 60px,url(jpg.jpg) no-repeat

scroll 90px 100px;

9.颜色

>color：<color>

取值：

<color>：指定颜色。

>语法：

opacity：<number>

取值：

<number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内.

10.字体

>font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] |

>语法：

font-style：normal | italic | oblique

取值：

normal：指定文本字体样式为正常的字体

italic：指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique

oblique：指定文本字体样式为倾斜的字体

>语法：

font-variant：normal | small-caps

取值：

normal：正常的字体

small-caps：小型的大写字母字体

>语法：

font-weight：normal | bold | bolder | lighter | <integer>

取值：

normal：正常的字体。相当于number为400

bold：粗体。相当于number为700。

bolder：特粗体。也相当于strong和b对象的作用

lighter：细体

<integer>：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

>语法：

font-size：<length> | <percentage>

取值：

<length>：用长度值指定文字大小。不允许负值。

<percentage>：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

>语法：

font-family：[ <family-name>

取值：

<family-name>：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起

>语法：

extra-expanded | ultra-expanded

取值：

ultra-condensed：比正常文字宽度窄4个基数。

extra-condensed：比正常文字宽度窄3个基数。

condensed：比正常文字宽度窄2个基数。

semi-condensed：比正常文字宽度窄1个基数。

normal：正常文字宽度

semi-expanded：比正常文字宽度宽1个基数。

expanded：比正常文字宽度宽2个基数。

extra-expanded：比正常文字宽度宽3个基数。

ultra-expanded：比正常文字宽度宽4个基数。

11.文本

>语法：

text-indent：<length> | <percentage>

取值：

<length>：用长度值指定文本的缩进。可以为负值。

<percentage>：用百分比指定文本的缩进。可以为负值。

>语法：

text-overflow：clip | ellipsis

默认值：clip

取值：

clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。

ellipsis：当对象内文本溢出时显示省略标记（...）。

>语法：

默认值：start

取值：

left：内容左对齐。

center：内容居中对齐。

right：内容右对齐。

justify：内容两端对齐。写本文档时仅Firefox能看到正确效果

start：内容对齐开始边界。（CSS3）

end：内容对齐结束边界。（CSS3）

>语法：

text-transform：none | [ [ capitalize | uppercase | lowercase ] || full-width || full-size-kana ]

取值：

none：无转换

capitalize：将每个单词的第一个字母转换成大写

uppercase：转换成大写

lowercase：转换成小写

full-width： ??（CSS3）

full-size-kana： ??（CSS3）

>语法：

text-decoration：[ text-decoration-line ] || [ text-decoration-style ] || [ text-decoration-color ] || blink

取值：

[ text-decoration-line ]：指定文本装饰的种类。相当于CSS1时的text-decoration属性

[ text-decoration-style ]：指定文本装饰的样式。

[ text-decoration-color ]：指定文本装饰的颜色。

blink：指定文字的装饰是闪烁。写本文档时仅Firefox和Opera支持该参数值

>语法：

text-decoration-line：none | [ underline || overline || line-through ]

取值：

none：指定文字无装饰

underline：指定文字的装饰是下划线

overline：指定文字的装饰是上划线

line-through：指定文字的装饰是贯穿线

>语法：

text-decoration-color：<color>

默认值：采用文本颜色

取值：

<color>：指定颜色。

>语法：

text-decoration-style：solid | double | dotted | dashed | wavy

取值：

solid：实线

double：双线

dotted：点状线条

dashed：虚线

wavy：波浪线

>语法：

text-shadow：none |length(4个)

取值：

none：无阴影

length：上右下左

>语法：

text-fill-color：<color>

取值：

<color>：指定文字的填充颜色。

>语法：

text-stroke：[ text-stroke-width ] || [ text-stroke-color ]

取值：

[ text-stroke-width:length ]：设置或检索对象中的文字的描边厚度

[ text-stroke-color:color]：设置或检索对象中的文字的描边颜色

>语法：

letter-spacing：normal | <length>

word-spacing：normal | <length>

取值：

normal：默认间隔

<length>：用长度值指定间隔。可以为负值。

>语法：

取值：

baseline：将支持valign特性的对象的内容与基线对齐,默认.

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：将支持valign特性的对象的内容与对象顶端对齐

text-top：将支持valign特性的对象的文本与对象顶端对齐

middle：将支持valign特性的对象的内容与对象中部对齐

bottom：将支持valign特性的对象的文本与对象底端对齐

text-bottom：将支持valign特性的对象的文本与对象顶端对齐

<percentage>：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

>语法：

word-wrap：normal | break-word

取值：

normal：允许内容顶开或溢出指定的容器边界。

break-word：内容将在边界内换行。如果需要，单词内部允许断行。

>语法：

white-space：normal | pre | nowrap | pre-wrap | pre-line

取值：

normal：默认对象内空格的处理方式。

pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。

pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。

pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

>语法：

direction：ltr | rtl

取值：

ltr：文本流从左到右。

rtl：文本流从右到左。

>语法：

unicode-bidi：normal | embed | bidi-override

取值：

normal：对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。

embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。

bidi-override：严格按照direction属性的值重排序。忽略隐式双向运算规则。

>语法：

line-height：normal | <length> | <percentage> | <number>

取值：

normal：允许内容顶开或溢出指定的容器边界。

<length>：用长度值指定行高。可以为负值。

<percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。

<number>：用乘积因子指定行高。可以为负值。

>语法：

tab-size：<integer> | <length>

取值：

<integer>：用整数值指定制表符的长度。不允许负值。

<length>：用长度值指定制表符的长度。不允许负值。

12.列表

>语法：

list-style：[ list-style-p_w_picpath ] || [ list-style-position ] || [ list-style-type ]

>语法：

list-style-p_w_picpath：none | <url>

取值：

none：不指定图像

<url>：使用绝对或相对地址指定列表项标记图像。

>语法：

list-style-position：outside | inside

取值：

outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

语法：

iroha | lower-latin | upper-latin

默认值：disc

取值：

disc：实心圆(CSS1)

circle：空心圆(CSS1)

square：实心方块(CSS1)

decimal：阿拉伯数字(CSS1)

13.表格

>语法：

table-layout：auto | fixed

取值：

auto：默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢

fixed：固定布局的算法。

>语法：

border-collapse：separate | collapse

取值：

separate：边框独立

collapse：相邻边被合并

>语法：

border-spacing：<length>{1,2}

取值：

<length>：用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值

>语法：

caption-side：top | right | bottom | left

取值：

top：指定caption在表格上边

bottom：指定caption在表格下边

>语法：

empty-cells：hide | show

取值：

hide：指定当表格的单元格无内容时，隐藏该单元格的边框。

show：指定当表格的单元格无内容时，显示该单元格的边框。

14.用户界面

>语法：

outline：[ outline-width ] || [ outline-style ] || [ outline-color ]