CSS属性集合
css
CSS所有属性的集合
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）！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
bootstrap怎么看日期
Apr 07, 2025 pm 03:03 PM
答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。
bootstrap日期怎么验证
Apr 07, 2025 pm 03:06 PM
在 Bootstrap 中验证日期，需遵循以下步骤：引入必需的脚本和样式；初始化日期选择器组件；设置 data-bv-date 属性以启用验证；配置验证规则（如日期格式、错误消息等）；集成 Bootstrap 验证框架，并在表单提交时自动验证日期输入。
bootstrap导航栏怎么设置
Apr 07, 2025 pm 01:51 PM
Bootstrap 提供了设置导航栏的简单指南：引入 Bootstrap 库创建导航栏容器添加品牌标识创建导航链接添加其他元素（可选）调整样式（可选）
