CSS notes

  1. sans-serif fonts are easier to read on screen, while serif fonts are easier to read on paper.
  2. position: static(default, original flow), relative(relative to original position), fixed(relative to browser window), absolute(An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>, Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.); 
    // example:
p.pos_fixed {
  position: fixed;
  top:       30px;
  right:     5px;
}

p2.pos_left {
  position: relative;
  left:        -20px;
}

p3 {
  position: absolute;
  top:       150px;
  left:       100px;
}
  3. display: none; or visibility: hidden; display: none will remove the element completely from the page, while visibility: hidden will just make the specified item hidden.
  4. Child selector(>): 
    /*This select all p element, which is the child of body element*/
body > p { line-height: 1.3 }
div ol>li p
/*It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.*/
  5. difference between :active and :focus: focus is when you Tab to an element, active is the element is in a specific state when you like click or something 
     1 <style type="text/css">
 2   button { font-weight: normal; color: black; }
 3   button:focus { color: red; }
 4   button:active { font-weight: bold; }
 5 </style>
 6 
 7 <button>
 8   When clicked, my text turns red AND bold!<br />
 9   But not when focused, where my text just turns red
10 </button>
  6. The <li> element by default will displayed on seperate line. By use li{display:inline;}, you can display the list horizontally.
  7. By declaring display:block for an element that is normally inline, you can put that element on its own line; By specifying display:none, you can completely remove elements from the flow of the document.  
  8. padding & margin: padding is the space within the border, while margin is the space outside of the border.
  9. Centering table: 
    table {margin:auto;}
  10. table stripped effect: 
    tr:nth-child(old) {
  background-color:            #ffc;
}
tr:nth-child(even) {
  background-color:            #fff;
}
    tr:hover {
      font-weight:                 bold;    // hover effect;
    }
  11. CSS: one for overall layout, one for color, another for photos: 
    1. layout.css;
color.css;
photos.css
      // in basic.css:
      @import url(layout.css);
      @import url(color.css);
      @import url(typography.css);
  12. em: check this out(http://pxtoem.com/), em is the (times)倍数 of the current font size.
  13. ">": direct child selector:The > combinator separates two selectors and matches only those elements matched by the second selector that are directchildren of elements matched by the first: 
    span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}

<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

    Span 1. In the div. Span 2. In the span that's in the div.
    Span 3. Not in a div at all.

  14. Absolute positioning: Nesting an absolute-positioned element within a relative-positioned element is a fairly oft-used technique, According to the CSS2 spec, an absolute-positioned element is positioned according to its containing block. Any element is considered “positioned” if it has a position value of relative, absolute, or fixed (anything other thanstatic). If an absolute-positioned element resides within no other containing block, (when no ancestor elements are positioned) it is placed relative to the page boundaries (called the initial containing block). 
  15. !important: defined high priority, with exactly same style not parent child or other relationship: 
    .nyClass {
  margin:  20px !important; // higher priority
  margin:  40px;            // not work
}
  16. A good button decoration snippet: 
    <body>
    <p>This is a paragraph that has a button
       <span style="
            border-top:1px solid #eee;
                border-right:2px solid #ccc;
                border-bottom:2px solid #ccc;
                border-left:1px solid #eee;
                background:#f5f5f5;
                margin:1px;
       ">login:</span>
    </p>
</body>

  17. n
  18. n
  19. n
  20. n
  21. n
  22. n
  23. n
  24. n
  25. n
  26. n
  27. n
  28. n
posted @ 2013-06-01 04:26  wxwcase  阅读(132)  评论(0)  编辑  收藏  举报