CSS学习笔记3

最新推荐文章于 2022-01-27 12:04:08 发布

游向大海的鱼

最新推荐文章于 2022-01-27 12:04:08 发布

阅读量114

点赞数

分类专栏： DIV+CSS

DIV+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

全局CSS设置：

1、清除所有的标记的内外边距

body,ul,li,a,img,p,input{ margin:0px;padding:0px; }

2、去除项目符号编号前面的符号

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

3、全局链接效果

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

4、网页中所有的文字大小颜色

body{ font-size:12px;font-family:宋体;}

5、去除图片的链接边框线

img{ border:0; }

6、全局的类样式

.floatL{ float:left; }

.floatR{ float:right; }

.clear{ clear:both; }

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

.red{ color:red; }

常用的兼容性调试技巧：

1、实现所有浏览器主页居中

Firefox下浏览器居中代码：.box{ margin:0px auto; }

IE5.5下主页居中代码：body{ text-aling:center; }

将以上两种代码，合在一起写：

body{ text-align:center; } /*IE5.5主页居中，会导致文本居中对齐*/

.box{ width:980px;margin:0px auto;text-align:left; } /*添加text-align属性，使文本恢复默认左对齐*/

2、单行文本上下居中

h1{ height:30px;line-height:30px; }

3、在IE6（可能是bug）下，左右margin会加倍

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body{ margin:0px;padding:0px;background-color=gray; }
.news{
    width:200px;
    height:150px;
    background-color:yellow;
    margin:50px;
    float:left;
    
    display:inline; /*将块元素转成行内元素，解决margin加倍问题*/
}
</style>
</head>

<body>
<div class="news"></div>
</body>
</html>

提示：排版时，能使用padding解决的，坚决不用margin。如果实在想用的话，使用其中一边。

CSS HACK

针对不同浏览器，书写不同的CSS代码的过程，称为"CSS HACK"。

也就是说：写一个CSS代码，让IE6识别，其它浏览器不识别。

下面，针对不同的浏览器，有几个符号：
这些符号是在CSS属性的前面加的，用于分辨不同的浏览器。

"*" IE6和IE7都识别。如.box{ *background-color:red; }

"_"只有IE6识别。如：.box{ _background-color:green; }

body{
    background-color:#444;        /*所有浏览器都支持*/
    *background-color:red;        /*IE6和IE7都识别*/
    _background-color:green;        /*IE6识别*/
}

使用CSS HACK来处理IE6下，左右margin加倍问题。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body{ margin:0px;padding:0px;background-color=gray; }
.news{
    width:200px;
    height:150px;
    background-color:yellow;
    margin:50px;
    _margin:50px 50px 50px 25px;    /*仅IE6识别*/
    float:left;
}
</style>
</head>

<body>
<div class="news"></div>
</body>
</html>

注意：CSS HACK不是w3c的标准，因此，不推荐使用。如果调试兼容性无法解决时，可以偶尔用一下。