css の簡単な紹介_html/css_WEB-ITnose

CSS Values and Units モジュール レベル 3

私はもともと css3 attr の入門書を書いていましたが、徐々に CSS ユニットについては適切な入門書が必要であることがわかりました

この記事は w3c 翻訳ではなく、元のテキストを保持して独自に作成したものに基づいています。自分自身の理解です

概要

この CSS3 モジュールでは、CSS プロパティが受け入れる共通の値と単位、および CSS プロパティ定義でそれらを記述するために使用される構文について説明します。
CSS は、構造化ドキュメントのレンダリングを記述するための言語です
( HTML や XML など) 画面上、紙上、音声など

要約

この css3 モジュールでは、css プロパティの一般的な値と単位、および css プロパティを定義するときにそれらを使用するための構文について説明します。

CSS は、画面、紙、スピーチなどでよく見られる、構造化ドキュメント (HTML や XML など) を記述するために使用されるプレゼンテーション言語です。

はじめに

各 CSS プロパティの値定義フィールドには、キーワード、

データ型 (< と > の間に表示されます)、およびそれらをどのように組み合わせることができるかについての情報を含めることができます。多くのプロパティで使用できる

使用) はこの
仕様で説明されていますが、より具体的なデータ型 (例: )
は対応するモジュールで説明されています。


各 CSS プロパティには、キーワード、データ型 (< に表示; と > の間)、それらがどのように組み合わされるか。汎用データ型 (最も広く使用されている) はほとんどの属性によって記述され、他のより具体的なデータ型 ( など) は対応するモジュールを記述します。

1.1. モジュールの相互作用

このモジュールは、[CSS21]

セクション 1.4.2.1、4.3、および A.2.

のデータ型定義を置き換えて拡張します

モジュールの相互作用

このモジュールは、[css21] を置き換えます

値定義構文

ここで説明する構文は、CSS プロパティの有効な値のセット

を定義するために使用されます。プロパティ値には 1 つ以上のコンポーネントを含めることができます。

値定義構文
セットを定義する CSS プロパティ。有効な値の。プロパティ値は 1 つ以上のコンポーネントを持つことができます

2.1. コンポーネント値のタイプ

コンポーネント値のタイプはいくつかの方法で指定されます:

文字通りに現れるキーワード値 (auto、disc など)

引用符なし (例: auto)

< と > の間に現れる基本データ型 (例: ,

など)。

同じ名前を持つプロパティと同じ範囲の値を持つ
型(例: < 'border-width'>、<'background-attachment'> など)。

この場合、型名は括弧内のプロパティ名 (

引用符で囲まれたもの) です。型には、inherit.
などの CSS 全体のキーワードは含まれません

プロパティと同じ名前を共有しない非終端名は、次のように < と > の間に表示されます。
と
<'border-width'> の違いに注意してください: 後者は
border-width プロパティの値として定義され、前者は別の場所で明示的に展開する必要があります
。通常、仕様での最初の出現の近くに配置されます

コンポーネント値の型
コンポーネント値の型は、いくつかの方法で指定されます

キーワード (auto、disc など)

基本データ型は

型は同じです プロパティとしての値は同じ名前を持ちます このような型名はプロパティ名

非終端であるため、この場合、プロパティと同じ名前を共有しないでください

一部のプロパティ値の定義には、リテラルとしてのスラッシュ (/)、コンマ (,)、および/または括弧は、コンポーネント値に出現する可能性のある他の非キーワード リテラル文字 (「+」など) を表す必要があります。

一重引用符で囲まれています。

一部のプロパティ値定義には、(/) カンマ (,) も含まれます。

文法で指定されたカンマは、文法内でオプションの用語を区切るために使用される場合、暗黙的に省略可能です。プロパティやその他の CSS 値のリスト、または関数の引数リストでは、次の場合には文法で指定されたカンマを省略する必要があります:

たとえば、関数が 3 つの引数を順番に受け入れることができるが、それらはすべてオプションである場合
、文法は次のように書くことができます:
example(first? , Second? , third? )

関数に 3 つのパラメータが必要な場合は、次のように書くことができます

example(first? , Second? , third? )

この文法を考慮すると、
example(first, Second) または example(first, third) または example(second) であるため、example(first, Second, third) と書くことは有効です。
ただし、example(first, , third)これらのコンマ
の 1 つが 2 つのオプションを区切っていないため、無効です。同様に、example(,first,) と
example(first,) は無効です。 example(first Second) も、実際にオプションを区切るために
コンマが必要であるため、無効です。

