CSS样式表

本文深入探讨CSS样式表的基础知识及其在网页设计中的高级应用,包括字体样式、布局、定位、背景、尺寸、颜色、边框等关键属性。详细解释了如何利用CSS控制网页元素的外观,提供了丰富的实例演示,帮助开发者实现更美观、响应式的网页布局。
摘要由CSDN通过智能技术生成

CSS样式表

字体:

CSS是CascadingStyle Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

引入外部样式表

<head>
<title>title of article</title>
<link rel=stylesheet href="xxx.css" type="text/css">
</head>
而在xml中,需要这样连接

<?xml-stylesheet type="text/css" href="xxx.css"?> 
字体:
font : font-style || font-variant || font-weight ||font-size || line-height || font-family

font : caption || icon || menu || message-box ||small-caption || status-bar

Font-style : Normal(正常) || italic(斜体) || oblique(倾斜的字体)对于没有斜体变量的特殊字体,将应用Oblique。两个差不多。

 p { font-style: normal; }
 p { font-style: italic; }
 p { font-style: oblique; }

Font-variant : normal(正常字体) || small-caps(小型的大写字母字体)

设置或检索对象中的文本是否为小型的大写字母。

对象的脚本特性为fontVariant.

Font-weight : normal || bold || bolder || lighter|| number

Normal :(正常字体,相当于number为400,声明此值将取消之前任何设置)

Bold : 粗体 相当于number为700 。也相当于b对象的作用

Bolder :IE5+ 特粗体

Lighter :IE5+ 细体

Number :IE5+ 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900

设置或检索对象中的文本字体的粗细。

Font-size :absolute-size | relative-size | length

Absolute-size:根据对象字体进行调节。

Relative-size:相对父对象进行尺寸的调整。使用成比例的em单位计算。

Length:百分数

 font-size:200%;  Absolute-size:相对于自身进行比例调整
 font-size:12px; 
 font-style:normal;

Line-height: normal(默认行高) | length(百分比数字)

检索和设置对象的行高。即字体最低端与字体内部顶端之间的距离。

如果行内有多个对象,则应用最大行高。

Font-family:name

Font-family: cursive | fantasy | monospace | serif| sans-serif

Name:字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用括号起

第二种声明方式所列出的字体序列名称。

设置或检索用于对象中文本的字体名称序列,默认值由浏览器确定。

Color:指定颜色。

 color:#345345;
 color:red;如果不小心写了两次color.会调用下面的color
 color:menu;很漂亮的似隐形的字体
 color:rgb(100,20,20);

Text-decoration: none || underline || blink ||overline || line-through

None:无装饰

Underline:下划线

Blink:闪烁

Line-through:贯穿线

Overline:上划线

检索或设置对象中的文本的修饰。

没有文本的对象次属性不起作用。

Text-underline-position:below || above

Below:在文本下面

Above:在文本上面

设置或检索text-decoration属性定义的下划线的位置。

 text-underline-position: below;
 text-decoration: underline;

Text-shadow: color || length || length || opacity

Color:设置颜色

Length:有由浮点数字和单位标识符组成的长度值。可为负值。第一个length指定阴影的水平延伸距离。第二个length指定阴影的垂直延伸距离。

Opacity:由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个length全部设定为0。

设置或检索对象中文本的文字是否有阴影及模糊效果。

Font-transform:none | capitalize | uppercase |lowercase

None:无转换发生

Capitalize:将每个单词的第一个字母转换成大写,其余无转换发生

Uppercase:转换成大写

Lowercase:转换成小写

text-transform:uppercase;

Letter-spacing:normal | length  字母之间的间隔

Normal:默认间隔

Length:由浮点和单位标识组成的长度值,可以为负值。

letter-spacing:6px;

Word-spacing:normal | length    每个词汇之间的间隔

Normal:默认间距

Length:由浮点和单位标识组成的长度值,可以为负值。

CSS Length Units Reference长度单位

Length Units
长度单位

CSS Version
版本

Compatibility
兼容性

