项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before

项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before_第1张图片
目录:
1、背景图合并和CSS Spirit
2、PS基本快捷键
3、hack技术基本书写,为什么不用?
4、内核前缀
5、伪类afterbefore

1、背景图合并和CSS Spirit

背景图合并在使用时有两种方法:

①一种就是你会PS,可以自己PS实现背景图合并成一张图片,再用background-position实现背景图的定位。

②如果你不会PS,那可以用CSS背景图合并工具,直接选好图片后在线制作生成相对应格式的图片,方便快捷。

 

background的语法:

background-color:red | #RGB;

background-position:X轴坐标 Y轴坐标 | left| right | center | top..

background-size: 100px | 30% | cover | contain;    在线测试

background-repeat: repeat | no-repeat | repeat-x | repeat-Y

background-origin:border | padding | content

background-clip:border-box | padding-box | content-box

background-attachment:fixed | scroll

background-image:url

简写的形式:background:color url() positon repeat;

备注:background-size的属性值如果只设置一个值,则第二个值会被设置为 "auto"。

      cover实现把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

      contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

背景图合并技术优势:利用背景图合并技术可以减少向服务器端的请求,节省时间和带宽,对网站加速有很大的提升作用。可以实现两边圆角,中间无限延伸,通过子标签背景覆盖父标签,三层嵌套,截取图片的中间部分以及左右两边,算好图片的位置,然后利用position定位。


2、PS基本快捷键

ctrl+w 关闭

ctrl+r 标尺  右键标尺选像素或者厘米 左键点击拉出标尺线  要删掉直接拖出去

ctrl+ + 放大

ctrl+  -缩小    

ctrl+1  到100%视图

ctrl+0 还原到最佳视图

ctrl+d取消选区

ctrl+t 变形 在变形过程中按住shift保持宽高不变  按Enter退出变形

Alt+Delete 前景色填充

ctrl+Delete 背景色填充

ctrl+z 撤销

ctrl+Alt+z 撤销多次

空格 切换到手状态

ctrl+g  图层分组


3、hack技术基本书写,为什么不用?

CSS hack:针对不同的浏览器写不同的CSS code的过程

 CSS Hack大致有3种表现形式,CSS属性前缀法选择器前缀法以及IE条件注释法

① 属性前缀法:  IE6:      _height: 20px;
                            IE7:      +height: 20px;
                         IE6/IE7:   *height: 20px;
                         IE6.7.8.9.10:  height: 20px\9;
                         IE8.9.10.11 :  height: 20px\0;
                           IE9.10      :    height:20px\9\0;

Hack的利弊:

我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支

持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc

或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html

文档混乱不堪,增加管理和维护的负担。相信只要大家一起努力,少用、慎用hack,未来一定会促使浏览器厂商的标准越来越趋

于统一,顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack,必将减轻我们编码的复杂度,少做无用功。



内核前缀

浏览器

内核前缀

内核

FF

-moz

Gecko

IE

-ms

Trident

Chrome

-webkit

Blink

Opera

-o

换成-webkit

Persto

换成blink,原先已弃用

Safria

-webkit

webkit



伪类after before

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素

:before 伪元素在元素之前添加内容 
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。 
:after 伪元素在元素之后添加内容 
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。


实现效果:
项目期复习总结1:背景图合并,hack,浏览器内核前缀,伪类after before_第2张图片

[html] view plaincopyprint?在CODE上查看代码片
  1. 实现简单代码  
  2. <html>  
  3. <head>  
  4.      <meta charset="UTF-8">  
  5.      <title>Testingtitle>  
  6.      <style>  
  7.          .wrap:before {  
  8.               content: '';  
  9.               width: 100px;  
  10.               height: 50px;  
  11.               display: block;  
  12.               background: #F00;  
  13.          }  
  14.          .wrap:after {  
  15.               content: '';  
  16.               width: 100px;  
  17.               height: 50px;  
  18.               display: block;  
  19.               background: #Fa0;  
  20.          }  
  21.      style>  
  22. head>  
  23. <body>  
  24.      <div class="wrap">div>  
  25.      <script>script>  
  26. body>  
  27. html>  

伪类清浮动:

.clearfix:after {content:"\200B";display:block;height:0;clear:both;}

.clearfix {*zoom:1;}

你可能感兴趣的:(HTMl5,HTML5自由者,HTML5自由者,背景图合并,伪类after,before,hack技术,浏览器内核)