前言

还有即将在国外投身秋招的小伙伴吗？本文是将课堂内容翻译成英文的笔记，加入了自己Google的内容。给将要在国外面试和在国内想学习英文的小伙伴们都做个参考~

Selectors

In-line: In html, <h1 style = “color: cyan”>
ID: In html, <h1 id = “xx-id”>. In CSS, using #xx-id {…}
Class: In html, <h1 class = “className className2”>. In CSS, using .className {…}
Tags: In html, <h1>, <a>, etc. In CSS, using h1{…}

Also can use a combination of selectors. E.g. h1.className

Calculate weight of the selector, the greatest weight applies:
Weight is 3 columns of digits (a,b,c)
- ID
- Class
- Tag/Element/Type
Examples:
- .className{…} : 0, 1, 0
- h1.className{…}: 0, 1, 1
In-line styles have higher weight than everything above.
If weights are exactly the same, whichever selector written later in code is applied
You can see which styles are being applied in Inspector. Selectors overridden by weights will appear stroked out.
We can override specificity with !important following a style line (e.g. color: green !important;) This will give the selector a higher weight than all other non-important selectors. But, if multiple selectors all have the !important mark, the same rule above applies.
- Use !important with caution, since it’s hard to override except with another important, then everything turns out to be !important...

Inheritable attributes:
- Font color, size
Attributes not inheritable by default: usually box sizes/alignment.
- Use "inherit" keyword to inherit from parent element
Attributes with no specification on all levels will use initial values
- Use "initial" keyword to reset to default

DOM Tree ->
Filtering
- Match selectors, check validity of attributes, whether values fit current media, etc.
- Get Declared Values, what the coder wrote.
- May have 0 or multiple declared values for an attr.
Cascading
- Determine one attr value of the highest priority, according to source, !important, specificity, sequence, etc.
- The chosen value is called the Cascaded Value
Defaulting
- When cascaded value is not found, use interited or initial value
- After this step, we get the Specified Value, which is guaranteed to not be empty.
Resolving
- Turn some relative values or keywords into absolute values. e.g. Change em into px, relative path into absol ute path
- Get Computed Value. The most specific values you can get without actually rendering in a specific environment. e.g. Certain information, such as window size of the user, is not known until actual rendering happens
- When you use "inherit" keyword, child elements inherit the computed value of the parent elemenet, not other values.
Formating
- Further convert computed values when rendering information becomes available. Change all keywords and percentages into absolute values
- Get Used Value, the actual values used in rendering. There are no longer relative values or absolute values.
Constraining
- Round pixel values into integers
- Enforce constraints between elements e.g. Max width