FE-learning 前端学习

github偶尔上不去，把学长给我们的学习资源转载在这里，同时记录下自己的学习感悟。

Lesson 1：html 基本标签

Lesson 2: html语义化 html4 html5 xhtml区别

Lesson 3: html编码标准，百度教育页面html分析

Lesson 4：http://www.w3.org/Style/LieBos2e/enter/ 

http://www.w3.org/MarkUp/Guide/Style

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS 要看完，不仅看what is css.

3-5天完成设计稿，html+css

之后照着w3c标准学习css大概一个月

新收获：

http://www.w3.org/Style/LieBos2e/enter/

1."Gluing" Style Sheets to the Document: 4 methods

2.in Chapter 15 , "Cascading and inheritance."   the designer's style sheet> user's>browser's default.    !important

child node's own style has priority over style inherited from its parent.  

equally specific, then CSS gives priority to the rule that is later in the stylesheet.

3.Through inheritance, CSS property values set on one element will be transferred down the tree to its descendants.

4.Overriding Inheritance :the order in which the rules were specified would determine which of them would win.

5.there are Properties that don't inherit. like``` background property

6.Common tasks with CSS.

http://www.w3.org/MarkUp/Guide/Style

自己平时不常用到的property

1.First-line indent    p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

2.Setting the font size in percentages relative to the size used for normal text:

h1 { font-size: 200%; }

3.Setting the font family:There is a short list of generic font names which are guaranteed to be available, so you are recommended to end your list with one of these: serif, sans-serif, cursive, fantasy, or monospace, for instance:
body { font-family: Verdana, sans-serif; }

4.Avoid problems with fonts and margins:

(1)avoid text at the body level that isn't wrapped in a block level element such as p.

(2)set the font family for pre elements, pre { font-family: monospace; } 有些浏览器忘了在你设置字体大小或其他属性前使用固定间距字体？

(3)to set the font family on headings, p and ul elements if you intend to set borders or backgrounds on elements such as div. ？

5.What about browsers that don't support CSS?

• link for unvisited links
• vlink for visited links
• alink for the color used when you click the link

The size attribute can be used to select the font size as a number from 1 to 6. If you place a - or + sign before the number it is interpreted as a relative value.<font size="+1" color="maroon" face="Garamond, Times New Roman">some text ...</font>

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works

1. DOM is where your CSS and the document's content meet up

2.  # . tag selector  

selector .key selects all elements that have the class name key

selector [type='button'] selects all elements that have a type attribute with the value button

Pseudo-classes selectors 

selector:pseudo-class {
  property: value;
}
常用伪类，具体见 https://developer.mozilla.org/en-US/docs/Web/CSS/:not

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled


Calculating a selector's specificity (a,b,c,d)可以计算出具体数值

Information: Selectors based on relationships

Common selectors based on relationships

Selector	Selects
A E	Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > E	Any E element that is a child of an A element
E:first-child	Any E element that is the first child of its parent
B + E	Any E element that is the next sibling of a B element (that is: the next child of the same parent)