コンマが暗黙的に省略可能でない場合、引数
が可能な方法を適切に表現するには、文法が
より複雑になる必要があります。省略すると、機能の単純さが大幅にわかりにくくなります。

正确的
example(first, Second) or example(first, third) or example(second)
错误的
example(first, , third) は無効です、example (,second) と example(first,)

すべての CSS プロパティは、プロパティ値の唯一の
コンポーネントとして CSS 全体のキーワード値も受け入れます。読みやすくするために、これらはプロパティ値の構文定義には明示的にリストされていません
。
たとえば、border-color の完全な値の定義は {1,4} |
継承 | です。イニシャル | ({1,4} としてリストされている場合でも) 設定を解除します。

すべてのプロパティも、CSS ワイドのセキュリティ値をコンポーネントのプロパティとして受け取ります。これらはすべて、明示的に列挙されているプロパティ値ではありません。 border-color の値は {1,4} |継承 |イニシャル |設定を解除します

2.2。コンポーネント値コンビネータ

コンポーネント値は、次のようにプロパティ値に配置できます:

コンポーネントを並置するとは、

指定された順序ですべてのコンポーネントが出現する必要があることを意味します。

2 つ以上のコンポーネントを区切るには、2 つ以上のアンパサンド (&&) が使用されます。

任意の順序で指定する必要があります。
二重バー (||) は 2 つ以上のオプションを区切ります: 1 つ以上のオプション

任意の順序で指定する必要があります。

バー (|) は 2 つ以上の選択肢を区切ります。それらのうちの 1 つだけ

が出現する必要があります。

括弧 ([ ]) はグループ化用です。

構成要素值被配置から構成要素值必须遵守

すべての構成要素遵守循環順序

&& 分离两个または複数の構成要素
|| 分割または複数のオプション
| 分离两个または多个代替选择
[] 分组

並置は二重アンパサンドより強く、二重

アンパサンドは二重バーより強く、二重バーはバーより

強い。したがって、次の行は同等です:

a b | c || d && e f

[ a b ] | [ c || [ d && [ e f ]]]

并列（ef） > &> || > |

再順序付け可能なコンビネータ (||、&&) の場合、文法の順序は問題ではありません

: 同じグループ内のコンポーネントは、任意の

順序でインターリーブできます。したがって、次の行は同等です:

a || b || c

b || ||

|| && 中の内容顺序并重要ではありません

2.3.コンポーネント値の乗数

すべてのタイプ、キーワード、または括弧で囲まれたグループの後には、

次の修飾子のいずれかを続けることができます:

アスタリスク (*) は、先行するタイプ、単語、またはグループ

が 0 回以上出現することを示します。

プラス (+) は、先行するタイプ、単語、またはグループが 1 回以上出現することを示します

疑問符 (?) は、先行するタイプ、単語、またはグループがオプションであることを示します (0 回または 1 回出現します)。 .

中括弧内の単一の数字 ({A}) は、先行する

タイプ、単語、またはグループが A 回出現することを示します。

中括弧内のカンマ区切りの数字のペア ({A,B}) は、

を示します先行する型、単語、またはグループが少なくとも A 回、最大で B 回出現すること。 B は省略できます ({A,})。
繰り返し回数に上限はなく、少なくとも A 回の繰り返しが必要であることを示します。

