随笔分类 - CSS
摘要:【08】css sprite是什么?有什么优缺点?概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。优点:减少HTTP请求数,极大地提高页面加载速度。增加图片信息重复度,提高压缩比,减少图片大小。更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现。缺点:图片合并麻烦。维护麻烦,修改一个图片可能需要从新布局整个图片,样式...
阅读全文
摘要:【01】blockqote美化 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>moyu's demo</title> <meta name="keywords" content="demo 测试 魔芋
阅读全文
摘要:【00】魔芋的理解nth-child(n)这样的带n的,n从1开始。n可以是表达式:n*3,n+3可以是特殊字符串“odd”,"even"【02】empty匹配没有任何子元素(包括text节点)的元素E。注意:如果开始标签和结束标签间有空格或是换行,都是属于有元素的。(魔芋:所以不实用)【04】not(s)匹配不含有s选择符的元素E。【05】first-childE:first-childE:fi...
阅读全文
摘要:【10】css hack原理及常用hack原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1)属性hack。2)选择器hack。3)IE条件注释IE条件注释:适用于[IE5, IE9]常见格式如下 Special instructions for IE 6 here 选择器hack:不同浏览器对选择器的支持不一样/***** Selector ...
阅读全文
摘要:【12】link与@import的区别link是HTML方式, @import是CSS方式link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUClink可以通过rel="alternate stylesheet"指定候选样式浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式@import必须在样式规则之前,可以在css文件中引用其他文...
阅读全文
摘要:【20】display,float,position的关系如果display为none,元素不显示。否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为none,display根据下面的表格进行调整。否则,如果float不是none,框是浮动的,display根据下表进行调整。其他情况下display的值为指定值。 **
阅读全文
摘要:【21】外边距折叠(collapsing margins)外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。【注意】margin外边距合并的条件。margin折叠认知:【1】外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。空元素(没有边框和填充时)也会自身合并上下外边距。【2】合并的margin必须是有直接接触的。(...
阅读全文
摘要:【14】PNG,GIF,JPG的区别及如何选GIF:8位像素,256色无损压缩支持简单动画支持boolean透明适合简单动画JPEG:颜色限于256有损压缩可控制压缩质量不支持透明适合照片PNG:有PNG8和truecolor PNGPNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画适合图标、背景、按钮**
阅读全文
摘要:【11】specified value,computed value,used value计算方法specified value(规范值): 计算方法如下:如果样式表设置了一个值,使用这个值如果没有设置值,这个属性是继承属性,从父元素继承如果没设置,并且不是继承属性,使用css规范指定的初始值computed value(计算值): 以specified value根据规范定义的行为进行...
阅读全文
摘要:【18】什么是FOUC?如何避免Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head**
阅读全文
摘要:链接的四种状态:a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻 魔芋:记忆技巧love hatelink visited hover active设置链接样式,必须按照这样的顺序设定,否则肯定在某些浏览器上效果不一样。**
阅读全文
摘要:【01】CSS规范【】https://drafts.csswg.org/indexes/(下图) https://www.w3.org/TR/2011/REC-CSS2-20110607/ https://www.w3.org/wiki/CSS 【】https://developer.mozilla.org/en-US/docs/Web/CSS **
阅读全文
摘要:【】-webkit-tap-highlight-color(应用于移动端) -webkit-tap-highlight-color:rgba(0,0,0,0); //透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)(魔芋:就是长按时出现的灰色覆盖层
阅读全文
摘要:CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefo
阅读全文
摘要:字体图标使用笔记:优缺点:首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。优点:加载文件体积小统一展示风格,使用方法通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单可以添加一些视觉效果如:阴影、旋转、透明度兼容IE6后期维...
阅读全文
摘要:CSS中具有继承性的属性:color:#eeefont:font-stylefont-variant:font-weight:boldfont-sizefont-family:font-stretch:font-size-adjust:visibility:visible|hidden|collap...
阅读全文
摘要:CSS3制作404立体字体页面效果鼠标移动上去,背景色变白。动态效果:.demo p:first-child span:hover { text-shadow:0px0px2px#686868,0px1px1px#fff,0px2px1px#fff,0px3px1px#fff,0px4px1px#f...
阅读全文
摘要:【01】CSS制作的图形 绘制五角星: 通过border绘制三角形。然后通过transfrom来旋转35度。 绘制对称的图形,最后绘制顶部的三角形即可。 元素本身,加上:before和:after。 绘制爱心: 矩形,加圆角,加旋转。 绘制倒8: 显然是:三个角是圆角。然后旋转。 绘制开心笑: 四个
阅读全文
摘要:【04】CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。 1.2. 全局字体设置: windows 7系统:微软雅黑 Arial; windows XP及以下:新宋体,宋体,Aria...
阅读全文
摘要:em版本:CSS1说明:自己的理解:注意地方:浏览器默认大小为16px.谷歌浏览器最小字体为12px.font-size;有继承性。判断步骤:【】看该元素本身有没有设置字体大小:有:那么,boder、width、height、padding、margin、line-height”等值,都是相对字体大...
阅读全文