10_CSS入门和高级技巧(8)

时间  2019-11-20 标签 10 css 入门 高级 技巧 8

图片透明

先来复习一下盒子的透明问题：
opacity:0.6;
介于0~1之间，为了让IE兼容，咱们要使用IE本身的滤镜：
filter:alpha(opacity=60);
盒子的透明，会让里面的全部内容都透明了，若是想要让文字清晰，就不能把文字装到盒子里，要用绝对定位定。javascript

图片格式：css

  • jpg/jpeg：著名图片压缩格式，有压缩算法，可以本身更改质量；即便质量是100，也是压缩的，也是颜色失真的。没有图层，不能动。banner、新闻图、焦点图都要用jpg格式的图片。
  • png：不压缩的，没法调整质量。有图层，放到服务器上的时候，要导出一下，平面化整个图像，不要图层，压平。不能动。擅长作logo、几何图形比较规律的图片，尺寸比jpg还要小：

支持透明和半透明。html

  • gif：严重失真，颜色数量只有25六、128…… 2种颜色。可以制做动画。没有图层。
    支持透明，可是不支持半透明。
    gif

IE6的显示有问题的：
IE6的显示有问题java

因此如今咱们就能琢磨出来一种兼容性的解决方法：
在IE6中就是用gif来替代png
background: url(images/icon_v9.png) no-repeat 0 0;
_background-image: url(images/icon_v9.gif);算法

还有一种办法，就是用一个神奇的js，来解决png的IE6透明问题。
老师给你一个png.js这个文件，这个文件业界比较著名，机理就是反编译这张图片，把全部的透明像素点都用IE特有的滤镜来反编译一下：
须要先“引包”：浏览器

<script type="text/javascript" src="png.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix(".haha,.xixi");
</script>

红色的语句，就是引包，src里面放置的就是js文件的相对路径。
蓝色的语句，是调用，圆括号里面要放置全部须要解决png问题的图片的选择器。须要注意的是，选择器能够是img直接插入的，也能够是背景图片。服务器

能够用HTML hack，加一个壳，让其余浏览器不加载这个js代码：
字体

全部有背景定位的图片，这个js包就有bug，就定位不许了。因此精灵图就不要用这个js来解决了。
display:none;
加上这个属性的元素，就如同HTML标签没有写同样。将会放弃本身的位置。后面的元素就会上来。动画

还有一种可让元素隐藏的东西，叫作
visibility:hidden;
不会放弃如今的位置，就是本身隐藏掉了。就如同
opacity:0;ui

样式表的组织

1.内嵌样式表

原来把样式写在<style type=”text/css”> </style>叫作内嵌样式表。内嵌样式表，感受HTML和CSS没有分开，可是有好处，能够保证HTML加载的时候，就已经有样式了。页面不会出现CSS加载不正常的状况。
若是样式表外联，可能出现极小几率的样式表没有请求成功的状况，刷新一下就行了。

不过内嵌样式表的问题更大，HTML、CSS混在一个文件了，很差维护；而且css也不能共用。

2.外联样式表

能够把css单独写成一个.css文件，html页面用link标签来连接这个样式表：
<link href=”css.css” type=”text/css” rel=”stylesheet” />
link就是链接的意思，表示如今这个html页面要连接一个样式表；
href就是超文本地址的意思，和a里面href同样同样的，相对路径、绝对路径都行；
type就是类型，text/css就是纯文本的css类型
rel就是relationship，关系，就是我引用的这个文件和我这个html的关系，是stylesheet，样式表。
“三小件儿”：href、type、rel

link是一个自封闭标签，至此咱们已经见过的自封闭：

<img src=”1.jpg” />
<input type=”button” />
<meta name=”” content=”” />
<link href=”” type=”” rel=”” />
<br />

这样的好处很是明显，就是:
1) HTML和CSS文件完全分离了！html文件里面只有html结构了，css样式放到了单独的css文件中了；
2) 多个html文件，共享一个css文件了。页面中相同的部分，就能够引用一样的样式表，不用重写了！
HTML与CSS分离

要注意两个严重的问题：
1）外联的css中，若是要用到背景图片，那么路径是从css文件出发，而不是从html文件出发。
background:url(../images/1.jpg);
2）外联样式表不影响权重，就如同咱们的css写在html页面内的link那里同样，一样是比选择器权重、就近原则。

3.行内样式

若是想给一个元素加一个样式，能够直接在这个元素的html标签内加上style属性就好了

