CSS属性集合
程序员文章站
2022-05-17 18:26:22
...
CSS所有属性的集合
CSS属性大全[说明加语法]
相关标签:
字体样式(Font Style)
CSS属性大全[说明加语法]
相关标签:
字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit|
medium| large| larger| x-large| xx-large|
small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|
inherit|narrower|normal|
semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|
baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|
double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽 度 {width:长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分类列表
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|
upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|
nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS样式二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xml:lang="en" xmlns="">
<head>
<title>脚本控制三行三列自适应高度DIV布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
/*
------------------------------------------------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
Version: 1.5.0
------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;
if(dA&&dA.length){
for(i=0;i<dA.length;i++){
dA[i].style.height='auto';
}
for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h) oh:h;
}
for(i=0;i<dA.length;i++){
if(an){
dA[i].style.height=h+'px';
}else{
P7_eqA(dA[i].id,dA[i].offsetHeight,h);
}
}
if(an){
for(i=0;i<dA.length;i++){
hh=dA[i].offsetHeight;
if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';
}
}
}else{
document.p7eqa=1;
}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;
}
}
function P7_eqT(){ //v1.5 by PVII-
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();
}
}
function P7_equalCols(){ //v1.5 by PVII-
if(document.getElementById){
document.p7eqc=new Array;
for(i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);
}
setInterval("P7_eqT()",10);
}
}
function P7_eqA(el,h,ht){ //v1.5 by PVII-
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch) ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT) adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
if(nh<adT){
setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
}
}
</script>
<style type="text/css">
body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%;
PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
#header {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#mid {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#header {
BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
}
h3 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
h5 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
#fbox {
BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
}
#mbox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px;
WIDTH: 360px; PADDING-TOP: 0px
}
#sbox {
BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
}
p {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em;
LINE-HEIGHT: 130%; PADDING-TOP: 10px
}
#footer {
CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
}
</style>
<meta content="MSHTML 6.00.2800.1515" name="GENERATOR" />
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header">
<h3>脚本控制三行三列自适应高度DIV布局</h3>
</div>
<div id="mid">
<div id="fbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；
拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；
拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
<div id="mbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；
拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows
下的IE却不能。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；
拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows
下的IE却不能。 </p>
</div>
<div id="sbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；
拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
</div>
<div id="footer">
<h5>仅供演示WWW.AA25.CN</h5>
</div>
</body>
</html>
CSS样式 中国站长站头部导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国站长站 - 站长资讯 | 我们致力于为中文网站提供动力！</title>
<meta name="Keywords" content="站长,网站,资讯,站长网,站长资讯,站长工具" />
<meta name="Description" content="为站长提供及时全面的站长资讯" />
<link text/css" rel="stylesheet" />
<script type="text/javascript">
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
function ResumeError() {
return true;
}
window.onerror = ResumeError;
function $(id) {
return document.getElementById(id);
}
// 相对尺寸
function GetOffsetTop (el, p) {
var _t = el.offsetTop;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_t += _p.offsetTop;
_p = _p.offsetParent;
}
return _t;
};
function GetOffsetLeft (el, p) {
var _l = el.offsetLeft;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_l += _p.offsetLeft;
_p = _p.offsetParent;
}
return _l;
};
function showMenu (baseID, divID) {
baseID = $(baseID);
divID = $(divID);
//var l = GetOffsetLeft(baseID);
//var t = GetOffsetTop(baseID);
//divID.style.left = l + 'px';
// divID.style.top = t + baseID.offsetHeight + 'px';
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
function doClick_down(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=4;i++){
id ="down"+i;
j = document.getElementById(id);
e = document.getElementById("d_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doClick_jy(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=8;i++){
id ="jy"+i;
j = document.getElementById(id);
e = document.getElementById("jy_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doZoom(size){
document.getElementById('textbody').style.fontSize=size+'px'
}
/// 修改及新增
function doClick_menu (o) {
o.className = 'menu_gg';
var j, id, e;
for (var i = 1; i <= 11; i++) {
id = 'menu' + i;
j = document.getElementById(id);
e = document.getElementById('menu_con' + i);
if (id != o.id) {
j.className = '';
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
var url = '';
switch (o.innerHTML) {
case '资讯':
url = '/plus/search.php searchtype=titlekeyword&keyword=';
break;
case '源码':
url = ' q=';
break;
case '软件':
url = ' q=';
break;
case '论坛':
url = ' mode=1&searchText=';
break;
case '博客':
url = ' selecttype=topic&keyword=';
break;
case '交易':
url = ' keyword=';
break;
case 'GOOGLE':
url = '/uploadfile/200812/2/C4141448514.gif%3BLH%3A60%3BLW%3A165%3BBGC%3Awhite%
3BT%3A%23000000%3BLC%3A%230000cc%3BVLC%3A%23551A8B%3BALC%3A%23ff3300%3BGALT%3A%
23008000%3BGFNT%3A%237777CC%3BGIMP%3A%23FF0000%3BDIV%3A%23000099%3BLBGC%3Awhite
%3BAH%3Aleft%3B&domains=chinaz.com&sitesearch=chinaz.com&q=';
break;
case 'ALEXA':
url = ' domain=';
break;
case 'IP归属':
url = ' ip=';
break;
case 'Whois':
url = '';
break;
case '素材':
url = 'x page=1&SearchWord=';
break;
}
doClick_submit.url = url;
}
doClick_submit.url = '/plus/search.php searchtype=titlekeyword&keyword=';
function doClick_submit () {
var keyword = document.getElementsByName('keyword')[0].value;
window.open(doClick_submit.url + keyword);
}
window.onload = function (){
var keyword = document.getElementsByName('keyword')[0];
keyword.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
doClick_submit();
}
};
}
</script>
</head>
<body>
<div>
<div>
<div>
<ul>
<li$amp;>amp;$lt;a >首页</a$amp;>amp;$lt;/li>
<li$amp;>amp;$lt;a id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>
<div class="subnav disable" id="subnav1">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >业界动态</a> |
<a >收购融资</a> |
<a >门户动态</a> |
<a >搜索引擎</a> |
<a >网络游戏</a> |
<a >电子商务</a> |
<a >广告传媒</a> |
<a >厂商开发</a>
</span$amp;>amp;$lt;/p>
</div$amp;>amp;$nbsp;
</li>
<li$amp;>amp;$lt;a id="nav_2" onmouseover="showMenu('nav_2','subnav2')">站长在线</a>
<div class="subnav disable" id="subnav2">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >好站推荐</a> |
<a >站长聚会</a> |
<a >站长访谈</a> |
<a >站长茶馆</a> |
<a >网站排行</a>
</span$amp;>amp;$lt;/p>
</div>
</li>
<li$amp;>amp;$lt;a id="nav_3" onmouseover="showMenu('nav_3','subnav3')">网站运营</a>
<div class="subnav disable" id="subnav3">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >建站经验</a> |
<a >策划盈利</a> |
<a >搜索优化</a> |
<a >网站推广</a> |
<a >免费资源</a>
</span$amp;>amp;$lt;/p>
</div$amp;>amp;$nbsp;
</li>
<li$amp;>amp;$lt;a id="nav_4" onmouseover="showMenu('nav_4','subnav4')">设计在线</a>
<div class="subnav disable" id="subnav4">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >酷站推荐</a> |
<a >网页设计</a> |
<a >WEB标准</a> |
<a >视频处理</a> |
<a >设计活动</a>
</span$amp;>amp;$lt;/p>
</div$amp;>amp;$nbsp;
</li>
<li$amp;>amp;$lt;a id="nav_5" onmouseover="showMenu('nav_5','subnav5')">网络编程</a>
<div class="subnav disable" id="subnav5">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >Asp编程</a> |
<a >Php编程</a> |
<a >.Net编程</a> |
<a >Xml编程</a> |
<a >Access</a> |
<a >Mssql</a> |
<a >Mysql</a>
</span$amp;>amp;$lt;/p>
</div$amp;>amp;$nbsp;
</li>
<li$amp;>amp;$lt;a id="nav_6" onmouseover="showMenu('nav_6','subnav6')">联盟资讯</a>
<div class="subnav disable" id="subnav6">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >联盟新闻</a> |
<a >联盟介绍</a> |
<a >联盟点评</a> |
<a >网赚技巧</a>
</span$amp;>amp;$lt;/p>
</div>
</li>
<li$amp;>amp;$lt;a id="nav_7" onmouseover="showMenu('nav_7','subnav7')">服务器</a>
<div class="subnav disable" id="subnav7">
<p>.</p>
<p$amp;>amp;$lt;span>
<a >Web服务器</a> |
<a >Ftp服务器</a> |
<a >Mail服务器</a> |
<a >Dns服务器</a> |
<a >Win服务器</a> |
<a >Linux服务器</a> |
<a >安全防护</a>
</span$amp;>amp;$lt;/p>
</div$amp;>amp;$nbsp;
</li>
</ul>
</div$amp;>amp;$nbsp;
</div>
</div>
</body>
</html>
以上就是CSS属性集合的内容，更多相关内容请关注PHP中文网（www.php.cn）！