CSS--样式汇总

深藏阁楼爱情的钟 2021-09-27 05:30 330阅读 0赞

*  前言
 *  内容
    
     *  文字样式
     *  图片样式
     *  页面样式
     *  表格和表单样式
     *  超链接样式
 *  总结
 *  end

# 前言 #

CSS内容说多不多，说少也不少，所以我只能将我自己了解到的总结到博客中，希望能给各位看官带来收获。

# 内容 #

## 文字样式 ##

p{ font-family:Arial, Helvetica, sans-serif; }

表示如果用户端有Arial字体就使用，没有就使用Helvetica字体，没有Helvetica字体使用sans-serif字体

<table> 
 <thead> 
  <tr> 
   <th>描述</th> 
   <th>表达式</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>字</td> 
   <td>font</td> 
   <td>14px 幼圆</td> 
  </tr> 
  <tr> 
   <td>字体</td> 
   <td>font-family</td> 
   <td>幼圆/雅黑/console</td> 
  </tr> 
  <tr> 
   <td>大小</td> 
   <td>font-size</td> 
   <td>5px</td> 
  </tr> 
  <tr> 
   <td>颜色</td> 
   <td>color</td> 
   <td>yellow/#red/#000000</td> 
  </tr> 
  <tr> 
   <td>粗细</td> 
   <td>font-weight</td> 
   <td>bold/100</td> 
  </tr> 
  <tr> 
   <td>斜体</td> 
   <td>font-style</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>下划线</td> 
   <td>text-decoration</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>大小写</td> 
   <td>text-transform</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>对齐</td> 
   <td>text-align</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>浮点</td> 
   <td>float</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>间隔</td> 
   <td>padding-left/right</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>间距</td> 
   <td>padding</td> 
   <td>5px/5px 6px 1px 6px</td> 
  </tr> 
  <tr> 
   <td>外边距</td> 
   <td>margin</td> 
   <td>5px</td> 
  </tr> 
  <tr> 
   <td>行高</td> 
   <td>ling-height</td> 
   <td>1.5em</td> 
  </tr> 
 </tbody> 
</table>

## 图片样式 ##

图片中的样式大部分和文字样式一样，比如：图片对齐与文字对齐一模一样；

<table> 
 <thead> 
  <tr> 
   <th>描述</th> 
   <th>表达式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>边框</td> 
   <td>border</td> 
  </tr> 
  <tr> 
   <td>边框样式</td> 
   <td>border-style</td> 
  </tr> 
  <tr> 
   <td>边框颜色</td> 
   <td>border-color</td> 
  </tr> 
  <tr> 
   <td>边框宽度</td> 
   <td>border-width</td> 
  </tr> 
  <tr> 
   <td>边框左边</td> 
   <td>border-left</td> 
  </tr> 
  <tr> 
   <td>边框右边</td> 
   <td>border-right</td> 
  </tr> 
 </tbody> 
</table>

## 页面样式 ##

<table> 
 <thead> 
  <tr> 
   <th>描述</th> 
   <th>表达式</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>背景颜色</td> 
   <td>background-color</td> 
   <td>yellow/#red/#000000</td> 
  </tr> 
  <tr> 
   <td>背景图片</td> 
   <td>background-image</td> 
   <td>url(图片地址)</td> 
  </tr> 
  <tr> 
   <td>重复方向</td> 
   <td>background-repeat</td> 
   <td>repeat-y/repeat-x/no-repeat</td> 
  </tr> 
  <tr> 
   <td>图片位置</td> 
   <td>background-position</td> 
   <td>bottom right</td> 
  </tr> 
  <tr> 
   <td>固定位置</td> 
   <td>background-attachment</td> 
   <td>fixed</td> 
  </tr> 
 </tbody> 
</table>

## 表格和表单样式 ##

<table> 
 <thead> 
  <tr> 
   <th>描述</th> 
   <th>表达式</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>表格</td> 
   <td>table</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>表格标题</td> 
   <td>caption</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>行</td> 
   <td>tr</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>第一行</td> 
   <td>th</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>内容</td> 
   <td>td</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>表格边框</td> 
   <td>border</td> 
   <td>1px/1px solid #000</td> 
  </tr> 
  <tr> 
   <td>边框重叠</td> 
   <td>border-collapse</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>宽度</td> 
   <td>widht</td> 
   <td>5px</td> 
  </tr> 
  <tr> 
   <td>高度</td> 
   <td>height</td> 
   <td>5px</td> 
  </tr> 
  <tr> 
   <td>背景颜色</td> 
   <td>background-color</td> 
   <td>000/yellow/red/transparent</td> 
  </tr> 
  <tr> 
   <td>下划线</td> 
   <td>border-bottom</td> 
   <td>1px solid #000</td> 
  </tr> 
  <tr> 
   <td>外边距</td> 
   <td>margin</td> 
   <td>0px</td> 
  </tr> 
  <tr> 
   <td>间距</td> 
   <td>padding</td> 
   <td>0px</td> 
  </tr> 
 </tbody> 
</table>

## 超链接样式 ##

<table> 
 <thead> 
  <tr> 
   <th>描述</th> 
   <th>表达式</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>背景图片</td> 
   <td>background</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>超链接正常状态下</td> 
   <td>a:link</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>访问过的超链接</td> 
   <td>a:visited</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>鼠标经过时的超链接</td> 
   <td>a:hover</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>下划线</td> 
   <td>text-decoration</td> 
   <td>none/underline</td> 
  </tr> 
 </tbody> 
</table>

# 总结 #

参数方面需要多多总结，在实际运用中参数的变式多种多样，所以需要多多练习练习。

# end #

谢谢您的阅读！