[CSS] CSS Web Note

Cascading Style Sheet Note


※ Web Site && 工具
※ 52CSS
※ 网网相连
※ 单位转换
※ CSS 备忘


※ Web Site && 工具

◎ 梅问题 -- 《CSS Sprite》将布景中多张图片合并,提升网站性能 2014-9-3

◎ Flycan -- Reset CSS – 重置归零 – 网页排版在各浏览器快速一致化  2011-2-25 ★★★★★

◆ W3CPlus -- Css3 工具 ★★★★★

◆ Pure -- CSS Modules

◎ CSS 3.0 MAKER ★★★★★

◆ 浏览器HTML5/CSS3支持度速查工具 http://caniuse.com

◎ 蚂蚁的 CSS 

◎ w3schools HTML Symbol Entities  HTML URL Encoding Reference  CSS Selector Reference

◎ php100 CSS3中文手册 JavaScript入门手册 JavaScript中文手册 W3school精华手册

◎ 各个浏览器对CSS标准各属性支持的情况列表

◎ BarelyFitz Designs -- Learn CSS Positioning in Ten Steps ★★★★

◎ HINA - [Layout] Web Design Part 3
◎ HINA - [Layout Tech.] Web Design Note With XHTML/CSS
◎ HINA - [Layout Tech.] Web Design Note With XHTML/CSS Part 3
◎ HINA - [Layout Tech.] Web Design Note With XHTML/CSS Final

◆ 圆角产生器 http://border-radius.com/

◆ 渐层 按钮产生器  Layer Styles  ColorZilla

◎ 梅问题 -- CSS教学-“CSS3动画”Ceaser线上动画产生器


※ 52CSS

◎ 52CSS -- DivCSS布局实例用dldtdd来设计列表-CSS布局实例 2008-2-14

  

标题


  

     
块状布局
       
左边文字

       
右排文字

     

  

   h1 {clear:both;font-size:14px;}
   dl {clear:both; margin-bottom:5px;float:left;}
   dt,dd {padding:2px 5px;float:left; border:1px solid #3366FF}
   dd { position:absolute; right:5px;}

◎ 52CSS -- CSS实例:用fieldset、legend实现文字写在边线上的效果-CSS布局实例 2007-5-12


※ 网网相连

◎ 梅问题 -- 《Bootstrap自订化》将版面分割成五等分 2014-11-4

◎ 梅问题 -- CSS3选择器“:nth-child()”与“:nth-of-type()”用法大不同 2014-7-17

◎ Smashing -- CSS-Driven Internationalization In JavaScript 2014-6-23 ★★★★★
  ===> 第一次看到有人把 i18n 搬到 CSS 中了, CSS Selector 有着 "极速" "方便" 的优点, 不过维护大不易, 但还是非常优的概念~  Perfect~~~

☀ 黑大 -- 透过JavaScript将HTML转为图档  2014-4-9 ★★★★★

☀ 黑大 -- CODE-使用CSS实现按钮图档切换 2014-1-30 [TODO]
http://blog.darkthread.net/post-2014-01-30-change-button-image-with-css.aspx


◎ oschina -- 50 个高质量的响应式 HTML5/CSS3 免费模板 2014-1-16

◎ 清枫草塘 -- CSS透明opacity和IE各版本透明度滤镜filter的最准确用法 2013-12-5

◎ 街边 -- 10个你未必知道的CSS技巧与14种css&div中基本滤镜介绍 2013-12-2

◎ green001 -- web前端开发必备的10项CSS技巧 2013-12-2

    @font-face { font-family: Blackout; src:url("assests/blackout.ttf")format("truetype"); }

    .clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }

    @mediascreenand (max-width:960px) {}
   
   .title { transform: rotate(40deg); }

    body { background:url(image.jpg)no-repeat; background-size:100%; }
   
   input[type="text"] { width:250px; }
   
   #container { margin:0 auto; }

    .container { overflow:hidden; }

    .btn { color: rgba(0, 0, 0, 0.5); }

   

