社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > CSS屬性集合

CSS屬性集合

PHP中文网
發布： 2016-09-06 08:43:43
原創
1467 人瀏覽過

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}
登入後複製

分類列表 二長站頭部導航
 

<!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）！



相關標籤：
css
來源：php.cn
上一篇：HTML學習開篇 下一篇：HTML5新增功能
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1335
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板