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%"});/*奇数宽度*/
}
});
});

css高级应用及问题记录(持续更新)的更多相关文章

  1. C#技巧记录——持续更新

    作为一名非主修C#的程序员,在此记录下学习与工作中C#的有用内容,持续更新 对类型进行约束,class指定了类型必须是引用类型,new()指定了类型必须具有一个无参的构造函数 where T : cl ...

  2. C# 知识点记录(持续更新中)

    从看C#入门经典开始系统的学习C#,本文主要记录学习过程中的一些知识点,也是我博客生涯的开始,比较重要成体系的部分会单重新写文章整理归纳. 1.一字不变的字符串 @字符 使转义序列不被处理,按照原样输 ...

  3. DP刷题记录(持续更新)

    DP刷题记录 (本文例题目前大多数都选自算法竞赛进阶指南) TYVJ1071 求两个序列的最长公共上升子序列 设\(f_{i,j}\)表示a中的\(1-i\)与b中色\(1-j\)匹配时所能构成的以\ ...

  4. ubuntu使用问题与解决记录[持续更新]

    1. 添加到计划任务 为脚本增加可执行权限 sudo chmod +x yeelink.sh 将脚本加入cronjob(计划任务) sudo crontab -e 在cornjob文件中添加下面一行, ...

  5. CSS知识总结之浏览器(持续更新)

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  6. mysql数据库操作记录持续更新...

    1.查看删除数据库表的唯一约束 SHOW INDEX FROM tbl_name (唯一约束也是索引) ALTER TABLE tbl_name DROP INDEX index_name   2.u ...

  7. html5 经验记录 持续更新

    1 关于page cache 由于移动端浏览器webkit基本都实现了page cache(火狐叫做back-forwoad cache);所以回退操作基本不会触发onload操作了,不过上一页的状态 ...

  8. oracle 常用操作记录--持续更新...

    一.oracle grant 授权语句(转自:https://www.cnblogs.com/yt954437595/p/6488819.html) --select * from dba_users ...

  9. 满血复活前的记录(持续更新ing)

    时隔一年重新开启算法竞赛征程. 该记录大多为老课件.已经做过的习题重做和已经看过的书本重看 7.21 下午到山大 娄晨耀basic_algorithm课件中的内容: 复习线性筛原理 复习差分 做完Co ...

随机推荐

  1. 页面可见生Page Visibility

    Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...

  2. 删除注释云平台JS,加快DISCUZ访问

      对于港台或者美国服务器的用户可能感觉访问慢,页面卡:实际上是由于 http://www.discuzlab.com/discuz.gtimg.cn/cloud/scripts/discuz_tip ...

  3. c++中resize函数怎么用

    resize(),设置大小(size);reserve(),设置容量(capacity);size()是分配容器的内存大小,而capacity()只是设置容器容量大小,但并没有真正分配内存.打个比方: ...

  4. SQL Server 索引(index) 和 视图(view) 的简单介绍和操作

    --索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...

  5. python模块学习心得

    初始模块 1.什么是模块 模块是用来实现某项功能的一大堆代码,为什么会有模块呢?过程式编程的时候为了减少程序员编程代码的重复性,就利用函数的调用减少了代码的重复性,但是某些时候程序会过于的庞大,我们会 ...

  6. 传输层(2)-TCP连接的建立和终止、TIME_WAIT状态

    1.TCP连接的建立和终止 1)三路握手 客户端发送一个SYN(同步)分解,告诉服务器客户将在连接中发送的数据的初始序列号. 服务器发送确认客户的SYN(ACK),同时自己也得发送一个SYN分节,它含 ...

  7. 经典的Hello World VFP前端调后端C# Webservice

    1.按我设想的三层架构中,VFP是完全可以做为前端UI的,我们可以划分如下三层结构: 图片:三层架构图.jpg[设为封面] [删除] 其实大家看图,都明白大致意思,但是要明白各层数据是怎么流动的,却要 ...

  8. LoadRunner --HTML/URL录制方式的选择规则

  9. Python第一模块

    一.Python简介 二.Python种类 三.Python环境  windows: 1.需要配置环境变量 2.更新:卸载重装 linux:1.常用命令: 查看默认Python版本 Python -V ...

  10. perl中常见的语法规则和函数

    数值比较操作符         字符串 相等          ==                        eq 不等          !=                         ...