CSS

attibute selector

1. 存在选择
 [attr] 
 只要存在存在该属性就可以
   
2. 位置选择
 [attr^=val] 属性值的开头
 [attr$=val] 属性值的结尾
 
3. 分隔符选择
 [attr*=val] 空格不作为分隔符
 [attr~=val] 空格作为分隔符
 [attr|=val] 以-作为分隔符
 空格和-是CSS属性值常用的分隔符
 
4. 等值选择
 [attr=val]
 
 主要分为两大类, 一种是不根据属性值判断, 另外一种是根据属性值进行判断.

CSS statements

There are two kinds of statements:

1. Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
2. At-rules that start with an at sign, '@', followed by an identifier and then continuing up the end of the statement,


Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them.
But there is other information that a Web author wants to convey in the style sheet, like the character set, 
other external style sheets to import, font face or list counter descriptions and many more.

FAQ

Q: 是否每一个元素都具有所有的CSS属性?
A: All elements are considered to have all properties, but some properties have no rendering effect on some types of elements. 
   每一个的元素具有所有的属性，但是有的属性对于特定的元素是无效的，所以在元素的属性定义表中会有一项"Applies to".
   
Q: 对于一个元素而言，哪些无效的属性是直接忽略（无论设置什么有效的值）还是使用一个初始值(initial value, 这个值通常不具有实际的效果)?
A: 可以确定的大部分情况下是采用初始值的，这个初始值往往是没有效果的一个值, 即不管怎样设置其指定值(specified value)但是其计算值(computed value)
   还是采用初始值的。

float

The clear CSS property specifies whether an element can be next to floating elements that 
precede it or must be moved down (cleared) below them.

1. none
Is a keyword indicating that the element is not moved down to clear past floating elements.

2. left
Is a keyword indicating that the element is moved down to clear past left floats. That is 
to say the left side of the element's box doesn't allow a floating element.

3. right
Is a keyword indicating that the element is moved down to clear past right floats. That is 
to say the right side of the element's box doesn't allow a floating element.

4. both
Is a keyword indicating that the element is moved down to clear past both left and right floats.
That is to say both right and left side of the element's box doesn't allow a floating element.

misc

1. linear-gradient

The linear-gradient() CSS function creates an image consisting of a progressive transition
between two or more colors along a straight line. Its result is an object of the <gradient> data type,
which is a special kind of <image>.

background: linear-gradient(渐变方向, 颜色1以及停止的位置, 颜色2及停止的位置, 颜色3以及停止的位置, ...);

注意: liner-gradient()产生的是一个图片,可以作为背景图显示.

position

1. static
The element is positioned according to the normal flow of the document. This is the default value.
### The top, right, bottom, left, and z-index properties have no effect. ###

position: static;

