css_规则

1.字体样式

代码	作用
font-family	字体选择
font-size	字体大小
font-weight	字体粗细
font-style	字体样式

• 速写形式
  font:style weight size/line-height family;

• 网络字体
  主要用于字体图标库（iconfont/fontawesome）
  使用步骤：
    1) 在iconfont网站中选择图标，加入项目，产生代码
    2) 将产生的代码在html中通过link引用
    3) 应用css中定义好的类，来使用对应的图标

2.文字样式

注：可以被继承

• color:字体颜色

• text-align:字体摆放位置

• text-decoration:字体装饰

代码	含义
text-decoration-line (underline、line-through、overline、none)	字体装饰线
text-decoration-style (solid、dotted、double、dashed)	字体装饰线的样式
text-decoration-color	字体装饰线的颜色

• text-indent: 文本缩进

• text-shadow: 字体阴影
  写法：离左边多远 离上方多远 模糊程度 阴影颜色

3.列表样式

• list-style:列表样式

代码	含义
list-style-type	设置列表项标记的类型
list-style-position	设置在何处放置列表项标记
list-style-image	使用图像来替换列表项的标记

4.盒子样式

1）一个盒子的组成

外边距   margin
边框     border
内边距   padding
内容    存放子元素或者内容的区域

2）盒子样式

• width:宽度

• height:高度

• margin: 外边距
   margin:10px; 上右下左
   margin:0 10px; 上下为0，左右10px
   margin:0 5px 10px; 上0，左右5px，下10px
   margin:0 5px 10px 15px; 上右下左

• border: 边框
  速写：border:1px solid #ededed;

代码	含义
border-style	边框线类型
border-width	边框宽度
border-color	边框线颜色

• box-shadow:边框阴影
  速写: 离左边多远 离上方多远 模糊程度 什么颜色的阴影
  box-shadow:5px 5px 10px #ccc;

• border-radius:圆角边框

• backgroud:背景样式
  速写:bakgroud: #00FF00 url(bgimage.gif) no-repeat fixed top;

代码	含义
background-origin	背景铺设的起点
background-image	背景图片
background-repeat	背景重复方式
background-color	背景颜色
background-position	背景位置
background-clip	背景裁切方式

• 盒子计算方式
  box-sizing:content-box;内容盒子（传统盒子）
    width = 内容宽
    height = 内容高
    所占的宽 = border + padding + width
    所占的高 = border + padding + height
  box-sizing:border-box;边框盒子（怪异盒子）
    width = 边框以内所有的和
    width = border + padding + 内容宽