css property可以包含下列这些属性:
- Value: legal values & syntax
- Initial: initial value
- Applies to: elements this property applies to
- Inherited: whether the property is inherited
- Percentages: how percentage values are interpreted - 是否接受百分号作为属性值
- Media: which media groups the property applies to
- Computed value: how to compute the computed value
属性值定义的几种方式:
- Several juxtaposed words mean that all of them must occur, in the given order.
- A bar (|) separates two or more alternatives: exactly one of them must occur.
- A double bar (||) separates two or more options: one or more of them must occur, in any order.
- A double ampersand (&&) separates two or more components, all of which must occur, in any order.
- Brackets ([ ]) are for grouping.
font-family: "Gill Sans", sans-serif; - 通用字体,所有浏览器都支持
复制
User Agent, 即浏览器。
The first declaration on the BODY element sets the font family to “Gill Sans”. If that font is not available, the user agent (often referred to as a “browser”) will use the ‘sans-serif’ font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the ‘font-family’ property.
Attribute
A value associated with an element, consisting of a name, and an associated (textual) value.
Content
The content associated with an element in the source document. Some elements have no content, in which case they are called empty.
The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.
Author
An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.
css的书写者。
User
A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.
最终用户
User agent (UA)
A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.
An HTML user agent is one that supports one or more of the HTML specifications. A user agent that supports XHTML [XHTML], but not HTML is not considered an HTML user agent for the purpose of conformance with this specification.
Property
CSS defines a finite set of parameters, called properties, that direct the rendering of a document.
Each property has a name (e.g., ‘color’, ‘font’, or border’) and a value (e.g., ‘red’, ‘12pt Times’, or ‘dotted’). Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of specificity, cascading, and inheritance (see the chapter on Assigning property values, Cascading, and Inheritance).
CSS property和document渲染相关,但attribute无关。
看个attribute的例子:
<html>
<div>
<span>1</span>
<span>2</span>
</div>
<div id = "jerry" actions tool="spa">
<p>3</p>
<p>4</p>
</div>
</html>
复制
percentage property
Percentage values are always relative to another value, for example a length.
Percentage values总是和另一个属性值相关联。
Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block).
比如我指定了一个max-wdith:60%,那么这个60%到底是另一个什么样的属性的60%呢?
另一个属性可能是同一个element的另一个属性,也可能是其祖先element的某一个属性,或者是formatting context的value,比如containing block的width.
When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.
percentage value的继承问题
Since child elements (generally) inherit the computed values of their parent, in the following example, the children of the P element will inherit a value of 12px for ‘line-height’, not the percentage value (120%):
p { font-size: 10px }
p { line-height: 120% } /* 120% of 'font-size' */
复制
子节点继承父节点的property是calculated property,而不是percentage property.