------------------------------------------------------------------------------------------------------------
2. relative
The element is positioned according to the normal flow of the document, and then offset relative to 
itself (it's original position in the the normal flow of the document)based on ### the values of top, 
right, bottom, and left. ###

position: relative;
top: 5px; left: 5px;

------------------------------------------------------------------------------------------------------------

3. absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. 
Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative 
to the initial containing block. 
### Its final position is determined by the values of top, right, bottom, and left. ###

position: absolute;
top: 5px; left:5px;

-------------------------------------------------------------------------------------------------------------

4. fixed
The element is removed from the normal document flow; no space is created for the element in the page layout. 
Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled.
### Its final position is determined by the values of top, right, bottom, and left. ###

position: absolute;
top: 5px; left:5px;

psudo element selector

1. element:***-child      
     element is selected among all children of parent per some specific condition given by *** part, 
     for example first-child. （选择的范围是所有的元素）
2. element:***-of-type 
     element is selected among all children of parent with the same type of element per some specific condition 
     given by *** part, for example first-of-type. （选择的范围是同类型的元素）

specified, computed, and actual values

1. specified values
   A. 如果样式表为这个属性设置了一个值,那么就使用这个值;特别地,如果这个是inherit,如果这个属性可以继承的话,那么使用其父元素的
      计算属性(the property takes as specified value the computed value of the element's parent);如果不是可以
      继承的话就使用初始值(the property is assigned its initial value);
   B. 否则,如果属性值是可以继承的,那么使用其父元素的计算属性;
   C. 否则,就使用在属性定义表中指定的初始值(initial value).


2.  computed values
    计算属性主要用于继承,该数值是基于属性的指定值(specified value), 并按照属性定义表中"Computed value"描述的进行必要
    的计算.
    A. The computation needed to reach a property's computed value typically involves converting relative values
    (such as those in em units or percentages) to absolute values(属性值可以立即决议);
    B. However, for some properties (those where percentages are relative to something that may require layout to
    determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into
    percentage-computed values(属性值不能立即决议).
    
    对于属性值不能立即决议的将会延迟决议(The relative values that remain in the computed value become absolute
    when the used value is determined).
 
    计算值不一定能够转化成绝对值,如果含有不能决议的部分则留在下一个阶段(使用值的确定)进行处理;所以有的属性的计算值可以是百分数或者
    绝对值(the percentage as specified or the absolute length).
    
    
3. used values
   属性的使用值是指完全确定计算值中相对值部分(The used value is the result of taking the computed value and resolving 
   any remaining dependencies into an absolute value),因为对于一些属性值而言只能在文档被布局后才能确定(some values,
   however, can only be determined when the document is being laid out).例如width属性, 如果其被设置为一个相对于
   其包含块的百分数,那么它的大小只能等到其包含块元素大小确定为止.

 
4. actual values
   属性的使用值原则来讲会在渲染时使用,但是由于在给定环境下用户代理可能不能使用这个值(used value is in principle the value used
   for rendering, but a user agent may not be able to make use of the value in a given environment),因此需要在使用值
   的基础上做一些近似值(The actual value is the used value after any approximations have been applied).
   
   往往是用于环境的某方面上的限制导致的.
   

text

1. 实现溢出文本显示省略号的效果

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

默认情况下文本是不会溢出的, 须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden)

transition-and-animation

A transition is an animation, just one that is performed between two distinct states.

If you want to perform something that does not specifically involve a ###start state and an end state###,
or you need more ###fine grain control### over the keyframes in a transition, then you've got to use an animation.

z-index

When elements overlap, z-order determines which one covers the other. An element with a larger 
z-index generally covers an element with a lower one.

bottom layer (farthest from the observer)
...
Layer -3
Layer -2
Layer -1
Layer 0 (default rendering layer)
Layer 1
Layer 2
Layer 3
...
top layer (closest to the observer)

-------------------------------------------------------------------------------------------------------------------

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first). 可以多个一起
3. the in-flow, non-inline-level, non-positioned descendants. 
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first). 可以多个一起

注意区分上面的child stacking contexts和普通non-positioned descentants.

在1,3,4,5中background/border为装饰属性，浮动和块状元素一般用作布局，而内联元素都是内容,网页中最重要的当然是内容了！尤其是 
CSS 世界是为更好的图文展示而设计的，因此，一定要让内容的层叠顺序相当高，这样当发生层叠时，重要的文字、图片内容才可以优先显示
在屏幕上。

-------------------------------------------------------------------------------------------------------------------
 
 z-index只用对定位元素才有效，非定位元素就算设置了有效的z-index值也达不到预期的效果，如果这样的话：
 1. the child stacking contexts with negative stack levels <===> 定位元素+z-index为负值
 2. the child stacking contexts with stack level 0 <===> 非定位元素但通过设置某些CSS3属性使得形成层叠上下文 或者 定位元素+z-index为0
 (注意不是设置为auto或者不设置采用其默认值auto, 这样是建立不了层叠上下文的)
 3. the positioned descendants with stack level 0 <===> 定位元素+z-index为auto或者不设置其默认值为auto, 而auto对应的层叠水平为0
 4. the child stacking contexts with positive stack levels <===> 定位元素+z-index为正值
 
 在2,6,7中可以大体可以看成是有显式的z-index指定的层叠水平确定的层叠顺序。对于非定位元素设置z-index属性，则z-index采取默认的初始值auto
 即层叠水平为0, 这样子看来叠水平总体还是由z-index来确定的。
 
-------------------------------------------------------------------------------------------------------------------