css高级】的更多相关文章

1.CSS变换 2.CSS动画 3.CSS高级特性及兼容性:http://caniuse.com/…
1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; }   上面代码里,标题元素享用了同一个声明,所有的标题元素都是绿色的.     2. 继承 —————————————————————————   CSS 中,子元素会从父元素继承属性.   body { font-family: Verdana, sans-serif; }   根据上面的规则…
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄…
随着 IE8 逐渐退出舞台,很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了. 用 :empty 区分空元素 兼容性:不支持 IE8 /*假如我们有以上列表:*/ <div class="item">a</div> <div class="item">b</div> <div class="item"></div> 我们希望可以对空元素和非空元素区别处理,那么…
设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. 为样式找到目标:选择器 常用选择器:标签选择器.后代选择器(由其他两个元素间的空格表示,选择一个元素的所有后代).ID选择器.类选择器.标签.后代.ID.类选择器的组合可解决大多数问题. 伪类::link :visited 链接伪类,只能作用于锚元素. 通用选择器:*{....} 高级选择器:子选…
一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ color: red; } .container .item p{ color: yellow; } 子代选择器 使用>表示子代选择器.比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p. .container>p{ color: yellowgreen; } 并集选…
1,由flash创建的object/embed标签的标准集.缺点:他们与各种无效属性和元素在一起被加载,破坏文档对web标准的依从性, 因为embed是人生w3c规范没有的专有元素. 2,迂回解决方案: 1)Flash Satay方法:http://www.alistapart.com/articles/flashstay 将删除embed标签和一些object标签中不必要的专有属性.缺点:在IE/win中,在100%加载之前flash不能被启动. 该方案通过嵌入一个空的“容器”动画来欺骗IE,…
选择器:高级选择器:属性选择器:[] ,例如:a[href=”#”] {};选择器的优先级:!important为最高优先级,其次优先级次序规则:a,b,c,d ,a代表行内样式,b代表ID选择器,c代表类.伪类.属性选择器,d代表类型元素选择器和伪元素选择器,它们的基数是1000,100,10,1: 设计良好的CSS样式表:①结构(自上而下):一般样式:主体样式.reset样式.链接.标题.其他元素:辅助样式:表单.通知和错误.一致的条目:页面结构:标题.页脚和导航:页面组件:各个页面:覆盖②…
3.混合模式与合成 在图形编辑软件(比如Photoshop)中,设计师很早就可以选择两个设计元素叠加时的颜色如何混合了. CSS Compositing and Blending标准使我们可以在CSS中使用图形编辑软件的混合模式. 最简单的混合模式是"正片叠加"(multiply),计算方法是源像素每个颜色通道的值乘以目标像素对应颜色通道的值,混合后的图片会变暗.可以借助灰阶来理解这种混合模式,在灰阶中0代表黑色,1代表白色.假设源值为0.8,目标值为0.5,那最终相乘后值就是\(0.…
CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! <p>廖阿丽!</p> </div> 这一块中的“你好”,属于匿名块框,因为它没有与专门定义的元素想关联. 2-相对定位 元素相对定位就是相对于它本来的位置来定位的. <!DOCTYPE html> <html> <head> <ti…