CSS查缺补漏篇 - 小花大方
前面的话:关于CSS,之前我已经做过一些基础的知识点介绍。CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中。样式的设置总体来说是不难的,但是需要足够的细心和耐心,本人之前做简单的静态页面时,也常出现bug,比如说清除浮动、圣杯布局等问题。这些知识点不难,但是很琐碎,本人也尚未能够整理完全,之后我也会根据具体问题做出具体分析,今天主要是对上次做的总结查缺补漏,有兴趣的可以在下面互相交流哟。
1、fireworks工具
——该工具的使用是根据设计图来进行网页的编写,常用的还有picpick等,本人惯用这一款工具,下面是对该工具的简单介绍。
1.1 正常切换
K | V | H | Z | U | T | I | G |
切片 | 小黑 | 小手 | 缩放 | 图形 | 文本 | 取色 | 填色 |
1.2临时切换
ctrl——小黑 | ctrl+空格——放大 |
空格——小手 | ctrl+Alt+空格——缩小 |
普通的放大缩小会自动移动到图片中间,临时的放大缩小仍然在原来的位置,使用起来很方便(Ctrl+N新建;Ctrl+O打开) |
1.3其他技巧
不需要的辅助线,拖回到标尺上会自动删除;
Ctrl+加号或者滚轮 放大图片 Ctrl+减号或者滚轮 缩小图片(不方便)
1.4 在测量图片之前要锁定图片:
2、网站的两种构建策略
渐进增强——progressive enhancement,一开始只构建站点的最少特性,然后不断针对各浏览器追加功能
优雅降级——graceful degradation,一开始就构建站点的完整功能,然后针对浏览器测试和修复
3、常见布局简介
1)固定布局 Fixed Layout
2)响应式布局 Responsive Layout
3)流式布局 Fluid Layout
4)栅格布局 Grid Layout
5)瀑布流布局 Waterfall Layout
6)圣杯布局、双飞翼布局 Holy Grail Layout 两边固定中间流动
4、设置网站图标
4.1 打开http://www.jd.com/favicon.ico即可看到网站图标;右键单击图标,选择图片另存为并保存到本地;
4.2 将图标放在根目录下(也可以是其他目录),在页面源文件的
标签之间插入
4.3 shortcut 捷径 快捷方式
4.4 使用网页图标的网站:http://www.bitbug.net/
5、引用样式文件
link标签 | 了解即可 | |
charset | 被链接文档的字符编码方式 | 几乎没有主流浏览器支持该属性 |
href | 被链接文档的位置 | |
hreflang | 被链接文档中文本的语言 | |
rel | 被链接文档与当前文档之间的关系 | 常用的有stylesheet 和 shortcut icon (sizes——网站图标的尺寸,仅适用于 rel="icon") |
rev | 与rel相反 reversed relationship | 几乎没有主流浏览器支持该属性 |
target | 被链接文档在哪个窗口或框架中加载 | 几乎没有主流浏览器支持该属性 |
type | 被链接文档类型 |
6、层级
6.1 一定要记得加定位,否则z-index不生效
6.2 后面的盒子会压住前面的盒子,z-index高的盒子会压住z-index低的盒子;盒子不是自身z-index越高就一定会越靠上,除了看他自身还要看他们的父级,父级层级越高的,子级越靠上。
总结: 层级不但要比较子级,还要比较父级(拼爹)。z-index理论上没有最大值,但实际上是21474836472的32次方;最小值不是0,可以取负数。
7、CSS3圆角(border-radius 边框-半径)
7.1 CSS3属性,用于向元素添加圆角边框:
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
7.2 简写形式: border-radius:2px; 顺序从左上角开始顺时针设置(左上 右上 右下 左下)
8、绝对定位可以改变元素的显示方式,但相对定位不可以
9、半透明效果:
background:rgba(0,0,0,.2);
red green blue alpha (红色值 绿色值 蓝色值 透明度)
色值取值范围是0~255;透明度取值范围是0~1;如果是零点几,前面的零可以省略。
补充一:Emmet语法
http://docs.emmet.io/cheat-sheet/
补充二:网页性能优化
css压缩
http://tool.oschina.net/jscompress/
网页性能测试
http://www.webpagetest.org/