◎ vanseo -- CSS Clipping and Masking 2013-9-10

   p {clip: top, right, bottom, left;}
   p {clip: 10px, 100px, 75px, 5px;}

   clip-path: | | none;

   rectangle(, , , , , );
   circle(, , );
   ellipse(, , , );
   polygon( , , ..., );

  
    
      
        
      

    

  

   mask-image: ;
   mask-reference = # | ;

   div {mask-image: url(mask.png);}
   div {mask-image: linear-gradient(black 0%, transparent 100%);}

◎ vanseo -- CSS Grids: Examples and Code for Common Layouts 2013-9-9

◎ 梅问题 -- CSS教学-纯CSS打造箭头对话框效果 2013-8-29 ★★★★

◎ 梅问题 -- jQuery教学-浮动式固定上菜单 2013-8-16

◎ 迈向程序殿堂 -- [ASP.NET]让Footer置放在网页底部作法  2013-6-12

◎ ajaxchen_615 -- dl dt dd样式 2010-9-15

   #left0 {width:300px;height:auto;padding:15px 10px 5px;}
   #left0 input {border-width:1px;border-color:#cccccc #999999 #999999 #cccccc;border-style:solid;height:20px;width:250px;line-height:20px;}
   dt,dd {float:left;line-height:40px;height:40;margin:0;padding:0;}
   dt {width:50px;}
   dd {width:250px;}

  


      

          
姓名:

          
sex:

          
age:

      

  

◎ 梅问题 -- MinifyMe》横跨 Win / MAC 平台CSS压缩软件 2013-4-15

◎ A LIST APART -- Two Tools to Keep Your CSS Clean 2013-4-10

◎ 绿色工厂 -- Easy CSS Menu 3.2 - 漂亮的CSS菜单不求人,懒人工具轻松搞定  2013-3-22

◎ 梅问题 -- CSS教学-CSS3 瀑布流版型 column-count 2013-2-4

◎ CodeProject Eduardo -- Starting for using CSS sprites on your projects 2012-12-16

◎ MINWT -- CSS教学-CSS3 边框图片border-image 2012-12-4

◎ GBin1.com -- 5个能够有效帮助你快速创建超棒CSS3动画效果的类库 2012-11-29

◎ oschina -- 30 个使用 CSS3 制作网页按钮的教程 2012-10-4 ★★★★

◎ leiphone -- 帮助设计师和开发者的9种实用CSS技巧 2012-9-27 ★★★★
   - 圆角 border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;
   - 阴影 box-shadow: 20px 10px 7px #ccc; -moz-box-shadow: 20px 10px 7px #ccc; -webkit-box-shadow: 20px 10px 7px #ccc;
   - 渐变填充 background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));
   - 置中 Margin: 0 auto; width: 300px;

◎ 林夕9527 -- inline-block 前世今生 2012-9-4 ★★★★★

◎ Marvin -- 22个必须知道的css技巧 2012-8-5

◎ LINE25 -- 10 CSS Rules Every Web Designer Should Know 2012-7-23

◎ oschina -- 实用的 CSS3 参考手册和代码生成工具 2012-6-19

◎ CodeProject -- Mastering CSS3 7 Cool Text-Shadow Samples You Can’t Miss 2012-6-7 Konstantin Kichinsky

◎ 落日小屋 -- Div+CSS 制作漂亮表格 2012-5-18

◎ Mr.Zheng -- 很炫的CSS3导航效果 2012-5-17

◎ keakon的涂鸦馆 -- 用CSS transitions实现动画式下拉菜单 2012-3-22 
    transform, transition, animation € D:@SourcejQueryCSSPractice121008 CSS动画式菜单.htm (不会动)

◎ 红薯 -- 20 个 Web 开发必备的备忘单 2012-3-21
   JavaScript  CSS  正则表达式  HTML Character Entities   RGB Hex Color Codes   jQuery 

◎ A Guide to CSS Support in Email: 2008 Edition

◎ Johnny.Net [ASP.NET] 字型单位的转换 2012-3-20

基于 DPI 为 192 dots per inch
FontSize: XXSmall, XSmall 0.7em Smaller, Small 0.8em Medium 1em Large 1.1em Larger 1.2em XLarge 1.5em XXLarge 2em

