Learning CSS

CSS，现在让我既爱你又恨你啊。 到现在终于将CSS: The Definitive Guide(3rd Edition)初略的浏览了一遍。 不能说很熟悉，但是感觉对于CSS有了进一步的了解，尤其是对于布局方面。 虽然我现在仍然不能单独写出很好的CSS布局以及细节的排版等等（这句简直是废话）， 虽然我现在仍然需要借助像Bootstrap 这样的库， 但是我想……

实话是我仍然不了解CSS。现在只能稍微梳理一下今天看的书的知识点。但愿可以……

备注:

1. 初步整理
2. 作者blog： http://benfrain.com/
3. 贯穿全文的项目演示地址：http://andthewinnerisnt.com/
4. 文中提到有名的地址：
   • CSS-TRICKS
   • Selectors Level 3
   • -prefix-free
   • fico

1. English: http://learnlayout.com/
2. 中文： http://zh.learnlayout.com

1. 区别IE6与Firefox：

   background:orange;*background:blue;
   

2. 区别IE6与IE7：

   background:green !important;background:blue;
   

3. 区别IE7与Firefox：

   background:orange; *background:green;
   

   1. 区别Firefox，IE7，IE6：

      background:orange;*background:green !important;*background:blue; 
      /* 注：IE都能识别*;标准浏览器(如Firefox)不能识别*；  */
      /*    IE6能识别*，但不能识别 !important, */
      /*    IE7能识别*，也能识别!important;  */
      /*    Firefox不能识别*，但能识别!important;      */
      

   2. 另外再补充一个，下划线"_", IE6支持下划线，IE7和firefox均不支持下划线。

   于是大家还可以这样来区分IE6，IE7，firefox:

   background:orange;*background:green;_background:blue;
   /* 注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。      */
   

   Reference:

   • 区别不同浏览器，CSS hack写法

1. "¶ 6\A0"
2. ">> &raquo"

1. CSS3 Generator
2. Box-shadow, one of CSS3′s best new features
3. HTML Color Picker
4. CSS Color Picker
5. Image converted to data URI format

1. 三角形:

   .triangle {
       height: 0px;
       width: 0px;
       border:100px solid;
       /*  Add color now */
       border-color: red green yellow blue;
   }
   

