样式集小记下
2016-05-15 10:59
417 查看
样式集小记下
内部元素将继承外部元素的样式，多个外部元素的样式，最终将叠加到内部元素上；
<body>是一个网页中最大的标记(容器)，它里面定义的样式，会被所有的子元素进行继承；
CSS属性能被继承的元素：
主要是CSS文本相关或CSS字体相关的属性，都会被继承。
例如：Font-size、font-family、font-style、font-weight、Color、line-height、text-align、text-indent、letter-spacing、word-spacing、text-decoration等
<全局属性写在body中>
提示：在继承过程中，是通过层层覆盖来实现相同属性值的替换。也就是说，距离“目标元素”越近，样式的优先级越高。
2.CSS优先级
（1）单个选择器的优先级
!important(IE6不支持) > 行内样式(style属性) > ID选择器 > Class选择器 > HTML标签选择器
（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
Left：设置元素距离左边多远；
Right：设置元素距离右边多远；
Top：设置元素距离上边多远；
Bottom：设置元素距离下边多远；
Static(静态定位)
任何元素，默认情况下都是静态定位。即：普通文档流、没有定位。
Fixed(固定定位)
a.固定定位，是相对于浏览器窗口(大小是一定的)，来进行的定位。
b.固定定位元素，将脱离普通文档流，并且不再占用空间，层级要高于普通文档中的元素。
c.固定定位元素，在没有指定定位坐标的前提下，将保持原来的形状和位置。
d.固定定位元素，是一个“块元素”，不管它原来是什么元素。
a.相对定位，是相对于“它原来的自己”来进行的定位(偏移)。
b.相对定位，所占的空间依然保留，层级高于普通元素。
c.相对定位，在没有设置定位坐标前，将保持原来的形状和位置。
浮动、固定定位都可以将行内元素转化成块元素。
绝对定位(absolute)
绝对定位，是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素)，来进行的定位。如果一直往上层找定位元素，如果没有找到，相对于网页来进行定位。
绝对定位元素，不再占用空间，层级高于普通元素。
相对定位(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软件：可以测试IE6、IE7
（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;}
（3）IE中元素浮动时，margin左右加倍的问题
解决办法：Display:inline;
（4）实现1px高度的<div>
在IE6下解决办法：overflow:hidden; //超出1px外的部分全部隐藏掉。
第三种：CSS HACK简介
CSS HACK，针对不同浏览器，编辑不同的CSS代码的过程，就叫CSSHACK。
（1）CSS属性的HACK：
div{
background-color：#FF0000; //所有浏览器都支持
*background-color：#00FF00; //ie6和IE7支持
_background-color：#0000FF; //IE6认识
}
（2）CSS选择器的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的规范，因此尽量少用，如果实在调试不过去，偶尔用一下可以。
（一）CSS继承和优先级
1.CSS继承性内部元素将继承外部元素的样式，多个外部元素的样式，最终将叠加到内部元素上；
<body>是一个网页中最大的标记(容器)，它里面定义的样式，会被所有的子元素进行继承；
CSS属性能被继承的元素：
主要是CSS文本相关或CSS字体相关的属性，都会被继承。
例如：Font-size、font-family、font-style、font-weight、Color、line-height、text-align、text-indent、letter-spacing、word-spacing、text-decoration等
<全局属性写在body中>
提示：在继承过程中，是通过层层覆盖来实现相同属性值的替换。也就是说，距离“目标元素”越近，样式的优先级越高。
2.CSS优先级
（1）单个选择器的优先级
!important(IE6不支持) > 行内样式(style属性) > ID选择器 > Class选择器 > HTML标签选择器
（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;/*相对定位，相对于原来的自己进行位置的偏移*/绝对定位(absolute)
绝对定位，是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素)，来进行的定位。如果一直往上层找定位元素，如果没有找到，相对于网页来进行定位。
绝对定位元素，不再占用空间，层级高于普通元素。
相对定位(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软件：可以测试IE6、IE7
（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;}
（3）IE中元素浮动时，margin左右加倍的问题
解决办法：Display:inline;
（4）实现1px高度的<div>
在IE6下解决办法：overflow:hidden; //超出1px外的部分全部隐藏掉。
第三种：CSS HACK简介
CSS HACK，针对不同浏览器，编辑不同的CSS代码的过程，就叫CSSHACK。
（1）CSS属性的HACK：
div{
background-color：#FF0000; //所有浏览器都支持
*background-color：#00FF00; //ie6和IE7支持
_background-color：#0000FF; //IE6认识
}
（2）CSS选择器的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的规范，因此尽量少用，如果实在调试不过去，偶尔用一下可以。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 工作小记（二）----说说烦心事
- 小记
- SCOI2015小记
- mysql 小记 增删改 从文件读取到表中 修改远程登录用户 更改ocs用户密码
- iptablse 小记
- 小记
- linux常识小记
- Xenserver5.5升级及故障排除小记
- “云”聚会—我的2010 GCR MVP Open Day小记
- Struts2.1.6测试小记
- 小记三款SD卡速度测试
- 电脑死机故障排查小记
- 2008 China MVP Open Day 小记 推荐
- VS2005 SP1 for vista 安装小记
- 多服务器通讯层应该如何设计—一次code review小记
- laravel小记（composer 安装和predis使用）
- 样式集小记上
- 为什么要建个博客，K哥
- 杂记