1.Basic snytax:[0]
(1)A CSS rule is included two parts: Selector and Declaration(s).
(2)A declaration is included two parts: Property and Value. Property is the style attritube you want to set. Property and Value are separate by a colon.
(3)If value contain several words, then we need add a quotation marks.
(4)If there are several declarations, then we need semicolons to separate them.
(5)CSS is not sensitive to uppercase and lowercase letters except name and id when working with HTML.

2.Advanced snytax: (1)If we want several selectors to share one declaration, then put them together and separate them with comma.
(2)In general, son elements will inherit declaration from father elements. Some times, thing also go differently. What we need to do is just giving the same or different declarations to son elements at the mean time. Elements allways focus on the declarations or attributes nearest to them.

3.Derived/Contextual selector:
(1)use contextual relationship to define style of tags. e.g. li strong {color: blue} means that only strong tags in li tags will be blue.
(2)In these notes, you can find I have used this selector to change color of bold words in paragraph.
(3)tags referred in derived selector need not to be neighboring. they can separate enough far only if they have ancestor-descendents relationship.
(4)for some circumstances, we do not want to choose all descendents of the first elements, what we need is just using > to combine two elements which means choose those elements that matched by the second selector that are direct children of elements matched by the first.(didnot work well now!!!)

4.Id selector: use id to define style of elements with specific id.
(1)Id selector is defined by #.
(2)id selector is sentive to uppercase and lowercase letters.
(3)we can't combine several id together and give them declarations like class selector.
(4)There are three application for id selector:

1. define specific tag with that id. e.g. # green {color : green} <p id="green">
2. create derived selector. e.g. #strong p {color :green} means paragraphs in strong elements will be green.
3. use alone.

