可以使用该属性改变原本的标签外观。
设置或检索外观按照本地默认样式。
appearance: none | button | button-bevel ....;(110个参数)
所有主流浏览器都不支持appearance属性。
要使用必须加前缀。
FireFox2+(-moz-)、chrome4+(-webkit-)、Safari6+(-webkit-)、Opera15+(-webkit-)、
只能改变外观,不能改变功能。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div.none>input{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
div.checkbox>input{
-webkit-appearance:checkbox;
-moz-appearance:checkbox;
appearance:checkbox;
}
div.searchfield-cancel-button>input{
-webkit-appearance:searchfield-cancel-button;
-moz-appearance:searchfield-cancel-button;
appearance:searchfield-cancel-button;
}
div.sliderthumb-horizontal>input{
-webkit-appearance:sliderthumb-horizontal;
-moz-appearance:sliderthumb-horizontal;
appearance:sliderthumb-horizontal;
}
div.sliderthumb-vertical>input{
-webkit-appearance:sliderthumb-vertical;
-moz-appearance:sliderthumb-vertical;
appearance:sliderthumb-vertical;
}
style>
head>
<body>
<h3>appearance:noneh3>
<div class="none">
<input type="text">
div>
<hr>
<h3>appearance:checkboxh3>
<div class="checkbox">
<input type="text">
div>
<hr>
<h3>appearance:searchfield-cancel-buttonh3>
<div class="searchfield-cancel-button">
<input type="text">
div>
<hr>
<h3>appearance:sliderthumb-horizontalh3>
<div class="sliderthumb-horizontal">
<input type="text">
div>
<hr>
<h3>appearance:sliderthumb-verticalh3>
<div class="sliderthumb-vertical">
<input type="text">
div>
body>
html>
特别注意,这里改变的只是外观,并不具备对应的功能,实际本体还是原来的那个,就例如单选框点击是不会选中的。
当块容器<’overflow’>为非visible时(一般是hidden),定义内联内容溢出其块容器是否截断。
text-overflow:clip | ellipsis
该属性一般配合块级元素的
overflow:hidden;
white-space:nowrap;强制不换行。
这两个属性使用。
要text-overflow有效果,需要添加一个overflow属性,设置为非visible的参数,否则无意义。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
ul>li>p{
overflow: hidden;
white-space: nowrap;
width: 200px;
border: 1px solid #000;
}
ul>li.clip>p{
text-overflow: clip;
}
ul>li.elipsis>p{
text-overflow: ellipsis;
}
style>
head>
<body>
<ul>
<li class="clip">
<h3>clip:溢出的文字会被裁剪h3>
<p>苟利国家生死以,起义祸福避趋之!p>
li>
<li class="elipsis">
<h3>elipsis:将溢出的文字以(...)显示h3>
<p>苟利国家生死以,起义祸福避趋之!p>
li>
ul>
body>
html>
合属性,设置或检索对象外的线条轮廓。画在border外面,不占据布局空间,不影响元素尺寸;outlines可能是非矩形;其实就是border之外的一圈边框,是包括在margin中的,但不占用任何空间,不影响容器的大小。可以和其他元素重叠在一起。
outline:<'outline-width'> || <'outline-style'> || <'outline-color'>
参数说明:指定轮廓边框的宽度,样式和颜色。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div.main{
width: 300px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid #000;
outline: 20px solid #F00;
}
style>
head>
<body>
<div class="main">
红色的是轮廓
黑色的是边框
div>
body>
html>
outline-width属性:设置或检索对象外的线条轮廓的宽度。
语法:outline-width: | thin | medium | thick;
参数说明:: 用长度值来定义轮廓的厚度,不允许负值;medium:定义默认宽度的轮廓;thin:定义比默认宽度细的轮廓;thick:定义比默认宽度粗的轮廓。自己设置比较好。
outline-color属性:设置或检索对象外的线条轮廓的颜色。
语法:outline-color: | invert;
参数说明:: 指定颜色;invert:使用背景色的反色(仅ie和opera有效)
outline-style属性:设置或检索对象外的线条轮廓的样式。
语法:outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset;
参数说明:无轮廓 | 点状轮廓 | 虚线轮廓 | 实线轮廓 | 双线轮廓 | 3d凹槽 | 3d凸槽 | 3d凹边 | 3d凸边。
注意该属性不是outline的子属性。
设置或检索对象外的线条轮廓偏移容器的值。其实就是设置outline和border之间的空隙距离。border的外边到outline的内边。
outline-offset:<length>
outline-offset的妙用,实现红十字的标志。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
/*此处写代码*/
background:white;
width:200px;
height:200px;
margin:200px auto;
border:1px solid red;
outline:70px solid red;
outline-offset:-155px;
}
style>
head>
<body>
<div>div>
body>
html>
nav-index属性:设置或检索对象的导航顺序。
语法:nav-index:auto | ;
参数:auto:元素的导航焦点顺序由客户端自动分配;:用浮点数来定义元素的导航焦点顺序,若某元素的该值等于1则意味着该元素最先被导航,当若干个元素的nav-index值相同时,则按照文档的先后顺序进行导航。
主流浏览器都不支持。
nav-up设置或检索对象的导航方向
语法:
nav-up:auto|[current|root|]
auto:默认顺序;:被导航元素的id;,target-name>:框架目标页面间的元素焦点导航。
该属性也有被w3c标准移除的风险。
上右下左nav-up,nav-right,nav-down,nav-left。
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标的形状。
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>cursortitle>
<style>
.test { width: 400px; border-collapse: collapse; font: 14px/1.5 georgia, arial, serif, sans-serif; }
.test td { padding: 2px 10px; border: 1px solid #ddd; }
.test td:hover { background: #eee; }
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-resize; }
.ew-resize { cursor: ew-resize; }
.ns-resize { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.all-scroll { cursor: all-scroll; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.url { cursor: url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer; }
style>
head>
<body>
<table class="test">
<caption>cursor光标类型caption>
<tbody>
<tr>
<td class="auto">autotd>
<td class="default">defaulttd>
<td class="none">nonetd>
<td class="context-menu">context-menutd>
<td class="help">helptd>
<td class="pointer">pointertd>
<td class="progress">progresstd>
tr>
<tr>
<td class="wait">waittd>
<td class="cell">celltd>
<td class="crosshair">crosshairtd>
<td class="text">texttd>
<td class="vertical-text">vertical-texttd>
<td class="alias">aliastd>
<td class="copy">copytd>
tr>
<tr>
<td class="move">movetd>
<td class="no-drop">no-droptd>
<td class="not-allowed">not-allowedtd>
<td class="e-resize">e-resizetd>
<td class="n-resize">n-resizetd>
<td class="ne-resize">ne-resizetd>
<td class="nw-resize">nw-resizetd>
tr>
<tr>
<td class="s-resize">s-resizetd>
<td class="se-resize">se-resizetd>
<td class="sw-resize">sw-resizetd>
<td class="w-resize">w-resizetd>
<td class="ew-resize">ew-resizetd>
<td class="ns-resize">ns-resizetd>
<td class="nesw-resize">nesw-resizetd>
tr>
<tr>
<td class="nwse-resize">nwse-resizetd>
<td class="col-resize">col-resizetd>
<td class="row-resize">row-resizetd>
<td class="all-scroll">all-scrolltd>
<td class="url">urltd>
<td class="zoom-in">zoom-intd>
<td class="zoom-out">zoom-outtd>
tr>
tbody>
table>
body>
html>
设置或检索对象的缩放比例。
zoom:normal | <number> | <percentage>
设置或检索对象的和模型组成模式。
box-sizing:border-box | content-box;
设置或检索对象的区域是否允许缩放,调节元素尺寸大小。(也就是拖拽div右下角的边框)
resize:none | both | horizontal | vertical;
ps:放大的原理就是使用更高级的行内样式去改变原始的样式。
设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。(就是用点击输入框,自动唤醒输入法)
语法:auto | normal | active | inacive | disabled;
参数:auto:不影响IME(input method editor)的状态;normal:正常的IME状态;active:指定所有使用ime输入的字符,即激活本地语言输入法,用户仍可以撤销激活ime;inactive:指定所有不适用ime输入的字符,即激活非本地语言,用户仍可以撤销激活ime;disabled:完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime。
用途不大。建议大家实际中不要使用
设置或检索是否允许用户选中文本。
user-select:none | text | all | element;
该属性能取消超链接的默认事件
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pointer-eventstitle>
<style type="text/css">
.auto { pointer-events: auto; }
.none { pointer-events: none; }
style>
head>
<body>
<h1>pointer-events: auto;h1>
<a href="http://www.5566.net" class="auto">autoa>
<h1>pointer-events: none;点击超链接不会跳转h1>
<a href="http://www.5566.net" class="none">nonea>
body>
html>