2. Reddit

   <style type="text/css" media="screen">
     #reddit-alien {
         width: 296px;
         height: 380px;
         position: relative;
         margin: 0 auto;
     }
     #reddit-alien .antenna {
         height: 50px;
         width: 44px;
         top: 40px;
         left: 155px;
         border: 7px solid black;
         border-width: 9px 0 0 9px;
         -webkit-border-radius: 5px 0 0 0;
         -webkit-background-clip: padding-box;
         -moz-border-radius: 5px 0 0 0;
         border-radius: 5px 0 0 0;
         -webkit-transform: rotate(16deg);
         -moz-transform: rotate(16deg);
         -o-transform: rotate(16deg);
     }
     #reddit-alien div {
         position: absolute;
     }
     #reddit-alien .dot {
         width: 26px;
         height: 26px;
         left: 37px;
         top: -28px;
         border: 8px solid black;
         -webkit-border-radius: 26px;
         -webkit-background-clip: padding-box;
         -moz-border-radius: 26px;
         border-radius: 26px;
         background: white;
     }
     #reddit-alien .ear.left {
         left: 40px;
     }
     #reddit-alien .ear.right {
         left: 216px;
     }
     #reddit-alien .ear {
         width: 32px;
         height: 32px;
         top: 100px;
         border: 8px solid black;
         -webkit-border-radius: 32px;
         -webkit-background-clip: padding-box;
         -moz-border-radius: 32px;
         border-radius: 32px;
         background: white;
     }
     #reddit-alien .head {
         z-index: 2;
         top: 88px;
         left: 52px;
         height: 115px;
         width: 182px;
         border: 9px solid black;
         -webkit-border-radius: 150px 100px;
         -webkit-background-clip: padding-box;
         -moz-border-radius: 150px / 100px;
         border-radius: 150px / 100px;
         background: white;
     }
     #reddit-alien .eye.left {
         left: 42px;
     }
     #reddit-alien .eye.right {
         left: 110px;
     }
     #reddit-alien .eye {
         z-index: 2;
         width: 32px;
         height: 32px;
         top: 29px;
         -webkit-border-radius: 16px;
         -moz-border-radius: 16px;
         border-radius: 16px;
         background: orangeRed;
     }
     #reddit-alien .mouth {
         z-index: 1;
         width: 94px;
         height: 80px;
         top: 3px;
         left: 35px;
         border: 9px solid white;
         border-bottom-color: black;
         -webkit-border-radius: 150px 120px;
         -moz-border-radius: 150px / 120px;
         border-radius: 150px / 120px;
     }
     #reddit-alien .arm.left {
         left: 78px;
         -webkit-border-radius: 43px 0 0 43px;
         -moz-border-radius: 80px 0 0 90px;
         border-radius: 43px 0 0 43px;
     }
     #reddit-alien .arm.right {
         left: 170px;
         -webkit-border-radius: 0 43px 43px 0;
         -moz-border-radius: 0 80px 90px 0;
         border-radius: 0 43px 43px 0;
     }
     #reddit-alien .arm {
         height: 78px;
         width: 39px;
         top: 210px;
         border: 8px solid black;
         background: white;
         -webkit-background-clip: padding-box;
     }
     #reddit-alien .body {
         z-index: 1;
         width: 88px;
         height: 178px;
         left: 100px;
         top: 150px;
         border: 8px solid black;
         -webkit-border-radius: 120px 250px;
         -webkit-background-clip: padding-box;
         -moz-border-radius: 120px / 250px;
         border-radius: 120px / 250px;
         background: white;
     }
     #reddit-alien .foot.left {
         -webkit-border-radius: 24px 24px 0 0;
         -moz-border-radius: 30px 0 0 10px;
         border-radius: 24px 24px 0 0;
         left: 82px;
     } 
     #reddit-alien .foot.right {
         -webkit-border-radius: 24px 24px 0 0;
         -moz-border-radius: 0 30px 10px 0;
         border-radius: 24px 24px 0 0;
         left: 156px;
     }
     #reddit-alien .foot {
         border: 8px solid black;
         width: 50px;
         height: 16px;
         top: 312px;
         background: white;
         -webkit-background-clip: padding-box;
     }
   </style>
   <div id="reddit-alien">
     <div class="antenna">
       <div class="dot"></div>
     </div>
     <div class="ear left"></div>
     <div class="ear right"></div>
     <div class="head">
       <div class="eye left"></div>
       <div class="eye right"></div>
       <div class="mouth"></div>
     </div>
     <div class="arm left"></div>
     <div class="arm right"></div>
     <div class="body"></div>
     <div class="foot left"></div>
     <div class="foot right"></div>
   </div>
   

:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
:first-letter	p:first-letter	Selects the first letter of every <p> element
:first-line	p:first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:before	p:before	Insert content before every <p> element
:after	p:after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

CSS white-space Property

1. 替换元素(Replaced): 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
   • <img>
   • <input>
   • <textarea>
   • <select>
   • <object>
2. 不可替换元素(Nonreplaced): HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。
   • <p></p>
3. 块元素(Block-level): 在视觉上被格式化为块的元素， 最明显的特征就是它默认在横向充满其父元素的内容区域， 而且在其左右两边没有其他元素，即块级元素默认是独占一行的。
   • <div>
   • <p>
   • <h1> - <h6>
4. 行内/内联函数(Inline): 行内元素不形成新内容块，即在其左右可以有其他元素
   • <a>
   • <span>
   • <strong>
5. Baseline alignment: Baseline alignment describes the alignment of textual content and based on information contained in font tables associated with font resources. Additional descriptions for these font tables are provided in the CSS3 Fonts module.

Reference:

1. CSS:替换元素(Replaced)、不可替换元素(Nonreplaced)、块元素(Block-level)和行内/内联元素(Inline)

Reference: http://www.w3schools.com/html/html_entities.asp