5.Class selector:
(1)Class selector is defined by a dot.
(2)Class selector can also be used to create derived selector. e.g. .fancy td {color: #f60} means table in elements with class "fancy" will have an orange font color.
(3)Besides, we can select specific elements by their class, e.g. td.fancy {color: #f60} means table with class "fancy" will have an orange font color.
(4)multiple classes selector: set several class names for one element or combine several class names together and give them the same declaration.
(5)class selector is sensitive to uppercase and lowercase letters.

6.Attritube selector:
(1)syntax :(selector)[attritube = "value" ][attritube = "value" ] {declarations}.
(2)Attritube is very useful when hanlding with table elements without id and class.
(3)we can also use other comparable symbol to replace = :

~=

value is included in attritube being independent words

|=

value is included in attritube being alone and independent words or combine with other words using -.

*=

value is included in attritube being a string of letters.

^=

value is included in attritube being starting letters.

$=

value is included in attritube being ending letters.

7.CSS background:
(1)background color: can not be inherited.
(2)background image:
syntax: selector{background-image: url(spr_origin.png)} other attritubes: most background image is applied to body, while you can also apply it to other elements like p , a.

• background-attachment
• background-position: keywords, percentage, digital.
• background-repeat

8.CSS text:
(1)text indent:
a. alue unit can be px or em or rem.
b. value can be minus.
c. value can be a percentage.
d. value can be inherited.
(2)text align:
a. values: left, right, center, justify.
b. to make bolck element or table center, you need appropriate padding.
(3)words space
(4)letter space
(5)text transform: values include none, uppercase, lowercase, capitalize.
(6)text decoration: values include none, upperline, lowerline, line-through. One declaration can contain several decoration, while nearest decoration will replace further decoration.
(7)white-space: values include normal, pre, nowrap, pre-line, pre-wrap.
(8)direction: values include ltr, rtl, the fault value is ltr.

9.CSS font:
(1)font series: selector {font-family: prefered font, second prefered font, ~, alternative font}
(2)If font name is more than one word, we need apostrophe or double quotes, if in style, we need use apostrophe.
(3)font style: three values normal, italic, oblique. The last two is different while in browser they look the same.
(4)font-variant: fault, small-caps. It seems this attritube can't work.
(5)font-weight: values 100 to 900 or lighter, light , normal, bold, bolder.
(6)font-size: three plans use px or use em or combine percentage(for father elements) and em(for son elements).

10.CSS list: synatx is (ul, ol, dl) li {list-style: url(example.gif) marker position}

11.CSS table: (1)common attritubes: border, border-collaspe, border-spacing, caption-side, width, height, text-align, vertical-align, padding, background-color, color(for text), empty cells(show, hide), overflow, text-overflow(ellipsis), table-layout(values: auto, fixed.

12.CSS outline: set style, width, color of outline.

13.CSS box model
(1)pading: unit can be px, em , ex, %(for the width of parent element).
(2)margin: unit can be px, em, %(for the width of parent element). margin merging is triggered when two vertical margin enconter, the final margin is depended on the larger vertical margin.

(3)value copy:

14.CSS border:
(1)background is contain border, while border is on the upside of background.
(2)the fault value of border style is none. so if we want a border, make sure that declare a border style before width and so on. (2)we can set severial styles for different side of a border. The sequence is following top-right-bottom-left, just like padding.
(3)we can also set sepecific sytle for one side of a border when we put one-side attritube after the whole attributes.
(4)border-width: number values or keyword values(thick, medium, thin). If use keyword values, border width is depended on user agent. Also, you can set one side width just like border-style. If values is less than, then value will copy to empty position automaticly.
(5)border-color: values include color name, RGB value, hexadecimal value.

15.CSS positioning:
(1)every element is box. For div, h, p, we call them block box. For elements like strong, span, we call them in-line box.
(2)we can use attritube_display to change box type. Also, there are a specific box call no-name box, which refer texts in a block box.
(3)position attritubes:

static

default value. elements render in order, as they appear in the document flow.

absolute

the element is positioned relative to its first positioned ancestor element or initial block(maybe canvas or html element). this property may make one block cover other bolocs, we can use z-index attritubes to decide their zorder

fixed

the element is positioned to the browser window.

relative

the element is positoned realtive to its normal position in static. and the room of normal position is still keeped.

sticky

the element is positioned based on the user's scroll position. a sticky element toggles between relative and fixed, depending on the scroll position. Index float in the right of this website is setted to this property.

initial

sets this property to its default value.

inherit

inherits this property from its parent element.

16.CSS folat: (1)values: none, left, right, initial, inherit.
(2)combine span tag to realize that the first letter of a paragraph is surrounded by other letters.
(3)combine list tag to realize a horizontal or vertical menu.
(4)If you don't want letters surround float elements, just use clear(values:none, left, right)

17.universal selector: *{declaration}, set style for all elements in the html document.

18.adjacent sibling selector: select the element right after one element if these two element have the same parent element. synatx: element + element {declarations}. this selector can be combined with other selector.

19.Pseudo-classed:
(1)synatx: selector : pseudo-class {property : value}
(2)first-child pseudo-class: synatx is element_name : first-child{declarations}, which does not mean the first child element of element_name, but means the element_name in a bigger element will be set to sepecific style. Actually, we do not care about the bigger element.
(3)lang pseudo-class: allow you to set style for elements with sepecific lang_attribute. the syntax is :lang(name) > element {<language-code>}
(4)anchorpoint pseudo-class:

a:link {declarations}

link that have not been visited.

a:visited {declarations}

link that have been visited.

a:hover {declarations}/li>

when mouse move over the link.

a:active {declarations}

link that have been selected.

20.Pseudo-elements:
(1)syntax: selector : pseudo-elements {property : value;}
(2):first-line(can only be used in block elements)
(3):first-letter(can only be used in block elements)
(4):before : insert elements in front of specific element.
(5):after : insert elements after specific element.

21.Dimension: control height and width of elements, and line-spacing.

22.Classification: clear, cursor, display, float, position, visibility.

23.Media types: @media (types) {}, allow to control different style in different medias.