css property 和 attribute 的区别

简介: css property 和 attribute 的区别

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; - 通用字体,所有浏览器都支持


image.png

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的例子:

image.png

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%):

image.png

子节点继承父节点的property是calculated property,而不是percentage property.


相关文章
|
4月前
|
前端开发
CSS和HTML的区别
CSS和HTML的区别。
24 2
|
4月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
132 0
|
4月前
|
前端开发 容器
CSS语言的属性(Property)和值(Value)
CSS语言的属性(Property)和值(Value)
|
3月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
38 1
WK
|
2天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
12 3
|
1月前
|
前端开发
css中px和em的区别
css中px和em的区别
45 0
|
1月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
3月前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
3月前
|
前端开发
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
24 0
|
3月前
|
前端开发
CSS伪类与伪元素的区别
CSS伪类与伪元素的区别
24 0