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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。