Description
简介

相对长度单位 Relative Length Units

em

CSS1

IE4+ , NS4+

相对于当前对象内文本的字体尺寸

ex

CSS1

IE4+ , NS4+

相对于字符 “ x ” 的高度。通常为字体高度的一半

px

CSS1

IE3+ , NS4+

像素(Pixel)

绝对长度单位 Absolute Length Units

pt

CSS1

IE3+ , NS4+

点(Point)

pc

CSS1

IE3+ , NS4+

派卡(Pica)。相当于我国新四号铅字的尺寸

in

CSS1

IE3+ , NS4+

英寸(Inch)

cm

CSS1

IE3+ , NS4+

厘米(Centimeter)

mm

CSS1

IE3+ , NS4+

毫米(Millimeter)

单位换算:1in =2.54cm = 25.4 mm = 72pt = 6pc

文本:

Text-indent:length 段落的首行缩进。

Length:百分比数字|由浮点数字和单位标识符组成的长度值。允许为负值。

Text-overflow:clip| ellipsis

Clip:不显示省略标记(...),而是简单的裁切。

Ellipsis:当对象内文本溢出时显示省略标记(...)。

设置或检索是否使用一个省略标记(...)标示对象文本的溢出。

 text-overflow:ellipsis;
 overflow:hidden;
 white-space:nowrap;
 width:200px;
 background:#ccc;
 配合使用,剪去还是加上省略标记

Vertical-align: baseline | sub | super | top |text-top | middle | bottom | text-bottom | length  可以设置图片相对于文本的位置。

Baseline:将支持valign特性的对象的内容与基线对齐

Sub:垂直对齐文本的下标

Super:垂直对其文本的上标

Top:将支持valign特性的对象的内容与对象顶端对齐

Text-top:将支持valign特性的对象的文本与对象顶端对齐。

Middle:将支持valign特性的对象的内容与对象底端对齐

Bottom:将支持valign特性的对象的文本与对象底端对齐

Text-bottom:将支持valign特性的对象的文本与对象顶端对齐。

td { vertical-align : center; }

Layout-flow:horizontal | vertical-ideographicText-align:left | right | center | justify(两端对齐)

Horizontal:对象中的内容自左边流入。下一行在前一行下面。适合拉丁语系

Vertical-ideographic:对象中的内容自上而下流入,下一行在前一行左面。适合亚洲语系。

layout-flow:vertical-ideographic;


Lr|tb:左-右,上-下 Writing-mode lr-tb | td-rl

Td|rl:上-下,右-左

writing-mode:tb-rl;

Direction: ltr | rtl | inherit 用于设置文本流的方向

Ltr:文本刘从左到右

Rtl:文本刘从右到左

Inherit:文本流的值不可继承

 direction:rtl;
Unicode-bidi: normal | bidi-override | enbed

Normal:对象不打开的嵌入层,对于内联要素,隐式重排序快对象边界进行工作。

Enbed:对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序

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

 direction:rtl;
 unicode-bidi:bidi-override;

Word-break: normal | break-all | keep-all

Normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

Break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合一些非亚洲文本的亚洲文本。

Keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

设置或检索对象内文本的字内换行行为,尤其在出现多种语言时。

div {word-break : break-all; }

Line-break:normal | strict

Normal:应用日本文本的默认换行规则

Strict:强制日文文本换行规则的严谨性

White-space:normal | pre | nowrap

Normal:默认处理方式

Pre:用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

Nowrap:强制强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

white-space:normal;

Word-wrap:normal | break-word

Normal:允许内容顶开指定的容器边界

Break-word:内容将在边界内换行。如果需要,词内换行。

设置或检索当当前行超过指定容器的边界时是否断开转行。

word-wrap:word-break;

Text-autospace: none | ideograph=alpha |ideograph-numeric | ideograph-parenthesis | ideograph-space

None:无调整发生。

Ideograph-alpha:表意字和非表意字(如Latin-based,Greek,Cyrillic,Arabic,Hedbrew等)之间创建额外空格。

