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、...)

 

一个盒子的组成:

外边距

边框

内边距

内容 存放子元素或者内容的区域

盒子计算方式:

box-sizing:content-box;——内容盒子(默认)

width = 内容宽

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就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色