CSS屬性集合-html教學-PHP中文網

首頁

web前端

html教學

CSS屬性集合

PHP中文网

Sep 06, 2016 am 08:43 AM

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:数值&#124;inherit&#124; 
                 medium&#124; large&#124; larger&#124; x-large&#124; xx-large&#124; 
                 small&#124; smaller&#124; x-small&#124; xx-small}  
4 　　字体风格　{font-style:inherit&#124;italic&#124;normal&#124;oblique}  
5 　　字体粗细　{font-weight:100-900&#124;bold&#124;bolder&#124;lighter&#124;normal;}  
6 　　字体颜色　{color:数值;} 
7 　　阴影颜色　{text-shadow:16位色值} 
8 　　字体行高  {line-height:数值&#124;inherit&#124;normal;} 
9 　　字 间 距　{letter-spacing:数值&#124;inherit&#124;normal} 
10　　单词间距　{word-spacing:数值&#124;inherit&#124;normal} 
11　　字体变形　{font-variant:inherit&#124;normal&#124;small-cps }  
12　　英文转换　{text-transform:inherit&#124;none&#124;capitalize&#124;uppercase&#124;lowercase} 
13　　字体变形　{font-size-adjust:inherit&#124;none}  
14　　字体　　　{font-stretch:condensed&#124;expanded&#124;extra-condensed&#124;extra-expanded&#124;
                 inherit&#124;narrower&#124;normal&#124; 
                 semi-condensed&#124;semi-expanded&#124;ultra-condensed&#124;ultra-expanded&#124;wider}

登入後複製

文本樣式(Text Style)

序号　中文说明　标记语法 
1 　　行 间 距　{line-height:数值&#124;inherit&#124;normal;}  
2 　　文本修饰　{text-decoration:inherit&#124;none&#124;underline&#124;overline&#124;line-through&#124;blink} 
3 　　段首空格　{text-indent:数值&#124;inherit} 
4 　　水平对齐　{text-align:left&#124;right&#124;center&#124;justify}  
5 　　垂直对齐　{vertical-align:inherit&#124;top&#124;bottom&#124;text-top&#124;text-bottom&#124;
                  baseline&#124;middle&#124;sub&#124;super}  
6 　　书写方式　{writing-mode:lr-tb&#124;tb-rl}

登入後複製

背景樣式

序号　中文说明　标记语法 
1 　　背景颜色　{background-color:数值} 
2 　　背景图片　{background-image: url(URL)&#124;none} 
3 　　背景重复　{background-repeat:inherit&#124;no-repeat&#124;repeat&#124;repeat-x&#124;repeat-y} 
4 　　背景固定　{background-attachment:fixed&#124;scroll} 
5 　　背景定位　{background-position:数值&#124;top&#124;bottom&#124;left&#124;right&#124;center} 
6 　　背影样式　{background:背景颜色&#124;背景图象&#124;背景重复&#124;背景附件&#124;背景位置}

登入後複製

框架樣式(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&#124;medium&#124;thick&#124;数值 
4 　　边框颜色　{border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值 
5 　　边框风格　{border-style:none&#124;hidden&#124;inherit&#124;dashed&#124;solid&#124;
double&#124;inset&#124;outset&#124;ridge&#124;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:长度&#124;百分比&#124; auto} 
8 　　高　　度　{height:数值&#124;auto} 
9 　　漂　　浮　{float:left&#124;right&#124;none} 
10　　清　　除　{clear:none&#124;left&#124;right&#124;both}

登入後複製

分類列表

1 　　控制显示　{display:none&#124;block&#124;inline&#124;list-item} 
2 　　控制空白　{white-space:normal&#124;pre&#124;nowarp} 
3 　　符号列表　{list-style-type:disc&#124;circle&#124;square&#124;decimal&#124;lower-roman&#124;
                  upper-roman&#124;lower-alpha&#124;upper-alpha&#124;none} 
4 　　图形列表　{list-style-image:URL} 
5 　　位置列表　{list-style-position:inside&#124;outside} 
6 　　目录列表　{list-style:目录样式类型&#124;目录样式位置&#124;url} 
7 　　鼠标形状　{cursor:hand&#124;crosshair&#124;text&#124;wait&#124;move&#124;help&#124;e-resize&#124;
                  nw-resize&#124;w-resize&#124;s-resize&#124;se-resize&#124;sw-resize}

登入後複製

分類列表二長站頭部導航

<!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=&#39;auto&#39;;
    }
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+&#39;px&#39;;
   }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))+&#39;px&#39;;
  }
   }
}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+&#39;px&#39;;
  oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+&#39;px&#39;;}
  if(nh<adT){
    setTimeout("P7_eqA(&#39;"+el+"&#39;,"+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(&#39;fbox&#39;,&#39;mbox&#39;,&#39;sbox&#39;)">
<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屬性集合的內容，更多相關內容請關注PHP中文網（www.php.cn）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn