Please enable JavaScript.

Coggle requires JavaScript to display documents.

Chapter 3_ CSS (Brief (how browsers use CSS (Cascading order,…

- - - - units
        
        not scalable
        
        px
        
        pt
        
        scalable
        
        em
        
        = current font size
        
        %
        
        No space between the number & the unit
        
        1.5em
        
        maybe with decimal points
        
        others
        
        in
        
        cm
        
        mm
        
        pc
        
        picas(12points)
        
        ex
        
        half em
      - name
        
        xx-small
        
        small
        
        medium
        
        large
        
        not case sensitive
    - - font-family: Arial, "Arial Black", Futura, serif
      - browser uses the first in the list it has
      - generic fonts
        
        serif
        
        sans-serif
        
        monospace
      - name of a font is more than one word, quotation marks
    - - italic
      - oblique(useless)
      - normal
    - - bolder
      - lighter
      - bold
      - normal
      - Could specify as a multiple of 100
        
        (400 is normal, 700 is bold)
        
        (100 –900)
    - - small-caps
        
        lowercase letters to uppercase
        
        converted uppercase appears in a smaller size
      - normal
        
        override
        
        default
    - - font: italic bolder 14pt Arial,serif
      - Order must be: style, weight, size, family
    - - line-through
      - overline
      - underline
      - none
      - 下划线 /上划线
  - - - <ul style = "list-style-type: square">
      - disc
      - square
      - circle
      - <li style = "list-style-image: url(bird.jpg)">
      - image
    - - decimal
      - upper-alpha
      - lower-alpha
      - upper-roman
      - loer-roman
      - <ul style = "list-style-type: decimal">
    - - ol ol ol {list-style-type: decimal;}
  - - - values
        
        %
        
        length
      - p.indent1 {text-indent:0.5in}
    - - h1 {text-align:center}
      - values
        
        center
        
        right
        
        justify
        
        (each line has equal width)
        
        left
        
        (default)
    - - img{float: right}
      - values
        
        right
        
        none
        
        default
        
        inherit
        
        left
    - - .div4 { clear: left;}
      - values*5
  - - - 1st: top and bottom, 2nd: right and left
    - - clockwise from top(Top, right, bottom, left),
    - - top and bottom and left and right
    - - top, right and left, bottom
    - - •margin-top
      - •margin-bottom
      - •margin-left
      - •margin–right
  - - - url(protocol://server/pathname)
      - url("img_tree.gif")
    - - repeat(default)
      - no-repeat
      - repeat-x
        
        repeated only horizontally
      - repeat-y
    - - top
      - center
      - bottom
      - left
      - right
  - - - outer edge
      - margin
      - border
      - padding
      - inner edge
      - content
    - - values
        
        none
        
        dotted
        
        dashed
        
        double
      - properties
        
        •border-top-style
        
        •border-bottom-style
        
        •border-left-style
        
        •border-right-style
    - - values
        
        thin
        
        medium(default)
        
        thick
        
        a length value in pixels
      - properties*4 同上
    - - properties*4
  - - - #XXXXXX;
    - - number can be decimal or percentages
      - rgb(n1,n2,n3);
    - - red; green;
    - - http://paletton.com/
- - - - h1, h2, h3 {color: green;}
  - - - h1 {color: white; background-color: black;}
- - - - [class~="someName"]
        
        =.someName
    - - a[target]
- - - - floating
        
        float
        
        tutorial
        
        http://www.barelyfitz.com/screencast/html-training/css/positioning/
        
        static
        
        default
        
        specify when override
        
        relative
        
        absolute
      - normal flow
      - explicit positioning
    - - translate
        
        remaps the (0,0) position on the canvas.
      - rotate
      - scale
      - skew
      - transform: rotate(30deg);
  - - - Safari
    - - IE 9
- - - - 调用
    - - used only once
- - - - 默认有下划线
- - - - means meaning
      - describe the meaning to the browser and the developer
      - new in HTML5
        
        <article>
        
        <aside>
        
        <details>
        
        <figcaption>
        
        <figure>
        
        <footer>
        
        <header>
        
        <main>
        
        <mark>
        
        <nav>
        
        <section>
        
        <summary>
        
        <time>
      - 布局标识符
      - old version
        
        <div id="menu">
- - - - The more specific selector overrules the less specific selector.
      - a. id selectors
      - b. Class and pseudo-class selectors
      - c. Contextual and simple selectors
      - d. Universal selectors
      - id are the closest
    - - overrule other rules
      - •Important declarations with user origin
      - •Important declarations with author origin
      - •Normal declarations with author origin
      - •Normal declarations with user origin
      - •Any declarations with browser (or user agent) origin
      - important user are closest
    - - Browser style rules
      - External style rules
      - Internal style (in the document head) rules
      - Inline style rules
      - Individual user style rules
      - individual user styles are the “closest.
    - - last rule specified wins