AnyFo - CSS 九阳神功——实用的开发笔记收藏

来源：互联网发布：windows 10 64位32位编辑：程序博客网时间：2024/06/11 06:45

以下文档来自Anyfo开源组织http://www.anyfo-life.com/ ，版权归Anyfo开源组织所有，这里仅用于收藏，方便在线查阅。

文字排版美化的Doc文档版请到官方网站下载或者到http://download.csdn.net/source/941529 下载，不需要积分！

AnyFo – CSS 九阳神功

“九阳神功，的‘阳’，就是‘阳痿’的‘阳’……”

主编：安坤
版本：V.080428

1 总体控制

1.1 透明效果
filter:alpha(opacity=100);
注意：只支持IE;

2 文字控制

2.1 字体
body {
font-family: 黑体, 幼园;
}
2.2 大小
body {
font-family: 黑体, 幼园;
font-size: 24pt;
}
2.3 颜色
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
}
2.4 粗细
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold; //可选100到900，或bold表示加到最粗900
}
2.5 斜体
body {
font-family: 黑体, 幼园;
font-size: 24pt;
color: red;
font-weight: bold;
font-style: italic;
}
2.6 线条
2.6.1 下划线
text-decoration: underline;
2.6.2 顶画线
text-decoration: overline;
2.6.3 删除线
text-decoration: line-through;
2.7 字母
2.7.1 单词首字母大写
text-transform: capitalize;
2.7.2 单词所有字母大写
text-transform: uppercase;
2.7.3 单词所有字母小写
text-transform: lowercase;
2.7.4 字母间距
letter-spacing: 10px;
2.8 与右边的距离
padding-right: 10px;
2.9 首字下沉
2.9.1.1 HTML
<p><span>首</span>好阿斗发缩短发送毒发</p>
2.9.1.2 CSS
p span {
float: left;
font-size: 80pt;
}

3 图片

3.1 背景图片
3.1.1 显示背景图片
background-image: url(User.jpg);
3.1.2 背景图片的重复
background-repeat: repeat-x; 横向排列
background-repeat: repeat-y; 纵向排列
background-repeat: no-repeat; 不重复
background-repeat: repeat; 平铺
3.1.3 背景图片的位置
background-repeat: no-repeat;
background-position: center;
3.1.4 固定背景图片的位置比例
background-attachment: fixed;

4 DIV

4.1 盒子模型

4.2 相对定位
float: left;
4.3 绝对定位
position: absolute;
left: 100px;
top: 30px;
4.4 取消定位
clear: both;
4.5 固定宽度且居中
4.5.1 HTML
<body>
<div class="container">
    <div>
        <div class="d1">Hello </div>
          <div class="d1">Eric </div>
            <div class="d2">Eric </div>
          <div class="d3">Eric </div>
      </div>
</div>
</body>
4.5.2 CSS
body {
text-align: center; //居中
}

.container {
position: relative;
margin-left: auto;
margin-right: auto; //自动居中
width: 600px; //固定宽度
}

5 Table

5.1 位置
5.1.1 靠顶对齐方式
5.1.1.1 HTML
<tr>
   <td class="a">Hello</td>
   <td class="a">
    Hello<br>
    Eric
   </td>
  </tr>
5.1.1.2 CSS
.a {
vertical-align: top;
}
5.1.2 靠底对齐方式
5.1.2.1 HTML
<tr>
   <td class="a">Hello</td>
   <td class="a">
    Hello<br>
    Eric
   </td>
  </tr>
5.1.2.2 CSS
.a {
vertical-align: bottom;
}
5.1.3 居中对齐方式
5.1.3.1 HTML
<tr>
   <td class="a">Hello</td>
   <td class="a">
    Hello<br>
    Eric
   </td>
  </tr>
5.1.3.2 CSS
.a {
vertical-align: middle;
}
5.2 边框
5.2.1 设定分隔形边框
5.2.1.1 HTML
<table class="testTable">
    <tr class="title">
        <td class="cell">a</td>
            <td class="cell">b</td>
        </tr>
    </table>
5.2.1.2 CSS
.testTable {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}

.title {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}

.cell {
border: 1px;
border-color: black;
border-collapse: collapse;
border-style: solid;
}
注意，各个<table><tr><td>的各个属性都要设置，才看得见边框和分隔框