ハッシュ マーク (#) は、先行する型、単語、 or group
は、カンマ トークンで区切られて 1 回以上出現します (オプションで空白やコメントで囲まれることもあります)。 #{1,4} のように、
繰り返しが何回発生するかを正確に示すために、オプションで上記の中括弧を続けることができます。
グループの後の感嘆符 (!) は、そのグループが次であることを示します
必須であり、少なくとも 1 つの値を生成する必要があります。たとえグループ内の項目の文法で内容全体

を省略できるとしても、少なくとも 1 つのコンポーネント値を省略してはなりません

繰り返されるコンポーネント値 (*、+、または # で示される) については、UAコンポーネントの少なくとも 20 回の繰り返しをサポートする必要があります。プロパティ値
にサポートされている回数を超える繰り返しが含まれている場合、
宣言は無効であるかのように無視する必要があります。

各タイプ、キーワード、または同等のグループの後に修飾子を付けることができます

アスタリスク (*) は、先行するタイプ、単語、またはグループが 0 回以上出現することを示します

プラス記号 (+) は、先行するタイプ、単語、またはグループが 1 回以上出現します

疑問符 (?) は、前の型、単語、またはグループがオプションであることを示します (0 回または 1 回出現します)

中括弧数字 ({A}) は、前の型、単語が存在することを示します、またはグループが A 回出現します

中括弧内の数字 ({A, B}) は、前のタイプ、単語、またはグループが A ～ B 回出現することを示します。
数字付き中括弧 ({,B}) は、前のタイプ、単語、またはグループが 1 ～ B 回出現します

ハッシュマーク (#) は、前のタイプ、単語、またはグループが 1 回以上出現することを示します

感嘆符 (!)、グループは、グループ要件が少なくとも 1 回以上出現する必要があることを示しますグループ内の項目の構文によってコンテンツ全体が省略される場合でも、少なくとも 1 つのコンポーネント値を省略することはできません。

感嘆符 (!) は、グループ要件が少なくとも 1 つの値を生成する必要があることを示します。グループ内の項目の構文によりコンテンツ全体が省略される場合でも、少なくとも 1 つのコンポーネント値は省略できません。

2.4. コンビネータと乗算器のパターン

複数の独立したコンポーネント値、特に、一連の数値と次数を組み合わせる一般的な方法がいくつかあります。

作成者は、
文法で指定された順序または任意の順序で、0 個以上、1 つ以上、またはすべてを選択する必要があります。

これらはすべて、単純なパターンを使用して簡単に表現できます
コンビネータと乗算器:

「任意の

順序」の可能性はすべてコンビネータを使用して表現されますが、「in
の順序」の可能性はすべて並列のバリアントであることに注意してください。


属性値は複数のコンポーネントで構成されている可能性があります

2.5. コンポーネントの値と空白

特に指定がない限り、空白やコメントは、上記

のコンビネータと乗算器を使用して結合されたコンポーネントの前、後、および/または間に現れることがあります

上記は一部の w3c です。ドキュメントと属性
2.6. プロパティ値の例

以下は、対応する値定義フィールドを含むプロパティの例です

次に、図内のいくつかの図について説明します

「孤児」の定義は次のとおりです。 3 に設定します

'text-align' は left または right または center または justify として定義され、'center' に設定できます

'padding-top' は次のように定義され、'5%' に設定できます

• 'outline-color' は || として定義されます。 '#fefefe'
• 'text-decoration' に設定できます。 定義は、 || 上線 || ラインスルー || を意味します。この属性は同時に 1 つ以上に設定できるということです。'overline Underline'
• 'font-family' は [ | ]# として定義されています。これは、少なくともリストに似た値を組み合わせたものであることを意味します。 1 つは複数記述する必要があり、'"Gill Sans"、Futura、sans-serif に設定できます。これは、1 回から 4 回まで、太くするか、中程度または細くするかを指定できることを意味します
'text-shadow' は [{ 2,4} && ?]]# | none
• これは、text-shadow が複数のグループを記述できることを意味します。以下は 2 つを選択できることを示します。色: 3px 3px rgba(50,50,50, .5)、インセット 3px 0px 1px 2px #092302'
• 
  
3.1. 事前定義されたキーワード
値定義フィールドには、事前定義された意味を持つキーワード
• キーワードは文字通りに表示され、CSS 識別子であり、ASCII の大文字と小文字を区別せずに解釈されます (つまり、[a-z] と [A-Z] は同等です)。
• たとえば、border -collapse
  プロパティの値の定義は次のとおりです。
値:

事前定義されたキーワードは、サイズに依存しない予約された意味のあるキーワードです。

CSS 全体のキーワードを記述します。 Initial、inherit、および unset

上記で定義されているように、すべてのプロパティは、

すべての CSS プロパティに共通の値の計算を表す CSS 全体のキーワードを受け入れます。

initial キーワードは、プロパティの
初期値として指定された値を表します。 unset キーワードは、プロパティが継承されるかどうかに応じて、
要素の親のプロパティの計算値を表します。これらのキーワードはすべて、[CSS3CASCADE] モジュールで標準的に定義されます。 ]

他の CSS 仕様では、追加の CSS 全体のキーワードを定義できます
継承は、親要素の計算されたスタイルを表します

unset は、initial および継承と同様に動作します

3.2. Author-defined Identifiers: the type

Some properties accept arbitrary author-defined identifiers as a
component value. This generic data type is denoted by ,
and represents any valid CSS identifier that would not be
misinterpreted as a pre-defined keyword in that property’s value
definition. Such identifiers are fully case-sensitive, even in the
ASCII range (e.g. example and EXAMPLE are two different, unrelated
user-defined identifiers).

就是自定义标示符 不清楚什么用 有一个链接
关于< custom-ident >的一些解释

The CSS-wide keywords are not valid s. The default
keyword is reserved and is also not a valid .
Specifications using must specify clearly what other
keywords are excluded from , if any?for example by
saying that any pre-defined keywords in that property’s value
definition are excluded. Excluded keywords are excluded in all ASCII
case permutations.

When parsing positionally-ambiguous keywords in a property value, a
production can only claim the keyword if no other
unfulfilled production can claim it.

< custom-ident > 不能使用css默认关键字

For example, the shorthand declaration animation: ease-in ease-out is
equivalent to the longhand declarations animation-timing-function:
ease-in; animation-name: ease-out;. ease-in is claimed by the
production belonging to
animation-timing-function, leaving ease-out to be claimed by the
production belonging to animation-name.

官方的例子有点难懂 custom-ident在自定义动画用到

/* @keyframes name | duration | timing-function | delay |    iteration-count | direction | fill-mode | play-state */  animation: slidein 3s ease-in 1s 2 reverse both paused;

slidein就是< custom-ident >啦

3.3. Quoted Strings: the type

Strings are denoted by and consist of a sequence of
characters delimited by double quotes or single quotes. They
correspond to the production in the CSS Syntax Module
[CSS3SYN].

Double quotes cannot occur inside double quotes, unless escaped (as
"\"" or as "\22"). Analogously for single quotes ('\'' or '\27').
content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'

引用字符串:类型
css 都是字符串啦 不过css string类型是用单引号 或 双引号括起来的内容

It is possible to break strings over several lines, for aesthetic or
other reasons, but in such a case the newline itself has to be escaped
with a backslash (). The newline is subsequently removed from the
string. For instance, the following two selectors are exactly the
same:

a[title="a not s\
o very long title"] {/.../}
a[title="a not so very long title"] {/.../}

Since a string cannot directly represent a newline, to include a newline > in a string, use > the escape "\A". (Hexadecimal A is the line feed
character in Unicode (U+000A), but represents the generic notion of
"newline" in CSS.)

string 如果碰到换行使用\
还有一种情况 html中某段属性换行了需要使用\A模拟换行
\A模拟换行 codepen地址

3.4. Resource Locators: the type

A URL is a pointer to a resource and is a functional notation denoted
by . The syntax of a is:

= url( * )
Below is an example of a URL
being used as a background image:
body { background: url("http://www.example.com/pinkish.gif") }

< url > 是有 url(< string > < url-modifier >*) 组成的 可以为零次或多次

In addition to the syntax defined above, a can sometimes be
written in other ways:

For legacy reasons, a < url > can be written without quotation marks
around the URL itself. This syntax is specially-parsed, and produces a
< url-token > rather than a function syntactically. [CSS3SYN]

Some CSS contexts, such as @import, allow a < url > to be represented by a
< string > instead. This behaves identically to writing a url() function
containing that string. Because these alternate ways of writing a
< url > are not functional notations, they cannot accept any
< url-modifier >s.

大家写url内内容是不要忘加引号 @import 不需要url function表达式 而且由于没有使用 url 函数 所以不能使用 < url-modifier >

3.4.1。相対 URL

リソースの
絶対的な場所に依存しないモジュラー スタイル シートを作成するには、作成者は相対 URL を使用する必要があります。
相対 URL ([URL] で定義されている) は、
ベースを使用して完全な URL に解決されます。 URL。 RFC 3986 のセクション 3 では、このプロセスの規範的なアルゴリズムが定義されています。 CSS スタイル シートの場合、ベース URL はスタイル
シート自体の URL であり、スタイル設定されたソース ドキュメントの URL ではありません。ドキュメント内に埋め込まれたスタイル シート
には、その
コンテナに関連付けられたベース URL があります。
プロパティの計算値に a が出現すると、前の段落で説明したように、

絶対 URL に解決されます。

計算された値UA が絶対に解決できない URL の
URL が指定された値です。

たとえば、次のルールがあるとします。 body {background:

url("tile.png") } が、で指定されたスタイル シートに配置されているとします。 URL:

http://www.example.org/style/basic.css ソース

ドキュメントのの背景。 URL:

http://www.example.org/style/tile.png で指定されたリソースで記述されている画像がすべてタイル表示されます
を含むソースドキュメントの URL に関係なく、同じ画像が使用されます

.

url は相对路径

3.4.2 を使用できます。 URL 修飾子

url() 関数は、URL の意味や解釈を何らかの方法で変更する追加の の指定をサポートしています

。 A

は、関数または関数のいずれかです。

この仕様では を定義しませんが、他の

仕様では定義する可能性があります。

url() サポート < URL 修飾子 > css3 草案 他の规范啦の何かを参照してください

数値データ型

プロパティは、数値を特定の範囲に制限する場合があります。値が許可された範囲外にある場合、その宣言は無効であり、無視する必要があります。

CSS は理論的には、すべての値の型に対して無限の精度と無限の範囲をサポートしています。しかし実際には、実装の容量には限界があります

。 UA は、合理的に有用な範囲と精度をサポートする必要があります。

プロパティが数値範囲を制限する可能性があります。その値が許可範囲を超える場合は、無効であることが通知され、必ず取得する必要があります。 UA システムは、合理的に有用な範囲と精度をサポートします。4.1 は、CSS ではありません。整数: 型

整数値は で表されます。整数は 1 つ以上の
10 進数 0 ～ 9 であり、CSS 構文モジュール [CSS3SYN] の

生成のサブセットに対応します。

整数の最初の桁の直前に - または + を付けて、

整数の符号を示すことができます。

<整数 > 整数型は使用可能 - 表示良数 + 表示正数

4.2.実数: 型

数値は で表されます。数値は、
または 0 個以上の 10 進数の後にドット (.) が続き、その後に 1 つ以上の 10 進数が続き、オプションで "e" または
"E" と整数で構成される指数です。 CSS構文モジュール[CSS3SYN]

での制作に対応します。整数と同様に、数値の最初の文字

の直前に - または + を付けて、

数値の符号を示すことができます。

<番号 > 数字の種類には、小数整数啦有記号啦

4.3が含まれます。パーセンテージ: タイプ

パーセンテージ値は で示され、a
の直後にパーセント記号 % が続きます。これは、
CSS 構文モジュール [CSS3SYN] の生成に対応します。

パーセンテージ値は、常に別の値、例えば長さに対して相対的です。パーセンテージを許可する各プロパティは、パーセンテージが参照する値

も定義します。値は、同じ要素の別の

プロパティの値、祖先要素のプロパティ、または

書式設定コンテキストの値 (包含

ブロックの幅など) である可能性があります。パーセンテージ > 类型啦 取值有父元素 または格式化上下文 决定

4.4.単位付きの数値: ディメンション

ディメンションの直後に単位識別子が続くものです。

CSS 構文

モジュール [CSS3SYN] のプロダクションに対応します。キーワードと同様に、ユニット識別子は ASCII
大文字と小文字が区別されません。

CSS は、距離 ()、持続時間
()、周波数 ()、解像度 ()、および
他の数量を指定するために次元を使用します。

CSS 番号 还可以带单位

距離単位: タイプ

長さは距離の測定値を指し、プロパティ定義内で
で示されます。長さは寸法です。ただし、長さがゼロ
の場合、単位識別子はオプションです (つまり、構文的に 0 として表すことができます)。
プロパティは長さの値を特定の範囲に制限する場合があります。値

が許可された範囲外にある場合、宣言は無効であるため、

無視する必要があります。
一部のプロパティでは負の長さの値が許可されますが、これにより書式設定が複雑になる可能性があり、実装固有の制限がある場合があります
。負の長さの値が許可されていてもサポートできない場合は、

サポートできる最も近い値に変換する必要があります

使用されている長さがサポートできない場合、ユーザーエージェントは
実際の値で近似する必要があります

長さの単位には、相対単位と絶対単位の 2 種類があります。

css <長さ＞ type 有绝对的有相的不过都并不是標準确的

5.1。相対長さ

相対長さの単位は、別の長さに対する相対的な長さを指定します。

相対単位を使用するスタイルシートは、ある

出力環境から別の出力環境へとより簡単にスケールできます。

相対単位は次のとおりです:

子要素は相対長さを継承しません。

親に指定された値。これらは計算された値を継承します。絶対長さ: cm、mm、q、in、pt、pc、px 単位

絶対長さの単位は相互に関連して固定されており、何らかの物理的測定値に固定されています。これらは主に、出力環境がわかっている場合に役立ちます。絶対単位は、物理単位 (in、cm、mm、pt、pc、q) と視角単位 (px) で構成されます。