css样式总结

css背景

• backgoround-color
• background-image:url(‘paper.gif’);
• background-repeat:no-repeat; repeat-x;repeat-y;
• background-position:right top;
• background-attachment :fixed

文本格式

• color

  • 十六进制
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

• text-align

  • center
  • right
  • justify（每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸））

• text-decoration

  • none(删除链接下划线)
  • overline
  • line-through
  • underline

• text-transform

  • uppercase(全部大写)
  • lowercase（全部小写）
  • capitalize（首字母大写）

• text-indent

  • 首行缩进

• letter-spacing

  • 设置字符间距

• line-height

  • 设置行高

• word-spacing

  • 设置单词之间的距离

• white-space

  • white-space:nowrap;（文字不换行）

• vertical-align

  • 设置文本的垂直对齐图像
  • top
  • bottom

• text-shadow

  • h-shadow （水平阴影位置）
  • v-shadow（垂直阴影位置）
  • blur（模糊距离） 可选
  • color 阴影颜色 可选

字体

• font-family
  • font-family:“Times New Roman”, Times, serif;
• font-size
• font-style
  • normal
  • italic
• font-weight
  • normal
  • bold

链接

• a:link {color:#000000;} /* 未访问链接*/

• a:visited {color:#00FF00;} /* 已访问链接 */

• a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

• a:active {color:#0000FF;} /* 鼠标点击时 */

• a:link {text-decoration:none;}

• a:visited {text-decoration:none;}

• a:hover {text-decoration:underline;}

• a:active {text-decoration:underline;}

• a:link {background-color:#B2FF99;}

• a:visited {background-color:#FFFF85;}

• a:hover {background-color:#FF704D;}

• a:active {background-color:#FF704D;}

列表样式

• 列表项标记

  <style>
  ul.a {list-style-type:circle;}
  ul.b {list-style-type:square;}
  ol.c {list-style-type:upper-roman;}
  ol.d {list-style-type:lower-alpha;}
  </style>
  <p>无序列表实例:</p>
  
  <ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
  
  <ul class="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
  
  <p>有序列表实例:</p>
  
  <ol class="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ol>
  
  <ol class="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ol>
  

• 列表项图像

  ul
  {
      list-style-image: url('sqpurple.gif');
  }
  

• list-style-position
  • inside
  • outside
  • inherit 从父元素继承
• 简写
  • list-style: square url(“sqpurple.gif”);

表格

• 设置表格边框，折叠

  table
  {
      border-collapse:collapse;
  }
  table,th, td
  {
      border: 1px solid black;
  }
  

• 其他属性

  td
  {
      height:50px;
      vertical-align:bottom;
  }
  td
  {
      padding:15px;
  }
  table, td, th
  {
      border:1px solid green;
  }
  th
  {
      background-color:green;
      color:white;
  }
  

• 表格标题
  • caption {caption-side:bottom;}
  • Table 1.1 Customers

边框

• border-style
  • dotted: 定义一个点线边框
  • dashed: 定义一个虚线边框
  • solid: 定义实线边框
  • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
• border-color
• border-width
• 单独设置各个边

  p
  {
      border-top-style:dotted;
      border-right-style:solid;
      border-bottom-style:dotted;
      border-left-style:solid;
  }
  
  

css轮廓（outline）

• 在元素周围画一条线，不占用空间
• outline
  • outline-color
  • outline-style
  • outline-width

外边距margin

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

display

• 隐藏元素 - display:none或visibility:hidden
• visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
• display
  • none
  • block
  • inline

重叠元素

• z-index
  • 默认为0
  • 值越小，在最下边

overflow

• 用于控制内容溢出元素框时显示的方式，只工作在指定高度的块级元素上
• visible 不会被裁剪，会呈现在元素框之外
• hidden 内容会被裁剪，不可见
• scroll 显示滚动条
• auto
• inherit 继承父级元素

float（浮动）

• 会使元素向左或向右移动，其周围的元素也会重新排列
• 浮动元素之后的元素将围绕它
• 浮动元素之前的元素将不会受到影响
• 如果图像是右浮动，下面的文本流将环绕在它左边

清除浮动

```css
.text_line
{
    clear:both;
}