<div style="color:red;border:1px solid red;width:800px;height:800px;font-family:'微软雅黑','宋体';background:url(images/shishi.jpg) repeat-x 10px 10px;">文字</div>

行内样式已经丧失了咱们的css的一些优势，就没有选择器的概念了，由于就是给这一个元素加样式（该继承的仍是继承）。因此工做不多用，后台工程师爱用这个东西。
Chrome浏览器中，用element.style来表示行内样式：
行内样式

行内样式的权重，是最大的，能够认为是写在第4位的权重，比id厉害：
好比#box div.haha ul li 它的权重(1,1,3)
而<div style=”width:100px;color:red;”></div> 的权重(1,0,0,0)
任何的权重都比不上行内。没有!important大。

<div id="father">
   <div style="color:red" id="box">
       文字
   </div>
</div>

#father #box{color:green;}
文字是红色的，由于行内的权重是最大的。

4.导入式的样式表

几乎已经绝迹了，没有人在用了。

<style type="text/css">
   @import url(css/css.css);
   body{
       background-color: pink;
   }
</style>

用@import url(地址) ， 这是一个固定的语法，没有什么好说的。就能够把样式表导入进来。
好比写在第一行。这种写法，就是一个理论上的意义，没有实战意义，由于感受是内嵌样式表、外联样式表混合起来了。若是你要外联，你就老实的用<link href=”” />。若是内嵌，就老实内嵌。不要杂糅。

5.站点的css组织

css文件是分层次：
站点的CSS

reset.css：让全部的元素都有默认的样式，好比ul没有小圆点，好比h1的字号22px……
这是由于不一样浏览器对标签有不一样的默认样式，好比某个浏览器h1默认字号是22px，而有的是24px。
最最著名的reset.css就是雅虎公司的YUI的reset.css。
网址：http://yuilibrary.com/yui/docs/cssreset/

之后页面上不容许出现这个：
*{margin:0;padding:0;}
有超过1秒的渲染时间。因此就要用h1,p,h2罗列出来，清除margin、padding。咱们的YUI reset.css就是这么作的。
表格的边框合并：
border-collapse: collapse;

表格的边框合并

这个样式表不能更改，就是负责统一全浏览器默认样式的，去掉了全部的margin、padding ，去掉了小圆点。

base.css 公共类，就是原子类

.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%}
.lh180{line-height:180%}
……
……

建议同窗们本身总结这些原子类。

common.css： 页面和页面之间，公共的样式部分。
page.css: 每一个页面本身的样式

说道说道display:inline-block;

标准流的事儿，标准流把元素分为行内、块级。性质大相径庭。

display:inline-block;
让元素同时具备行内、块级元素的性质。

设置为行内快的元素，在高级浏览器中的表现和float：left;很是的像，有一个很是大的不一样：
就是空白折叠现象。代码竖着写，中间会折叠成一个空格：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

div

span也能设置宽度、高度了；
margin也好用。IE6中不让默认的块级元素转为行内块。
display:inline-block;那么好用，为何不用，而是用浮动呢？

  • 空白折叠现象，元素贴边爱有一个空格。
  • 只有左，没有右。
  • 盒子加上inline-block以后，就和文本同样同样了，div转为inline-block，就和能设置宽高的span同样了。
  • 时代缘由，你们都爱写浮动，inline-block在抢占技术实施标准那几年，没有火起来。
    可是inline-block可以解决兼容性问题。

display:inline-block

浮动的父元素不写宽度，会自动收缩为儿子的宽度；儿子不巧，转块了也没写宽度，因此要撑满父亲。
高级浏览器、IE七、IE8等：会尽全力知足父亲的收缩，缩到不能缩位置；
IE6：会尽全力知足让儿子撑满。
解决办法：
_display:inline-block;

iconfont

字体图标：图标不是图标了，也不是精灵了，而是字了。
字怎么是图标，这个字在某一个字体下，就是图标。
icomoon.io 是国外很是著名的一个字体图标引擎，能够免费的、在线把任何矢量图片变成字体。

iconfont

字体图标的特色：

  • 不用下载图片了，就不浪费http请求了，可是要下载字体文件，到底省流量没有，见仁见智。
  • 只能是单色，不能是多个颜色。没法制做彩色花图标。
  • 控制这个图标，就用控制字体的方式来控制就好了。

icomoon里面图标很少：
美工来制做ai格式的图标，能够在icomoon里上传，而后改。
icomoon

联系我们 沪ICP备2021010478号-7