PS切图
快捷键收集
- 标尺的显示隐藏 ctrl+R
- 清楚所有参考线 Ctrl + ；
选区工作
- 添加到选区 ： 按住shift
- 从选区中减去：按住Alt
-
与选区交叉：按住shift + alt
选区编辑
隐藏文字只留背景
文字和背景合并，平铺背景覆盖文字情况
- 矩形选框工作
- 自由变换（Ctrl+T） 适合背景为纯色
- 使用移动工具 + Alt 加上这步的适合有纹理的背景
切带背景PNG24
- 移动工具选中所需图层（按住 ctrl 多选）
- 右键合并图层 Ctrl+E
- 再右键复制图层到新文件或直接拖至已有文件Ctrl + N
切带背景PNG8
- 合并（可见）图层 （shift + ctrl + E）合并图层 Ctrl+E
- 矩形选框工具选择内容
- 魔棒工具去除多余部分
- 从选区中减去： 按住Alt
可平铺背景的切图
- 用矩形选框工具选取一块区域
- 复制粘贴到新文件中（平铺内容充满文件的宽-X轴或高-Y轴）
大小与质量
- 平衡与取舍
- 压缩工具
- 无损 MiniImage NetEaseWD/minimage
- 有损 TinyPng tinyPng
浏览器兼容方案
- IE6不支持PNG24半透明（方案: 存2份，sprite.png 24, sprite_ie.png 8）
- 圆角阴影，CSS3&切图
开发工具
- 文本编辑
- Sublime Text
- Notepad++
- EditPlus
sublime
常用快捷键
- ：+ 行号
- @ + 名称字符 ( 例如：定位到js具体的函数名 ,css的选择器名 )
-
#+ 关键字名 （匹配具体的关键字）
命令面板（Ctrl + Shift + P）
多行选择（Ctrl + D , Ctrl + Shift + L）
- Ctrl + D 跳过某一个 Ctrl + K
- Alt + F3 选中全部的相同变量进行批量操作
**常用插件 **
- Package Control
- Emmet
- DocBlockr
- SideBarEnhancements
- terminal
**代码片段的使用 snippet **
HTML 发展
标签
注释:
- dfn 标签可标记那些对特殊术语或短语的定义。
- rt,rp 与ruby合用，上拼音标注(rp 不支持rt的浏览器时显示的样式)
- q 标签定义短的引用。浏览器经常在引用的内容周围添加引号
- abbr 标签指示简称或缩写，比如 "WWW" 或 "NATO"。
- cite 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
- samp 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。字符序列 (ae 可能会被转换为 æ 连字字符。)
- ins 下划线文本
- bdi (设置间隔)标签允许您设置一段文本，使其脱离其父元素的文本方向设置。Username Bill:80 points。 支持：F,C
- bdo 元素可覆盖默认的文本方向。
- s 带删除线文本 sssHTML 5 中不再支持这个标签.
- kbd 标签定义键盘文本。
- wpr Word Break Opportunity (wbr) 规定在文本中的何处适合添加换行符。 提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。
- code 标签用于表示计算机源代码或者其他机器可以阅读的文本内容
- blockquote 标签定义块引用。blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间
- meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）,例子：磁盘用量、查询结果的相关性，等等。注释：meter 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress 标签
- legend 元素为 fieldset 元素定义标题
- fieldset 元素可将表单内的相关元素分组
a标签链接到Email地址
<a href="mailto:lanmeng@yeah.net">联系我们</a>
<a href="tel:18310257958">18310257958</a>
加上抄送和主题
<a href="mailto:lanmeng@yeah.net?cc=admin@188.com&subject=建议&body=body.....">联系我们(抄送)</a>
强调标签 em, strong
em 主要是语义的强调，默认样式：斜体
-
strong 主要是重要性的强调(比em更强烈的强调 )，默认样式：粗体
<div> ..... <div class="proinfo"> ..... <p class="w-price"> <strong>￥39</strong> <span>市场价￥45</span> </p> </div> ..... </div>
引用标签 cite q
- cite 文章文本出处，人物。默认样式：斜体
- q 引用一段文字，某人说的话 。默认样式：加引号
代码
- code 计算机代码
格式化
- b 粗体，摘要关键字，产品名称等
- i 斜体，技术术语
视频video
- track 引入视频的字幕文件
图
- canvas 基于像素
- svg 矢量
热点区域
- map
-
area
map热点
表格
表单
- button的type与input的type一致，submit , reset
- input type (H5新增)
- url
- number
- tel
- search
- range
- color
- data picker(data,month,week,time,datetime,datetime-local)
CSS语法
引入
外部、内部、内嵌样式
浏览器私有属性
- chrome,safari -webkit-
- firefox -moz-
- IE -ms-
- opera -o-
属性值语法
....
@规则
@media
@keyframes
@font-face
以及@import @charset @namespace @page @supports @document
CSS 选择器: 简单、伪元素、组合
简单选择器
- 标签
- id
- class
- 属性
- 伪类选择器
- :link
- :visited
- :hover
- :active
- :enabled
- :disabled
- :checked
- :first-child
- :last-child :nth-child(n)
- :nth-of-type(n) :first-of-type{....} :last-of-type{....}
- :onlly-child{....} 只有一个子元素的项 (ul>li*1)
- :empty 选中空标签
<p></p> - :root 选中根元素
<html> - :not() 不包含某个选择器（参数为简单选择器）
- :target 锚点的目标目标
- :lang() lang值的选择器
====例子====
属性选择器：
1、[arr] 例如： [disabled]{background-color:#eee;}
2、[arr=val] 例如： [type=button]{background-color:blue;}。那么 #nav{} == [id=nav]{}
3、[arr~=val] 包含以空格区分 例如： .sports{} == [class~=sports]{}
4、[arr^=val] 以什么开头 例如：[href^='#']{color:red;}
5、[arr$=val] 以什么结尾 例如：[href$=pdf]{color:red;}
6、[arr=val] 值中包含 例如：[href="lady.163.com"]{color:red;}
//[lang |= en]{color:red;} 会选中前三个（用的不多）
<p lang="en">1、hello</p>
<p lang="en-us">2、hello</p>
<p lang="en-au">3、hello</p>
<p lang="enfr">4、hello</p>
<p lang="cy-en">5、hello</p>
//：[href^='#']{color:red;} 选中后两个
<a href="http://www.baidu.com">baidu</a>
<a href="#html">html</a>
<a href="#css">css</a>
::first-letter应用到第一个字母上，为红色
<p> CSS伪元素选择器是。。。<p>
first-of-type
<dl>
<dt>作者:</dt>
<dd>Dave shea:</dd> /* 红色 */
<dd>Molly E. Holzschlag</dd>
<dt>出版社:</dt>
<dd>人民邮电出版社</dd>
</dl>
dd:first-of-type{ color:red; }
伪元素选择器
- ::first-letter{....} 第一个字母
- ::first-line{...} 第一行
- ::before{ content: 'before'; } 在元素前插入
- ::after{ content: 'after'; } 在元素后插入
- ::selection 应用于被用户选中的内容
组合选择器
- 后代选择器
- 子选择器
- 兄弟选择器
CSS优先级
- a = 行内样式
- b = ID选择器
- c = 类、伪类、属性选择器
- d = 标签选择器和伪元素选择器
value = a*1000 + b*100 + c*10 + d*1
CSS改变优先级
- 改变先后顺序
- 提升选择器优先级
- !important
文本和颜色
font-size:
<length> | <percentage> | <absolute-size> | <relative-size>
line-height
normal | <number> | <length> | <percentage>
line-height: 3px or 3em or 300% or 3
** 300% 与 3的区别 **
假设父元素font-size : 30px
- 300% : 先计算成固定值再继承。（首先对父元素的字体进行计算得到行高：30*3 = 90px,则子元素的文字字体变化，不影响子元素的行高）
- 3 : 直接继承。（直接继承line-heitght = 3，比如子元素设置font-size: 16px, 那么，line-height: 3*16 = 48px）
font
[ [<font-style> || <font-variant> || <font-weight> || <font-stretch> ] ? <font-size> [/ <line-height> ] ? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar
缩写：font:30px/2 "Consolas" , monospace;
缩写：font:italic bold 20px/1.5 arial,serif;
( <font-size>和<font-family>是必填项)
text-align ：left | right | center | justify(两端对齐)
....
vertical-align: baseline | sub 下标 | super 上标 | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
....
text-indent 首行缩进 <length> | <percentage>
eg:
text-indent : 2em; 缩进2个字；
text-indent:-9999px; 用于隐藏文字（SEO）
white-space normal | nowrap | pre | pre-wrap | pre-line
normal : 空格被合并，自动换行
nowrap: 空格被合并，不要换行
pre : 换行保留
pre-wrap： 保留格式+自动换行（用的较多）
pre-line: 保留换行，合并空格，自动换行
word-wrap:normal | break-word 单词换行
...
word-break : normal | keep-all | break-all
keep-all 与 normal 基本一致，no break
break-all 单词任意两个字母都能换行（break）
text-shadow none | [<length>{2,3} && <color>?]#
//x轴，y轴，（第三个值为模糊半径），颜色不写默认为文字的颜色
text-shadow:1px 2px #f00;
text-overflow clip | ellipsis
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap ;
inherit 强制继承父元素属性
font-size, font-family,font-weight, font-style, line-height, color, text-decoration, text-align, text-indent, white-space, word-wrap, word-break, text-shadow.....
都可以将值设置为inherit，继承父元素属性
盒模型
- border
- margin
- padding
- content
padding 的值缩写
padding: 20px 10px 30px == padding : 20px 10px 30px 10px;
三个值的时候，表示：上， 左右，下
margin合并
毗邻元素
-
父元素与第一个/最后一个子元素
<div style="margin-bottom: 40px"><div> <div style="margin-top:20px"><div>
border-radius: [<length> | <percentage> ] {1,4}[/[<length> | <percentage> ] {1,4} ] ?
说明： 上下看
- 左上角（0px,20px)-水平半价，垂直半径. [border-top-left-radius]
- 右上角（5px,15px）
- 右下角（10px,10px）
- 左下角（15px,5px）
overflow: visible | hidden | scroll | auto
overflow-x, overflow-y
auto 超出自动显示滚动条
box-sizing： content-box | border-box | inherit
默认width，height设置的是内容区，content-box
box-shoadow:none | <shadow> [,<shadow>]*
<shadow> : inset ? && <length>{2,4} && <color>?
outline:[<outline-width>] || <outline-style> || <outline-color> | inherit 轮廓
outline-width: <lenght> | thin | medium | thick | inherit
outline-style: solid | dashed | dotted | ... | inherit
outline-color:<color> | invert | inherit
特点；
- 不占空间（与box-shadow一样）
- 在border外
背景
backgroud-image
<bg-image> [,<bg-image>] * 背景图片可以有多张，叠加顺序，先设置的在上面，后设置在下面, 背景色在最下面
background-image: url(./red.png) , url(./blue.png)
background-color: green;
backgound-repeat <repeat-style>[,<repeat-style>]*
repeat-style = repeat-x | repeat-y |
[repeat | space(平铺中会有间隙，没有被截掉的图形) | round(平铺会有拉伸，正好放下图形有拉伸) | no-repeat]{1,2}
background-image: url(./red.png) , url(./blue.png)
background-repeat: no-repeat repeat, repeat-x;
backgound-attachment 可以写多个；
<attachment> = scroll 默认| fixed | local
scroll 滚动的时候，背景不动，内容动
local 内容背景一起动
fixed 几乎不用
background-position 可以设置多个
设置百分比的情况
background-position ： 20% 50%；
表示，图片的20% 50%（x,y）的点，与容器的20% 50%的点 重合
所以都是50% 50%（= center center），则背景居中
设置一个值的情况
background-position：right； 表示X轴的100%位置对应容器的100%位置，默认Y轴center
设置四个值的情况
background-position：right 10px top 20px；
此时的right，top不能转化为百分比，其实表示的是参照位置（参照物的作用）
雪碧图的应用
....
linear-gradient() 线性渐变
[ [<angle> | to <side-or-corner> ] ,] ? <color-stop> [,<color-stop> ] +
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop> = <color> [ <percentage> | <length>] ?
linear-gradient 线性渐变其本身不是CSS的属性，而是属性下面的数值，一般用在background的属性里比较多，使用线性渐变需要注意,有很多种线性渐变的表达方式，对于不同的手机、版本也会有所不同。在手机web上面，使用这种格式比较安全，-webkit-gradient(linear, left top, left bottom, from(), to())
backgound-image: linear-gradient(red,blue); // 默认值是to bottom
反向写法 backgound-image: linear-gradient(to top, red,blue);
backgound-image: linear-gradient(to right bottom, red,blue);
backgound-image: linear-gradient(45deg, red,blue);
backgound-image: linear-gradient( red,green,blue);
参数的百分比缺省表示平分（0% 50% 100%）
设置的方法：backgound-image: linear-gradient( red,green 20%,blue);
radial-gradient() 径向渐变
<extent-keyword> = closest-side 离圆心最近的边 | farthest-side 离圆心最远的边 | closest-corner 离圆心最近的角 | farthest-corner 离圆心最远的度
background-image: radial-gradient(circle,red,blue)
repeat - * - gradient
background-image : repeating-linear-gradient(red,blue 20px , red 40px)
background-image : repeating-radial-gradient(red,blue 20px , red 40px)
background-origin = border-box | padding-box | content-box
区别就是，background 0,0 和 100%,100% 坐标的区别，默认值是padding-box
background-clip = border-box | padding-box | content-box
background-image:url(red.png)
background-clip : padding-box
background-clip: content-box
background-clip: content-box
background-origin : content-box
联合两个属性
background-size = length | percentage | auto | cover | contain
cover : 尽可能的小，但宽高不小于容器，撑满整个容器
contain：尽可能大，但宽高不大于容器，以最大的型 展现在容器中
background : url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;
