菜单

千一教程,CSS的兼容性解决方案

2020年1月26日 - 4166am金沙下载
千一教程,CSS的兼容性解决方案

CSS(Cascading Style
Sheet,叠层样式表),作用是美化HTML网页。

什么是兼容性?


一、样式表

同一个网页,在不同浏览器下(IE6、IE7、IE8)下的显示效果不一致,这就是说”CSS不兼容”。

千一教程 从用出发

(一)样式表的分类

IETESTer可以同时测试IE5.5、IE6、IE7、IE8这些版本的网页效果。


1.内联样式表

解决CSS兼容性的方法

在前面两节中,我们已经进入样式表的大堂了,从这一节开始,我们讲述制作一个网页时常用的样式表。我们要说明的是,各种浏览器对其中某些样式的解释并不完全相同,我们这里只给出一种比较通用的解释,至于其具体区别,请参见
千一网络 其它专题或文档。先请看下面一个示例。

  和HTML联合显示,控制精确,但是可重用性差,冗余较多。

  1. CSS全局设置的重要性

  2. 常用的CSS兼容性的总结

  3. CSS HACK(不推荐使用

body
{
    background-image:url(“../images/bodyBg.gif”);
    text-align:center;
    font-size:14px;
}

  例:<p
style=”font-size:14px;”>内联样式表</p>

CSS全局样式的设置

1、清除网页中所有标签的内填充和外边距

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form, input,p,
th,td{margin:0;padding:0}

2、项目符号

    ul,ol,li{list-style:none;}

3、图片边框

    img{border:none;}

4、超级链接

    a:link,a:visited{color:# 004276;text-decoration:none;}

    a:hover{text-decoration:underline;color:#ba2636;}

5、body网页中文本颜色、大小、行高、背景色的统一设置

    body{font-size:12px;font-family:simsun
,”宋体”;background:#fff;color:#2b2b2b}

6、各种标题

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px
黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体;
text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

7、常用的字体颜色

    .red{color:#FF0000;}

    .blue{color:#0000ff;}

    .gray{color:#808080;}

    ……

8、清除和浮动

    .floatL{float:left;}

    .floatR{float:right;}

    .clear{clear:both;}

    .blank10{height:10px;clear:both;}

 

form
{
    margin:0px 0px 0px 0px;
}

2.内嵌样式表

常用的CSS兼容性问题

1、任何浏览器实现主页居中

    IE中主页居中,使用的是text-align:center

    Firefox中主页居中,使用的margin:0px auto;

body{

    background:#ccc
url(..g-body.gif) repeat-x;

    font-size:12px;

    color:#444;

    font-family:”宋体”;

    text-align:center; /*IE下的居中*/

}

ul,li{list-style:none;}

a:link,a:visited{color:#444;text-decoration:none;}

a:hover{color:#FF0000;}

.clear{clear:both;}

.box{width:960px;margin:0px auto;text-align:left;}

 

2、容器中,单行内容垂直居中

    .title{height:30px;line-height:30px;}

3、IE6下,元素浮动,使margin左右加倍

.div1{

    width:200px;

    height:100px;

    border:1px solid #006600;

    margin:50px;

    float:left;

    display:inline;
/*将块元素转成行内元素*/

    _margin-left:25px; /* IE6能识别 */

}

4、IE6下,定义1px高的容器

.box{

    height:1px;

    background-color:#006600;

    overflow:hidden; /*超出部分被隐藏了*/

}

 

5、统一光标的类型

.header .logo
.div3{width:358px;height:107px;float:right;padding-top:15px;cursor:pointer;}

table
{
    font-size:13px;
}

  作为一个独立区域内嵌在网页里,必须写在head标签里面。

CSS HACK(不推荐使用)

针对不同浏览器,编写CSS 代码的过程,就叫CSS HACK。

(1)CSS属性的HACK

图片 1        .box{

background-color:#FF0000; //所有浏览器都支持

*background-color:#00FF00; //
IE6和IE7支持

_background-color:#0000FF; //IE6支持

}

(2)CSS选择器的HACK (看一下即可)

        .box{background-color:#FF0000;} //所有浏览器都识别

        *+html .box{ *background-color:#00FF00;} //IE7能识别

        *html .box{ _background-color:#0000FF;} //IE6能识别

p
{
    text-indent:28px;
    line-height:150%;
}

  <style type=”text/css”>

ul
{
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding:0px 0px 0px 20px;
}

  p   //格式对p标签起作用

li
{
    line-height:170%;
    border-bottom:1px solid #FF0000;
}

  {

img
{
    border:none;
}

  样式;

a:link
{
    font-size:14px;
    color:#333366;
    text-decoration:none;
}

  }

a:visited
{
    font-size:14px;
    color: #333366;
    text-decoration:none;
}

  </style>

a:hover
{
    font-size:14px;
    color: #FF0000;
    text-decoration:underline;
}

3.外部样式表

可以看出前面所使用的全部是类型选择符,用大括号把样式括起来表示这些样式的作用于该
HTML 类型。

  新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

从上往下看 body:

  有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

background-image:url(“../images/bodyBg.gif”);

<style type="text/css">
*  /*表示格式对所有标签起作用*/
{
     margin:0px;
    padding:0px;
}
</style>

这句表示背景图片,url
后面跟背景图片地址,注意其地址路径是相对于样式所在文件来说的,请参见:样式表中url()的相对路径使用(8月11日修正)

(二)选择器

如果不使用背景图片,背景颜色又是如何设置的呢,如下:

1.标签选择器。用标签名做选择器。

background-color:transparent 或 background-color:颜色代码

<style type="text/css">
p
{
    background-image:url(../%E5%9B%BE%E7%89%87/u=247551981,715822094&fm=21&gp=0.jpg);
    font-size:24px;    
    padding:20px;}
</style>

background-color:transparent
表示透明,实际上默认就是透明的。颜色代码我们会在下一节具体给出。

<body>
<p>这是我的第一句话!</p><br />

继续往下走:

</body>

text-align:center;

 

表示内容居中显示,比如文字、图片居中显示。属性值有:

图片 2

2.class选择器。都是以“.”开头。

text-align 具有传递作用,就是说 body 中设置了 居中, body 标签内的
 table、p 等标签的内容也是居中的,字体属性一般都具有这种特性。

<style type="text/css">
.a
{

继续:

     background-color:#F00;
     font-weight:bolder;
     border-top:10px solid #00C;}

font-size:14px;

</style>
<body>
<div class="a">不疯魔不成活。</div><br />
</body>

一看就知道表示文字大小了,示例中为:14
像素,同样字体大小的单位我们也会在下一节中给出。请参见:为什么使用px而不使用pt?

图片 3

来到 form 标签:

3.ID选择器。以“#”开头。

我们以前不理解,为什么插入 form 后总会在底部有一个删除不掉的空白,这就是
form 的外边距造成的,也就是说默认情况下 form
的最外围会与其它元素(如表格)保持一定的距离,就像两栋房间留有过道一样。

<style type="text/css">
#b
{
    background-color:#9F0;
    font:Arial, Helvetica, sans-serif; 
    font-size:18px;
    text-align:center;
    font-weight:800;
    }
</style>
<body>
<div id="b">This is abook.</div><br />
</body>

margin:0px 0px 0px 0px;

图片 4

有四个 0px 分别表示 form 的上、右、下、左外边距为 0px,注意其顺序。

4.复合选择器

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图