【css 禅意花园 笔记】的更多相关文章

css 禅意花园 笔记

1.  FOUC(Flash Of Unstyled Content) 现象( 在某些情况下,IE加载网页时会出现短暂的CSS样式失效. a: 只发生在Windows上的 IE (5.0版本以上) b: 只发生在那些会出现FOUC现象的网页 c: IE的临时文件夹中没有缓存过该页面的CSS文件) 原因: IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件: 页面头部加一个空的  <script type="text/javascript"></scri…

读《CSS禅意花园》 有感

1.图片用<img>标签添加到页面中,会增加页面的大小,导致页面加载需要更长的时间.可以用css background 引用图片. 1.1.若图像属于“内容”而不是“样式”的一部分,例如“公司介绍”页面中,一张CEO的照片,应用<img>标签 2.不要用表格布局,每次页面加载时,浏览器必须重新加载各种内容,并对之重绘.若用CSS,这些布局信息可缓存于浏览器中.禅意花园的作品,应用图片的代码只需加载一次. 3.外边距重叠(collapsing margin) 若两个元素上下毗邻且都定…

CSS禅意花园（设计一）

设计 1.排版样式. 正文部分文字比例比菜单不分班的大,可区分着两个区域(说明正文比菜单重要).排版也是一种交流方式,运用文字的大小.间距.颜色调整样式,给浏览者丰富的信息. 2.图标 3.分割线 适合使用分割线让页面显得韵体. 4.外边距(margin) 足够大的外边距可以让内容至于浏览器的中心位置,浏览者一眼能看到. 光.影.形状.空间 阴影被广发使用原因:1.给浏览器丰富的视觉效果 2.存在层次感 3.容易画实现(ps) 注意正确使用阴影:1.深度,深色阴影表示物体与背景渐近,反之较远.…

[已读]CSS禅意花园

蛮早的一本书,提到了一些小tip,比如负margin实现居中.FIR图像替换.…

CSS禅意

标题取自<css禅意花园>一书,还记得当年读此书时的情景,真的是内容和书名一样的优秀,就以此标题作为自己在该文的一种追求吧,尽管我的水平和见解都和Dave Shea相去甚远.该文算是对前两年写页面工作的总结吧,现在比较少关注css了,可能观点有狭隘的地方,同时文中也有一定的思考和理解,也许并不一定特别适合初学者阅读,本人时间有限,也没办法针对具体的知识点做深入的讲解或提供代码示例,所以在阅读过程中如果有不理解的地方,欢迎提问并互相学习交流. 当UI设计师给了你一张psd图,在对它进行切图,实现…

CSS揭秘读书笔记 （一）

CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background:white; background-clip:padding-box; ①  hsla:h是色调,取值范围是0-360.s是饱和度,取值范围是0%-100%.l是亮度,取值范围是0%-100%.a是透明度,取值范围是0-1. ② background-clip:用于调整背景图的显示区域,有3个值,b…

css居中学习笔记

css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="child"> hello world ! </div> </div> </body> 方法一:inline-block + text-align <style type="text/css"> body{ margin: 0px;…

《CSS揭秘》笔记（一）

前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性转化为网页中的各种创意.这正是这本书将要呈现的内容.--引用自前言 ①DRY 是 Don't Repeat Yourself 的首字母缩写,意思是不应该重复你已经做过的事.它是一种广为流传的编程理念,旨在提升代码某方面的可维护性:在改变某个参数时,做到只改尽量少的地方,最好是一处.强调 CSS 代码…

CSS 3 学习笔记

css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词内换行(word-break)也会发生. text-overflow : clip | ellipsis取值:clip:    不显示省略标记(...),而是简单的裁切.ellipsis:    当对象内文本溢出时显示省略标记(...) text-shadow : none | <length>…

css随堂笔记（三）

Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 背景位置: 1.如果只设置一个方位词,另外一个默认居中 2.如果设置的值是两个方位词,与顺序无关 2 数值:背景位置: 1.如果设置的值是数字: 1.一个值得时候,表示水平方向的位移,垂直方向默认居中 2.两个值得时候,第一个表示水平位移 第二个表示垂直方向的位移 C 背景图片是否平铺:backg…