FE-learning 前端学习

时间 2019-11-30

标签 learning 前端学习繁體版

原文原文链接

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

Lesson 1：html 基本标签html

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

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

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

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

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

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

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

新收获：学习

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

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)