3.CSS样式
（1）字体样式
color 字体颜色（red、blue、#fff...）
font-family 字体形态（"微软雅黑"、"Microsoft YaHei"、"宋体"、serif...）
font-style 字体是否开启斜体（normal、italic）
font-weight 字体粗细（thin、normal、bold、bolder、100~900）
font-size 字体大小（浏览器默认16px）（100px、2em...）
WebFont字体形态：
找到网络中将相应的字体包链接（或本地字体包链接），在CSS中声明
@font-face{
font-family: “自定义名称”;
src: url(‘链接地址’);
}
然后在样式中用font-family: “自定义名称”;即可。
WebFont字体图标：
如在iconfont网站中选择图标加入项目，选择Font class生成代码，通过<link>标签引入CSS文件（补加https:），一般在<i>标签的类名中写入该图标的全名即可引用（如iconfont icon-XXX）（或者将其下载到本地后用<img>标签引用）。
又或者选择Unicode生成代码，在@font-face中写入相应链接，font-family为iconfont，将该图标名称（生成的Unicode形式）写在标签中即可引用。
（2）文本样式
text-align 字体排列方式（left、center、right...）
text-transform 字体改变（none、uppercase、lowercase...）
text-decoration 文本修饰（none、underline、overline、line-through...）
text-shadows 文本阴影[h-shadow] [v-shadow] [blur] [color]（5px 4px 3px #ededed、...）
cursor 光标悬浮到链接上的时候光标的形状
outline 环绕链接的框
（3）列表样式
list-style-type 设置列表项标志类型（circle、square...）
list-style-position 设置列表项标志出现的位置（outside、inside）
list-style-image 自定义设置列表项标志（url’./...’）
list-style 列表样式的速记写法[type] [image] [position]（circle outside url’./...’、...）
line-height 行高
（4）盒子样式
background-color 背景颜色（red、blue、#fff...）
background-image 背景图片（url’./...’）
background-clip 背景覆盖范围（裁剪背景）（
border-box边框以内、padding-box内边距以内、content-box内容区
）
background-origin 背景起始点（
border-box边框部分原点、padding-box内边距部分原点、content-box内容区部分原点
）
background-position 背景图像初始位置（left、top、right、10px 20px...）
background-repeat 背景图片的重复方式（
repeat为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
space使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不使用切割(clipping)
round将图片压缩或者是扩展以适应整个背景范围，不使用切割
no-repeat不重复
）
background-attachment 背景图片的固定点（
fixed固定在视口上、scroll固定在自身元素上、local固定在自身元素的内容上
）
background-size 背景的大小（cover、...）
background 背景设置的速记写法[attachment] [clip] [color] [image] [position][repeat]（fixed border-box blue url’./...’ left no-repeat、...）
width 宽度
height 高度
margin-top 顶外边距
margin-right 右外边距
margin-bottom 底外边距
margin-left 左外边距
margin 外边距
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
padding-top 顶内边距
padding-right 右内边距
padding-bottom 底内边距
padding-left 左内边距
padding 内边距
padding:10px; 上右下左
padding:0 10px; 上下为0，左右10px
padding:0 5px 10px; 上0，左右5px，下10px
padding:0 5px 10px 15px; 上右下左
border-radius 圆角半径
border-top-style 顶边框线类型
border-top-width 顶边框宽度
border-top-color 顶边框线颜色
border-top 顶边框线
border-right-style 右边框线类型
border-right-width 右边框宽度
border-right-color 右边框线颜色
border-right 右边框线
border-bottom-style 底边框线类型
border-bottom-width 底边框宽度
border-bottom-color 底边框线颜色
border-bottom 底边框线
border-left-style 左边框线类型
border-left-width 左边框宽度
border-left-color 左边框线颜色
border-left 左边框线
border-style 边框线类型
border-color 边框线颜色
border-width 边框线宽度
（border: 1px solid #ededed、...）
box-shadow 盒子阴影（5px 5px 10px #ccc、inset 0 0 3px lightblue、...）
一个盒子的组成：
外边距 margin
边框 border
内边距 padding
内容 存放子元素或者内容的区域
盒子计算方式：
box-sizing:content-box;——内容盒子（默认）
width = 内容宽
height = 内容高
所占的宽 = border + padding + width
所占的高 = border + padding + height
box-sizing:border-box;——边框盒子
width = 边框以内所有的和
width = border + padding + 内容宽
height = 边框以内所有的和
height = border + padding + 内容高
（5）表格样式
background 为表格添加背景色
table-layout 指定显示表格的盒子，行，列的算法（
auto ：（默认值）table以及cell的宽度取决于包含在其中的内容。
fixed： table的宽度以及列的宽度取决于表格的第一行各列设定的宽度。
）
border-collapse 指定表格的边框是合并还是分开（
separate：（默认值）分开模式，表示相邻的两个格子都有独立边框。
collapse：合并模式，表示相邻的两个格子共享边框
）
caption-side 指定caption坐落在表格的哪个位置上（top、bottom）
【单位补充说明：
颜色
#333333等价于#333
#ededed
rgb(0,0,0)等价于#000000
rgba(0,0,0,0.3) 0.3为透明度
渐变...
长度
绝对单位
px像素
相对单位
em当前元素上的font-size的值，如：
font-size:12px;
1em = 12px;
2em = 24px;
rem
html{font-size:14px}
1rem = 14px;
%
width相对于父元素
border-radius相对于当前元素的width
...
】
（6）CSS3部分新增样式说明
border-radius：圆角，值为半径尺寸
box-shadow/text-shadow：阴影
语法box-shadow: h-shadow v-shadow blur spread color;
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色，请参阅 CSS 颜色值
opacity：透明度，取值为0-1之间的小数
gradient：渐变，如background:-webkit-linear-gradient(top,#ccc,#000);
共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成left top就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色
扫一扫
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
