样式集小记下 

(一)CSS继承和优先级

1.CSS继承性

    内部元素将继承外部元素的样式,多个外部元素的样式,最终将叠加到内部元素上;

<body>是一个网页中最大的标记(容器),它里面定义的样式,会被所有的子元素进行继承;

CSS属性能被继承的元素:

    主要是CSS文本相关或CSS字体相关的属性,都会被继承。

    例如:Font-sizefont-familyfont-stylefont-weight、Colorline-heighttext-aligntext-indentletter-spacingword-spacingtext-decoration

<全局属性写在body>

提示:在继承过程中,是通过层层覆盖来实现相同属性值的替换。也就是说,距离“目标元素”越近,样式的优先级越高。

wKioL1c3Nm2hfqrTAABBT0m2LrE645.jpg

2.CSS优先级

1)单个选择器的优先级

       !important(IE6不支持) >  行内样式(style属性) >  ID选择器 > Class选择器 > HTML标签选择器


wKioL1c3NqWA3-n9AABACrKu5wk951.jpg

2)多个选择器的优先级计算

       假设,用1代表标签选择器,10代表类选择器,100代表ID选择器,1000代表行内样式

       H2{color:#FF0000}           优先级 1

       .newsh2{color:#0000FF}      优先级 11

       div.newsh2{color:#00FF00}    优先级  12

       div#newsh2{color:#FFFF00}    优先级  102

 

PHP通过include()require()将外部的某个文件引入到当前网页中。

例如:

    Header.php

    Footer.php

3.CSS定位属性

Position:元素定位,取值:static(静态定位)fixed(固定定位)relative(相对定位)absolute(绝对定位)

Left:设置元素距离左边多远;

Right:设置元素距离右边多远;

Top:设置元素距离上边多远;

Bottom:设置元素距离下边多远;

 

Static(静态定位)

任何元素,默认情况下都是静态定位。即:普通文档流、没有定位

Fixed(固定定位)

a.固定定位,是相对于浏览器窗口(大小是一定的),来进行的定位。

b.固定定位元素,将脱离普通文档流,并且不再占用空间,层级要高于普通文档中的元素。

c.固定定位元素,在没有指定定位坐标的前提下,将保持原来的形状和位置。

d.固定定位元素,是一个“块元素”,不管它原来是什么元素。

.news{
    width:180px;
    height:200px;
    border:1px solid #ff0000;
    background-color:#9900cc;
    position:fixted;/*固定定位*/
    right:20px;
    top:200px;/*在浏览器窗口中所在的位置。算法:(浏览器窗口的高-固定定位元素的高/2)*/
}

Relative(相对定位)

a.相对定位,是相对于“它原来的自己”来进行的定位(偏移)

b.相对定位,所占的空间依然保留,层级高于普通元素。

c.相对定位,在没有设置定位坐标前,将保持原来的形状和位置。

浮动、固定定位都可以将行内元素转化成块元素。

.news .div2{
    width:100px;
    height:100px;
    background-color:#9900cc; 
    position:relative;/*相对定位,相对于原来的自己进行位置的偏移*/

wKiom1c3PCWQQYTxAAAlpvuyHlY180.jpg


绝对定位(absolute)

绝对定位,是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素),来进行的定位。如果一直往上层找定位元素,如果没有找到,相对于网页来进行定位

绝对定位元素,不再占用空间,层级高于普通元素。

wKiom1c3PF3zFL-_AAASEVmjjnc629.png

wKiom1c3PKGzUvM4AABoHWSdoO8464.png

 

相对定位(relative)和绝对定位(absolute)一般是一起使用的。


4.CSS兼容性

不兼容性:因为不同的浏览器厂商,对CSS的解析不一样,造成了同一个网页,在不同的浏览器下浏览的结果相差太多,这种现象叫“不兼容”。解决“不兼容”的办法,就是兼容性的调整。

 

解决不兼容性,大致三种方法:

(1)      常用的全局CSS属性设置

(2)      常用的兼容性设置

(3)      CSS HACK

 

第一种:常用的全局CSS属性设置

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

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


2)项目符号

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


3)全局字体颜色设置

body{font-size:12px;color:#444;}


4)常用标题的设置

h1,h2,h3,h4,h5,h6{font-size:100%}

h1{padding:11px 0 0; margin-bottom:4px;font:normal20px/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}

 

5)全局链接

a{text-decoration:none;cursor:pointer}

a:link, a:visited {color:#004276}

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


6)图片

img{border:none;}

 

7)浮动和清除

.float1{float:left;}

.float2{float:right}

.clear{clear:both;}

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

 

8)颜色

.red{color:#FF0000;}

.blue{color:#0000FF;}

.green{color:#00ff00;}

 

第二种:常用的兼容性设置

IETEST软件:可以测试IE6IE7

1)网页居中

       IE5下的居中,应该是:text-align:center

       Firefox下的居中,应该是:margin:0px auto;

 

body{font-size:12px;color:#444;background:url(../images/bg-body.gif)repeat-x #f1f1f1;text-align:center;}

.box{width:973px;margin:0pxauto;text-align:left;}

2)单行内容垂直中齐

       Div{height:80px;line-height:80px;}

3IE中元素浮动时,margin左右加倍的问题

       解决办法:Display:inline; 

       wKioL1c3Pi2ijMNAAAAUe3z8xu8426.png

4)实现1px高度的<div>

IE6下解决办法:overflow:hidden;  //超出1px外的部分全部隐藏掉。

 

第三种:CSS HACK简介

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


1CSS属性的HACK

       div{

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

              *background-color#00FF00;   //ie6IE7支持

              _background-color#0000FF;   //IE6认识

}


2CSS选择器的HACK(了解一下)

       IE7浏览器能识别

*+html div{Background-color:#FF0000;}

   *html div{ Background-color:#FF0000;}

 

 

 

总结:

在写css样式集时,一般默认要写的东西:

1.对所有的标记去除内外边距,即body{margin:0px auto;padding:0px;}

2.对列表也要去除项目符号,即li{list-style:none;}

3.对页面进行宽、高、字体大小设置。即body{width:300px;height:100px;font-size:12px;}

4.对于不同的浏览器是需要调整兼容性的。

5.先写结构,再写样式集,最后写js.

6.浮动、固定定位都可以将行内元素转化成块元素。

7.相对定位(relative)和绝对定位(absolute)一般是一起使用的

8.margin会出现垂直上下边距会合并。我们可以选择其他的方法进行表示。


注意:CSS HACK虽然可能解决一些浏览器兼容的问题,但必竟不是W3C的规范,因此尽量少用,如果实在调试不过去,偶尔用一下可以。