UnitType.Cm / 0.4 = em
UnitType.Ex / 2.2 = em
UnitType.Inch / 0.17 = em
UnitType.Mm / 4 = em
UnitType.Percentage / 100 = em
UnitType.Pixel /16 = em
UnitType.Point /12 = em

♫♫ 保哥 -- 网站建置不是件简单的事 @ 打造网站的步骤 2011-9-28
                                                                      跨浏览器网页设计密技 (1)

◎ paladinprogram -- 透过 CSS 让打印时 Table 的标头内容可以每页重复 2010-4-28 ★★★★

   .newpage { page-break-before: always; }

   var $rows=$("#tbDemo > tbody > tr"); 
   $rows.each(function(i) {
       if((i+1) % 2==0 && i!=($rows.size()-1)) { // 取2的倍数,排除最后一笔
           $(this).after(""+$("#pageHeader").text()+"");     
       }
   });

◎ Louis Lazaris -- CSS3 Solutions for Internet Explorer 2010-4-28

◎ 前端观察 -- 你需要知道的CSS3 动画技术 2009-12-29

◎ Rain Man -- 再读《CSS权威指南》 2009-9-7 ★★★

♫♫ 保哥 -- 善用 CSS 中的 table-layout 属性加快 Table 的显示速度 2009-4-20 ===> table-layout:fixed

◎ FWL -- 纯CSS实现的鼠标经过文本时提示的信息 2007-11-3 ★★★★★
       .tooltips { position:relative; z-index:3002; }
       .tooltips:hover { z-index:3003; background:none; }
       .tooltips span { display: none; }
       .tooltips:hover span {
           display:block; position:absolute;
           top:21px; left:9px; width:15em; padding: 3px; color:black;
           border:1px solid black; background-color:#ccFFFF;
       }

       运用在 页面显示文字我是弹出的提示文字





※ 单位转换

38 pixels = 1 cm
96DPI时 1 inch = 96 pixels 1 cm = 37.7953 pixels
300DPI时 1 inch = 300 pixels 1 cm = 118.11 pixels
600DPI时 1 inch = 600 pixels 1 cm = 236 pixels



※ CSS 备忘

// 版面置中(IE/Firefox/Chrome)
.Section1 { width: 780px; margin: 0px auto; }

// float 置中 包一层 div
text-align:0; margin:auto;

// width=100% 时, table 也会继承, 要设为 auto

// 让文字过长时自动显示省略号

要设区块高度 100% 时
html, body { height:100%; margin:0; }

.menu_d {/*定菜单宽度*/
margin-top: 20px;
margin-right: 12px;
margin-left: 15px;
margin-bottom: 10px;
}


.menu {
font-size: 12px;
}

.menu a {
display: block;
color: #333333;
text-decoration: none;
font-size: 12px;
padding: 10px;
}
.menu td.mainnav {/*主菜单*/
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #CCCCCC;
}
.menu td.subnav {/*次菜单*/
text-indent: 20px;
background-image: url(images/subnav.gif);
background-repeat: no-repeat;
background-position: 15px 10px;
}
.menu a:hover {
color: #FFFFFF;
background-color: #999999;
}

◎ 箭头模式 130121m

 

Can't be blank

        .arrow-left {
            margin-top: 12px; float: left; width: 0; height: 0;
            border-top: 6px solid transparent; border-bottom: 6px solid transparent;
            border-right: 10px solid #e2e2e2; z-index: 1000;
        }
        .tool_tip {
            float: left; height: 24px; line-height: 24px;
            background: #e2e2e2; color: red;
            margin-top: 8px; padding-left: 5px; padding-right: 5px;
            font-size: 11px; font-style: italic;
            border-top-right-radius: 7px; border-bottom-right-radius: 7px;
            border-top-right-radius: 4px; border-bottom-right-radius: 4px;
            border: solid 1px silver; z-index: 99;
        }
        .tooltip_outer {
            display: inline; position: absolute; 
            margin-top: -10px; margin-right: 0px;
            padding-left: 5px; z-index: 2;
        }


~ The END ~