CSS标准的构造和Grouping、class和id

2020-09-30 07:33 jianzhan
2.1 标准的构造 <rules>::=<selector> <左括号><declarations><右括号> <declarations>::= <declaration>{<SEMICOLON><declaration>}[SEMICO LON] <SEMICOLON>::=分号 <declaration>::=<property><COLON> <value> <COLON>::=冒号 <value>::=<keyword list> <keyword list>::=<keyword>{<SPACE><keyword>} <SPACE>::=空格 一般会用空格作为value之间的隔开符,有个列外: As we've seen, CSS keywords are separated by spaces—except in one instance. In the CSS property font, there is exactly one place where a forward-slash (/) can be used to separate two specific keywords. Here's an example: h2 {font: large/150% sans-serif;} The slash separates the keywords that set the element's font size and line height. This is the only place the slash is allowed to appear in the font declaration. All of the other keywords allowed for font are separated by spaces. 2.1.1selector selector: defines which piece of the document will be affected. Selector一般是html元素,也将会是xml中容许任何元素。 2.1.2 Declarations and Keywords 2.2 Grouping 2.2.1 grouping selectors 将好几个元素同用1个style,事例:
/* group 1 */ h1 {color: silver; background: white;} h2 {color: silver; background: gray;} h3 {color: white; background: gray;} h4 {color: silver; background: white;} b {color: gray; background: white;} /* group 2 */ h1, h2, h4 {color: silver;} h2, h3 {background: gray;} h1, h4, b {background: white;} h3 {color: white;} b {color: gray;} /* group 3 */ h1, h4 {color: silver; background: white;} h2 {color: silver;} h3 {color: white;} h2, h3 {background: gray;} b {color: gray; background: white;} 2.2.1.1 The universal selector * {color: red;} 2.2.2 grouping declarations 事例: h1 {font: 18px Helvetica;} h1 {color: purple;} h1 {background: aqua;} h1 { font: 18px Helvetica; color: purple; background: aqua; } If the second semicolon is omitted, however, the user agent will interpret the style sheet as follows: h1 { font: 18px Helvetica; color: purplebackground: aqua; } Since background: is not a valid value for color, and also since color can be given only one keyword, a user agent will ignore the color declaration (including the background: aqua part) entirely. It might render h1s as purple text without an aqua background, but more likely, you won't even get purple h1s. Instead, they'll be the default color (usually black) with no background at all. (The declaration font: 18px Helvetica will still take effect since it was correctly terminated with a semicolon.) 2.2.3 Grouping Everything 便是另外group selector和declaration h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black;} You've grouped the selectors, so the styles on the right side of the rule will be applied to all the headings listed, and grouping the declarations means that all of the listed styles will be applied to the selectors on the left side of the rule. 2.3 class and id selectors 最简易的selector是只对于文本文档元素的element selecoter,也有两种selecotrs:class selectors和id selectors。 这两种selector能够单独于文本文档元素的,即并不是于实际某个的文本文档元素立即关系的。这两种selecoter能够独立应用,还可以和element selector1起应用。可是这两种selector的应用必须相互配合文本文档撰写的标准性。 例如写1个探讨plutonium解决方法的文本文档,文本文档由许多段构成,包括许多警示信息内容,期待将警示的字体样式置为bold,以突显显示信息。可是这些警示信息内容的文件格式许多,1段文本,目录式,1小标题文字等。因此不可以根据 p {font-weight: bold;} 的方式来界定。这样没法从都是文字的全部文本文档中寻找警示信息内容,并加粗。 因而,处理方法:应用class selectors给警示信息内容的一部分再加标识。