Ideograph-numeric:在表意字和数字之间创建额外空格。

Ideograph-parenthesis:在常规(非宽度)插入语和非表意字之间创建额外空格

Ideograph-space:当空格相邻表意字符时,扩展空格的宽度。

设置或检索对象文本的自动空格和紧缩空格宽度调整的方式。

Text-kashida-space:length

Length:百分数。标示kashida膨胀与空格膨胀的比例。为100%,仅有kashida膨胀,为0%,尽有空格膨胀。缺省为0%;

设置或检索如何拉伸字符来调节文本行排列。

Text-justify:auto|inter-word|newspaper|distribute|distribute-all-lines|inter-ideograph
auto : 允许浏览器用户代理确定使用的两端对齐法则
inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
distribute : 处理空格很像newspaper,适用于东亚文档。尤其是泰国
distribute-all-lines : 两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

 

背景:background

Background:background-color | background-image |background-repeat

Background-attachment | background-position

该属性是复合属性。

默认值:transparentnone repeat scroll 0% 0%;

 div { background: red no-repeat scroll 5% 60%; }
 body { background: url("images/aardvark.gif") repeat-y; }
 pre { background: url("images/aardvark.gif") top; }
 caption { background: fuchsia; }

Background-attachment:scroll-fixed

Scroll:背景图像是随对象内容滚动

Fixed:背景图像固定

设置背景图像是随对象内容滚动还是固定

Background-color:transparent | color

Transparent:透明色

