CSS3用户界面复习与整理

CSS3用户界面 1-1 appearance

appearance属性:设置或检索外观按照本地默认样式。

语法: appearance: none | button | button-bevel ....;(110个参数。。)

所有主流浏览器都不支持appearance属性。 只能改变外观,不能改变功能。

CSS3用户界面 1-3 text-overflow

text-overflow属性:当块容器<'overflow'>为非visible时,定义内联内容溢出其块容器是否截断。

语法:text-overflow:clip | ellipsis

参数说明:clip:当内联内容溢出块容器时,将溢出部分裁切掉(字都可以切成一半。);

ellipsis:当内联内容溢出块容器时,将溢出部分替换为(。。。)。

 

white-space:nowrap;强制不换行。

要text-overflow有效果,需要添加一个overflow属性,设置为非visible的参数,否则无意义。

CSS3用户界面 1-5 outline

outline属性:复合属性,设置或检索对象外的线条轮廓。

画在border外面,不占据布局空间,不影响元素尺寸;

outlines可能是非矩形;其实就是border之外的一圈边框,是包括在margin中的,但不占用任何空间。可以和其他元素重叠在一起。

语法:outline:<'outline-width'> || <'outline-style'> || <'outline-color'>

参数说明:指定轮廓边框的宽度,样式和颜色。

outline-width属性:设置或检索对象外的线条轮廓的宽度。 语法:outline-width: <length> | thin | medium | thick;

参数说明:<length>: 用长度值来定义轮廓的厚度,不允许负值;medium:定义默认宽度的轮廓;thin:定义比默认宽度细的轮廓;thick:定义比默认宽度粗的轮廓。自己设置比较好。

outline-color属性:设置或检索对象外的线条轮廓的颜色。 语法:outline-color: <color> | invert;

参数说明:<color>: 指定颜色;invert:使用背景色的反色(仅ie和opera有效)

outline-style属性:设置或检索对象外的线条轮廓的样式。 语法:outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset;

参数说明:无轮廓 | 点状轮廓 | 虚线轮廓 | 实线轮廓 | 双线轮廓 | 3d凹槽 | 3d凸槽 | 3d凹边 | 3d凸边。

outline-offset属性:设置或检索对象外的线条轮廓偏移容器的值。其实就是设置outline和border之间的空隙距离。border的外边到outline的内边。

语法:outline-offset:<length> 参数说明:<length>:用长度值来定义轮廓偏移,允许负值。

CSS3用户界面 1-7 nav-index

nav-index属性:设置或检索对象的导航顺序。

语法:nav-index:auto | <number>;

参数:auto:元素的导航焦点顺序由客户端自动分配;<number>:用浮点数来定义元素的导航焦点顺序,若某元素的该值等于1则意味着该元素最先被导航,当若干个元素的nav-index值相同时,则按照文档的先后顺序进行导航。

主流浏览器都不支持。

 

nav-up设置或检索对象的导航方向

语法: nav-up:auto|<id>[current|root|<target-name>]

auto:默认顺序;

<id>:被导航元素的id;

<target-name>:框架目标页面间的元素焦点导航。

该属性也有被w3c标准移除的风险。 上右下左nav-up,nav-right,nav-down,nav-left。

CSS3用户界面 1-8 cursor

cursor属性:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标的形状。 语法:cursor: 参数:

CSS3用户界面 1-10 zoom

zoom属性:设置或检索对象的缩放比例。

语法:zoom:normal | <number> | <percentage>

参数说明:

normal:使用对象的实际尺寸;

<number>:用浮点数来定义缩放比例,不允许负值;

<percentage>: 用百分比来定义缩放比例,不允许负值。以左上角为基点做缩放。 先缩放后布局,可能影响到盒子的计算 

CSS3用户界面 1-14 resize

resize属性:设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。

语法:resize:none | both | horizontal | vertical;

参数:

none:不允许用户调整元素大小;

both:用户可以调节元素的宽度和高度;

horizontal:用户可以调节元素的宽度;

vertical:用户可以调节元素的高度。 用resize只能拉大,不能缩小。

需要设置元素的 overflow 属性(值可以是 auto、hidden 或 scroll)resize属性才会生效,这是resize属性的规则。

 

CSS3用户界面 1-16 ime-mode

ime-mode属性:设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。

语法:auto | normal | active | inacive | disabled;

参数:

auto:不影响IME(input method editor)的状态;

normal:正常的IME状态;

active:指定所有使用ime输入的字符,即激活本地语言输入法,用户仍可以撤销激活ime;

inactive:指定所有不适用ime输入的字符,即激活非本地语言,用户仍可以撤销激活ime;

disabled:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime。

用途不大。建议大家实际中不要使用

CSS3用户界面 1-18 user-select

user-select属性:设置或检索是否允许用户选中文本。

语法:user-select:none | text | all | element;

参数:

none:文本不能被选择;

text:可以选择文本;

all:当所有内容作为一个整体时可以被选择,如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素;

element:可以选择文本,但选择范围受元素边界的约束。

CSS3用户界面 1-19 pointer-events

pointer-events属性:设置或检索在何时成为属性事件的target

语法:pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

参数:

auto(默认):与pointer-events属性改为制定时的表现效果相同,在svg内容上与visiblepainted值相同;

none:元素永远不会成为鼠标事件的target(有链接的话也不会跳转,鼠标也不会发生变化,一切和鼠标有关的事件都不会在这个元素上发生);

其他值只能应用在svg上。

猜你喜欢

转载自www.cnblogs.com/zhonghonglin1997/p/9690004.html
今日推荐