css高级应用及问题记录（持续更新）

css 参考手册：

1、http://css.doyoe.com/

1、混合选择器样式定义：

.button.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 12px;
    height: 12px;
    margin: 0 0.75em 0 -0.25em;
    background: url(gh-icons.png) 0 -288px no-repeat;
}

这个样式定义的意思：

　　含有“.button”和“.icon”class属性的元素前加入一个伪类 （.button.icon:before 可以这样理解：第一个class选出了含有“.button”的元素，第二个class又选出了且含有“.icon”的元素）

　　如：<button class="button icon"> 提交 </button>

　　效果：

以上纯是自己理解，没有找到相关参考资料，如有不妥处，请指正！

jquery的选择器附属说明：

　　id选择器，如果id包含“.”（如： id="button.displayarea"）直接使用id选择器(如：$("#button.displayarea") )是无法选中的，

　　因为该选择器已经被解释为：选择id为“button”且class为“displayarea”的元素；

　　正确写法：$("#button\.displayarea")，即“.”需要转移。

 2、css文件定义，样式覆盖问题:

在css文件中这样定义时，无法起到很好的覆盖作用：

/* 所有button通用样式*/

.app_operations button{
 border: 0px solid #dcdcdc;
 padding: 0px;
 background: url(img/button.gif) no-repeat;

}

/* button的个性化样式 */

.app_btn_more {
 width: 38px;
 height: 16px;
 margin-right: -15px;
 background: url(img/more.gif) no-repeat;
}

以下方式定义才能起到很好的覆盖作用：

.app_operations  button{

... ...

}

/* button的个性化样式 */

.app_operations  .app_btn_more {

... ...

}

3、span  a 等这些行级元素宽高设置：

这些行级元素（相反的是块级元素：div...），有时设置宽高无效；

处理方法：display：inline-block;（不设置为block，还是想保留行级元素效果），因为块级元素才有宽高设置（鄙人是这么理解的）

4、块级元素变内联元素问题

（主要场景：文字前加操作图标）

遇到div设置display：inline-block，ie8以下版本显示异常，仍换行显示；设置display：inline，ie8以上又不能显示，头大；

后来无奈改用内联元素设置display：inline-block。

5、css样式写在jsp（或php等）

如“import-csshead.jsp”中：

//**设置字体颜色

body{

　　color：<%=request.getAttribute("color")%>；
 }

如此可以从后台中来设置样式，亦可以扩展成配合界面来动态配置样式（或主题）

6、css中引用变量

/*声明变量*/@nice-blue: #5B83AD;

说明：

1、以@开头

2、:前面@后面是变量名，只能以字母开头，可以中间包含数字，或以数字结尾，中间可以有_下划线，不能用下划线结尾

3、:冒号后面;分号前面是变量值

/*加变量*/

@light-blue: @nice-blue + #111;

说明：

可以加法运算，需要谨遵格式“变量=变量+值”

/*乘变量*/

@light-blue: @nice-blue * #111;

说明：

可以乘法运算，需要谨遵格式“变量=变量*值”

 7、css文件引入css文件

　　引入方式：在一个CSS文件利用@import url('其他的CSS文件')，想引入几个CSS文件就用几个@import url

　　eg：首页需要两个CSS文件index.css和common.css，就在index.css的首行写入(两个CSS文件在同一个目录下)
　　@import url('common.css');
　　这样只需要在首页链接一个index.css文件就可以了。

 8、css定义的样式和style样式

　　我们都知道style样式是最高级别的，有时候一些顽疾可以通过style强行控制，但是在项目中突然遇到一个奇葩问题：页面嵌套，style样式有时候会失效（比如使用load方式--我用的是加载html片段方式，我的理解是：load和主页面有时间差，主页面已经加载完成了，load未必已经加载完成，导致load的部分未能渲染）；

　　但如果我们该用class方式时，样式有能回归正常（我猜想，莫非class是动态渲染？原理希望有大神能告知我）

　　实例：　

　　// ****************************************************************************

　　　　<table>
 　　　　　　<tr>
  　　　　　　　　<td style="width: 150px;">标题</td>
  　　　　　　　　<td> <input value="12345678"/> </td>
 　　　　　　</tr>
　　　　</table>

　　　　这个代码片段被加载后样式不生效；

　　// ****************************************************************************

　　　　<table>
 　　　　　　<tr>
  　　　　　　　　<td class="td_left">标题</td>
  　　　　　　　　<td> <input value="12345678"/> </td>
 　　　　　　</tr>