Color:指定颜色

 p { background-color: silver }
 div { background-color: rgb(223,71,177) }
 body { background-color: #98AB6F }
 pre { background-color: transparent; }

Background-image:none | url(url)

None:无背景图

Url:使用相对或绝对路径指定图像

 code { background-image: url("comet.jpg"); }
 br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
 body { background-image: none; }

Background-position:length | length

Background-position:position | position

Length:百分数|由浮点数字和单位标识符组成的长度值

Position:top | center | bottom | left | center |right

设置或检索对象的背景图像的位置。必须先指定background-image属性

如果只指定一个值,该值匹配横坐标。纵坐标默认为50%,第二个值用于纵坐标。

Background-positionX:length | left | center | right

Length:百分数|由浮点数字和单位标识符组成的长度值

Left:居左

Center:居中

Right:居右

设置或检索对象的背景图像横坐标位置。

Background-positionY:同X.只是这个作用域纵坐标

Background-repeat:repeat | no-repeat | repeat-x |repeat-y

设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

Layer-background-color:transparent | color

Transparent:背景透明色

Color:指定颜色

设置或检索对象整个区域的背景颜色

Layer-background-image:none | url(url)

None:无背景图

Url(url):指定背景图

 

定位:positioning

Position:static | absolute | fixed | relative

Static:无特殊定位,对象遵循HTML定位规则

Absolute:将对象从文档流中拖出,使用Left,right,top,bottom等属性进行绝对定位。而其层叠通过Z-index属性定义。此时对象不具有边距,但仍有补白和边框

Relative:对象不可层叠,但将依据Left,right,top,bottom等属性在正常文档流中便宜位置。

Fixed:IE5.5与NS6暂时不支持。

 div {position:absolute;bottom:1in;left:1in;right:1in;top:1in;
 div {position:relative;top:-3px;left:6px;}

Z-index:auto | number

Auto:遵从其父对象的定位。

Number:无单位的整数值,可为负数。

检索或设置对象的层叠顺序。

Top:auto | length

Right:auto | length

Left:auto | length

Bottom:auto | length

 

尺寸:Dimensions:height| max-height | min-height | width | max-width | min-width

其中height:auto| length  width: auto | length

其他取值:none |length

 

布局:layout:clear | float |clip | overflow | overflow-x | overflow-y

Display | visibility

Clear:none | left | right | both

None:允许两边都可以有浮动对象

Both:不允许有浮动对象

Left:不允许左边有浮动对象

Right:不允许右边有浮动对象

该属性的值指出了不允许有浮动对象的边。

 div { clear : left }
 img { float: right }

Float:none | left | right

None:对象不浮动

Left:对象浮在左边

Right:对象浮在右边

该属性指出了对象是否及如何浮动。

 div { clear : right }

Clip:auto | rect(number number number number)

Auto:对象无剪切

Rect(number number number number):依据上右下左的顺序提供对象自对象左上角为(0,0)坐标计算的四个偏移数值,其中任意数值都可以用auto替换。即此边不剪切

检索和设置对象的可是区域。区域外的部分是透明的。

 div{position:absolute;width:60px;height:60px;clip:rect(0 20 50 10);}
 div{position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }

Overflow:visible | auto | hidden | scroll

Visible:不剪切内容也不添加内容。

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

Hidden:不显示超过对象尺寸的内容

Scroll:总是现实滚动条。

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

设置textarea对象的hidden值将隐藏其滚动条。

Overflow-x : visible | auto | hidden | scroll

Overflow-y : visible | auto | hidden | scroll

Display: block | none | inline | compact |inline-table | list-item | run-in | table | table-caption | table-cell |table-column |

Table-column-group | table-footer-group |table-header-group | table-row | table-row-group

block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after:before伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示

Visibility: inherit | visible | collapse | hidden

Inherit:继承上一个父对象的可见性

Visible:对象可视

Hidden:对象隐藏

Collapse:主要用来隐藏表格的行或列

设置或检索对象是否可见。与display属性不同,此对象隐藏的对象保留其占有的空间

 

外补丁:Margins

Margin:auto | length

Auto:设置为相对边的值。

Length:由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

设置或检索对象四边的外延边距

提供四个参数值:按上右下左作用于四边。

如果只提供一个,表示全部四边

如果提供两个,第一个用于上-下,第二个用于左-右

如果提供三个,一个用于上,第二个用于左-右,第三个下

 body { margin: 36pt 24pt 36pt; }
 body { margin: 11.5%; }
 body { margin: 10% 10% 10% 10%; }

Margin-top:auto | length 设置顶边的外延距

Margin-right:

Margin-bottom:

Margin-left:

 

轮廓:outlines

Outline:outline-color || outline-style ||outline-width

该属性是符合属性:

 img { outline: red }
 p { outline: double 5px }
 button { outline: #E9E9E9 double thin }

Outline-color:color | invert(使用背景色的反色)

Outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset

none : 无边框。与任何指定的outline-width值无关
dotted : 点线边框
dashed : 虚线边框
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的oueline-width
groove : 根据outline-color的值画3D凹槽
ridge : 根据outline-color的值画菱形边框
inset : 根据outline-color的值画3D凹边
outset : 根据outline-color的值画3D凸边

 

Outline-width:medium| thin| thick| length

medium : 默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位

Border边框:border-width ||border-style || border-color

该值是个复合属性。

Border-color:color

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

Border-style:none| hidden| dotted| dashed| solid|double| groove| ridge| inset| outset

none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边

 

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。

Border-width:medium | thin | thick | length

Medium:默认宽度

Thin:小于默认宽度

Thick:大于默认宽度

Length:由浮点数字和单位标识符组成的长度值。不可为负值

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。

 

Border-top: border-color || border-style ||border-color

Border-right: border-color || border-style ||border-color

Border-bottom: border-color || border-style ||border-color

Border-left: border-color || border-style ||border-color

 

内容:GeneratedContent

Include-source:url(url)

url : 使用绝对或相对地址指定插入文档。假如该文档不存在,当前对象的内容将被显示

这个属性插入另一个文档到当前文档,取代当前对象的内容。插入文档的样式属性从当前对象继承。
Quotes:none: | string

None:content的open-source和close-quote值将不会任何嵌套标记

String:用引号括起来的嵌套标记定义

设置或检索对象内使用的嵌套标记。

content : attr(alt)| counter(name)| counter(name,list-style-type)| counters(name, string)| counters(name, string,list-style-type)| no-close-quote| no-open-quote| close-quote| open-quote|string| url (url)

attr(alt) : 使用alt特性的文字
counter(name) : 使用已命名的计数器
counter(name, list-style-type) : 使用已命名的计数器并遵从指定的list-style-type属性
counters(name, string) : 使用所有已命名的计数器
counters(name, string, list-style-type) : 使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote : 并不插入quotes属性的后标记。但增加其嵌套级别
no-open-quote : 并不插入quotes属性的前标记。但减少其嵌套级别
close-quote : 插入quotes属性的后标记
open-quote : 插入quotes属性的前标记
string : 使用用引号括起的字符串
url : 使用指定的绝对或相对地址

 

counter-increment :none| identifier number

none : 阻止计数器增加
identifier number : identifier定义一个将被增加selector,id,或者class。number定义增加的数值。可以为负值。默认值是1

 

Counter-reset :none| identifier number
none : 阻止计数器复位
identifier number : 指定一个或多个复位的计数器

内补丁padding

Padding:length

检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
不允许负值。

Padding-top:length

Padding-bottom:length

Padding-right:length

Padding-left:length

 

列表:list-style: list-style-image| list-style-position | list-style-

Type

该属性是复合属性。设置列表项目相关内容。

List-style-image:none | url(url)

设置或检索作为对象的列表项标记的图像。

List-style-position:outside | inside

Outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐

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

设置或检索作为对象的列表项标记如何根据文本排列。
List-style-type:disc| circle| square| decimal| lower-roman| upper-

roman| lower-alpha| upper-alpha| none| armenian|cjk-ideographic| georgian| lower-greek| hebrew| hiragana| hiragana-iroha|katakana| katakana-iroha| lower-latin| upper-latin

disc : CSS1 实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic : CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek : CSS2 基本的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha : CSS2 日文平假名序号
katakana : CSS2 日文片假名字符
katakana-iroha : CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母

 

Marker-offset:auto|length

Auto:浏览器自动设置间距

Length:由浮点数字和单位标识符组成的长度值。可为负值

 

表格:table

Border-collapse:separate(边框独立) | collapse

Rtl:相邻边被合并

设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

 

Border-spacing:length || length

length由浮点数字和单位标识符组成的长度值。不可为负值

设置或检索当表格边框独立(例如当border-collapse属性等于separate时),行和单元格的边框在横向和纵向上的间距。

Caption-side:bottom | left | right | top

设置或检索表格的caption对象是在表格的那一边。它是和caption对象一起使用的属性。

 table caption { caption-side: top; width: auto; text-align: left; }

  Empty-cells:hide | show

设置或检索当表格的单元格无内容时,是否显示该单元格的边框。

Table-layout:auto | fixed

auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

 

滚动条:Scrollbar

scrollbar-3d-light-color :color
设置或检索滚动条亮边框颜色。
scrollbar-highlight-color :color
设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色。
scrollbar-face-color :color

设置或检索滚动条3D表面(ThreedFace)的颜色。
scrollbar-arrow-color :color

设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时,此属性失效。
scrollbar-shadow-color :color

设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。

scrollbar-dark-shadow-color :color

设置或检索滚动条暗边框(ThreedDarkShadow)颜色。
scrollbar-base-color :color

设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。

 

打印:printing

Page:auto | pagetype

Auto:参照当前的默认页面

Pagetype:指定@page规则的页面页面类型

检索或指定显示对象容器时使用的页面类型(pagetype)。

page-break-after :auto| always| avoid| left| right|null
auto : 假如需要在对象之后插入页分割符
always : 始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right : 在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置

检索或设置对象后出现的页分割符。

 

page-break-before :auto| always| avoid| left|right| null

auto : 假如需要在对象之前插入页分割符
always : 始终在对象之前插入页分割符
avoid : 避免在对象前面插入页分割符
left : 在对象前面插入页分割符直到它到达一个空白的左页边
right : 在对象前面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
检索或设置对象前出现的页分割符。

 

page-break-inside :auto| avoid

auto : 假如需要在对象容器中插入页分割符
avoid : 使当前对象容器中禁止插入页分割符
检索或设置对象容器中出现的页分割符。

marks :none| crop|| cross

none : 无页标记出现
crop : 在页面将会被裁切处指定切割标记
cross : 指定交叉线标记用来供页面对齐

印刷业的印刷文档通常在页面内容区域外带有一些标记,用来校正和调整所有的页面。此属性用来设置或检索什么样的标志是应该在页容器外边被给予。

 

orphans :number

设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量。

 

size :auto| portrait| landscape| length

auto : 指定为适应目标纸张尺寸和方向的relative页面容器
portrait : 指定为适应目标纸张尺寸和方向的relative页面容器,不理会目标页的当前缺省的内容方向,使用文档流从左到右短距离跨越,向下长距离跨越的典型范例(纵向方式)
landscape : 指定为适应目标纸张尺寸和方向的relative页面容器,不理会目标页的当前缺省的内容方向,使用横向方式
length : 由浮点数字和单位标识符组成的长度值。

检索或指定页面规格的调整。它把页面容器归类为absolute和relative两种。absolute页面有固定的尺寸。relative页面容器将会调整适应目标纸张的尺寸。

widows :number

number : 无单位整数。不可为负值
检索或指定一定要留在页面顶部的行数。

 

鼠标:

cursor :auto| crosshair| default| hand| move| help|wait| text| w-resize|s-resize| n-resize|e-resize| ne-resize|sw-resize|se-resize| nw-resize|pointer| url (url)

 p { cursor: text; }
 a { cursor: pointer; }
 body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }

  zoom :normal| number

normal : 使用对象的实际尺寸
number : 百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值

设置或检索对象的缩放比例。

伪类:Pseud0-Classes

:link设置a未被访问前的样式。

:hover设置对象在器鼠标悬停时样式

:active对象被用户激活。

:visited设置a对象在其链接地址已被访问过时的

:focus设置对象在成为输入焦点

:first-letter设置对象内的第一个字符的样式

:first-line设置第一行

:first-child第一个子对象

:first设置容器第一页使用的样式表

:left设置页面容器位于装订线左边的所有页面

:right设置页面容器位于装订线右边的所有页面

:lang设置对象使用特殊语言的内容

 

伪对象:Pseudo-Elements

:before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。

:after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

 

规则:At-Rules

@import url(url) sMedia;

使用绝对或相对地址指定导入的外部样式表文件。

sMedia:指定设备类型。

指定导入的外部样式表及目标设备类型。

 

该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
用此规则导入的样式表,其owningElement特性是一个link对象或style对象。请参阅我的其他著作。
导入的外部样式表中的定义将被文当中的同名定义覆盖。

 @import url("foo.css") screen, print;
 @import "print.css"
 

Media Type
设备类型

CSS Version
版本

Compatibility
兼容性

Description
简介

all

CSS2

IE4+

用于所有设备类型

aural

CSS2

NONE

用于语音和音乐合成器

braille

CSS2

NONE

用于触觉反馈设备

embossed

CSS2

NONE

用于凸点字符(盲文)印刷设备

handheld

CSS2

NONE

用于小型或手提设备

print

CSS2

IE4+

用于打印机

projection

CSS2

NONE

用于投影图像,如幻灯片

screen

CSS2

IE4+

用于计算机显示器

tty

CSS2

NONE

用于使用固定间距字符格的设备。如电传打字机和终端

tv

CSS2

NONE

用于电视类设备

 

CSS Angle Units Reference 角度单位

Angle Units
角度单位

CSS Version
版本

Compatibility
兼容性

Description
简介

deg

CSS2

NONE

度。一个圆圈的360等分之一

grad

CSS2

NONE

梯度。一个直角的100等分之一。一个圆圈相当于400grad

rad

CSS2

NONE

弧度。把一个圆圈分成2*PI单位

 

 


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wiksys

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值