　　　　</table>

　　　　<style>
 　　　　.td_left{
  　　　　　　width: 170px;
  　　　　　　min-width: 150px;
 　　　　　　 text-align: right;
 　　　　}
　　　　</style>

　　　　这种方法的代码片段被加载后生效。

　　// ****************************************************************************

9、css之style中调皮的‘px’

（a）：<div style="width:200px;height:;">123</div>

　　这段代码在ie浏览器中，你将无法看到该元素，chrome和firefox等正常；

（b）：<div style="width:200px;height:423px;">123</div>

　　加上‘px’后，在ie浏览器中能正常显示；

总结： TNND，ie能不能愉快玩耍了。

10、table样式精简整理

1、粗简版

<style>
   .app_style {
    color: #666666;
    font-size: 12px;
    text-align: center;
    font-family: Microsoft YaHei,Verdana, Arial, Helvetica, sans-serif;
    border-collapse:collapse;
   }
   .app_style td {
    min-height: 30px;
    padding-left: 5px;
    vertical-align: middle;
    border: 0px dotted silver;
    border-bottom-width: 1px;
   }
   .app_style .table-td-left{
    width: 150px;
    max-width: 150px;
    padding-right: 10px;
    font-weight: 700;
    text-align: right;
   }
   .app_style .table-td-right{
    padding-left: 5px;
    text-align: left;
   }
  </style>
  <table class="app_style" style="width: 400px;">
    <tr>
     <td class="table-td-left">小标题：</td>
     <td class="table-td-right">二月春光初乍现</td>
    </tr>
    <tr>
     <td class="table-td-left">基本描述：</td>
     <td class="table-td-right">龙女八戒共缠绵</td>
    </tr>
    <tr>
     <td class="table-td-left">忧伤的感慨：</td>
     <td class="table-td-right">天理何在</td>
    </tr>
  </table>

2、js精炼版

<!-- Javascript goes in the document HEAD -->

<script type="text/javascript">

function altRows(id){

if(document.getElementsByTagName){

var table = document.getElementById(id);

var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){

if(i % 2 == 0){

　　　　     rows[i].className = "evenrowcolor";

　　　　  }else{

　　　　     rows[i].className = "oddrowcolor";

　　　　   }

}

}

}

window.onload=function(){

altRows('alternatecolor');

}

</script>

<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">

table.altrowstable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-style: solid;

border-color: #a9c6c9;

border-collapse: collapse;

}

table.altrowstable th {

border-width: 1px;

padding: 8px;

border-style: dotted;

border-color: #a9c6c9;

}

table.altrowstable td {

border-width: 1px;

padding: 8px;

border-style: dotted;

border-color: #a9c6c9;

}

.oddrowcolor{

background-color:#d4e3e5;

}

.evenrowcolor{

background-color:#c3dde0;

}

</style>

<!-- Table goes in the document BODY -->

<table class="altrowstable" id="alternatecolor">

<tr>  <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr>

<tr>  <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr>

<tr>  <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr>

<tr>  <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> </tr>

<tr>  <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> </tr>

<tr>  <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> </tr>

</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

11、文字两端对齐

.textAlign{
    text-align:justify;
    text-justify:distribute-all-lines;
    text-align-last:justify;
}

12、多个表格，列数相同时对齐

最理想的处理方式，宽度都设置成百分比，算法实现：

$("table>tbody>tr").each(function(){
        var tds = $(this).find("td");
        var total = 0;
        tds.each(function(){/*统计一行td数，合并的td拆开计算*/
            var td = $(this);
            if(td.attr("colspan") && (td.attr("colspan")-0>0) ){
                total += td.attr("colspan")-0;
            }else{
                total++;
            }
        });
        var avg = Math.round(total/2);
        var avgWidth = Math.round((100-10*avg)/avg);
        tds.each(function(){
            var td = $(this);
            if(td.find("div,input,select,textarea,button") && td.find("div,input,select,textarea,button").size()>0){if(td.attr("colspan") && (td.attr("colspan")-0>0) ){
                    td.css({width:avgWidth*(td.attr("colspan")-0)+"%"});/*偶数跨列跨度*/
                }else{
                    td.css({width:avgWidth+"%"});/*偶数宽度*/
                }
            }else{
                td.css({width:"10%"});/*奇数宽度*/
            }
        });
    });