1。CSS には、基本的な書式設定を制御するプロパティがあります。 font -size や color など)、レイアウトを制御する属性 (position や float など) があり、印刷時に訪問者がページを変更する場所を決定する印刷制御要素もあります。 。さらに、他にも多くの属性があります。
2. スタイル シートには、Web ページの外観を定義するルールが含まれています。各ルールには、セレクター (選択) と宣言ブロック (宣言) の 2 つの主要な部分があります。セレクターはどの要素が影響を受けるかを決定し、宣言ブロックは何を実行するかを指定する 1 つ以上の属性と値のペアで構成されます。 3. コメントは「/* と */」で囲まれます。 /*和*/'包围。
1. 继承可理解为当为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。
程序一
<body> <p> <h1>The Ephemeral Blue Flax</h1> <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small>© Blue Flax Society.</small></p> </p> </body>
如程序一，所有的内容元素都是body元素的后代，用一个p包住了所有的内容，进一步，em和small元素都包含在一个p元素里，因此它们是p的后代（同时也是p和body的后代）。
程序二
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
border: 1px solid black;
overflow: hidden;
padding: 0 1em .25em;
}
p {
color: #36c; /* a blue color */
font-weight: bold;
}
img {
float: left;
margin-right: 1em;
} 程序二是CSS样式设置，这段样式表为程序一中的HTML进行样式设置，设置时体现了继承的特性。你可以看到，程序二中只有body、p和p元素的样式规则，而没有h1、em和small元素的规则。那么在页面显示的时候在则在h1、em和small
1. 継承は、特定の要素 に適用されるものとして理解できます。
CSS 属性。これらの属性は要素だけでなく、その下のブランチ要素にも影響します。 プログラム 1 と同様に、すべてのコンテンツ要素は body 要素です 子孫、ラップさらに、p 要素を持つすべてのコンテンツは p 要素でラップされます。これらは p の子孫です (また、p と body の子孫でもあります)。 |
プログラム 2 |
|---|---|
| text | |
| property name | property function |
| color | |
| 方向 | |
| 方向 | |
| フォント | フォントファミリー |
| フォントサイズ | フォントサイズ |
| フォントスタイル | |
| font-variant | |
| font-weight | 太字の設定に使用されます |
| letter-spacing | 文字間隔 |
| line-height | line-height |
| text-align | は配置を設定するために使用されます |
| text-indent | は最初の行のインデントを設定するために使用されます |
| text-transform | は大文字と小文字を変更するために使用されます |
| visibility | visibility |
white-space
はスペースの処理方法を指定するために使用されます
| 文字間隔 | |
|---|---|
| リスト | |
| 属性名属性関数 | |
| リスト形式 | リスト形式 |
| リスト-style -image | は、リストのカスタマイズされたマークアップを作成するために使用されます |
| 属性名 | 属性関数 |
|---|---|
| border-collapse | 表内の隣接するセルの境界線が結合されます。シングルボーダー |
| は、テーブルの境界間のギャップサイズを指定するために使用されます | |
| を使用 表内の空セルを表示するかどうかの設定 | |
| ページ設定(印刷物用) |
プロパティの効果
| ページネーション | が内部で発生するときにページの下部に保持する必要がある最小行数|
|---|---|
| がページング方法を設定するために使用されます要素内 | widows |
| その他 |
属性関数
| quotes | |
|---|---|
| カスケード: ルールが適用されるとき衝突 | あなたが書いたスタイルがブラウザのデフォルトのスタイルと衝突する場合、あなたが書いたスタイルが優先されます。これに基づいて、CSS はカスケードの原則を使用して特異性、順序、重要性を考慮し、競合するルールのうちどのルールを有効にするかを決定します。 |
p { ... } |
<p>...</p> |
.some<a href="http://www.php.cn/wiki/164.html" target="_blank">Class</a> { ... } |
<p class="someClass">...</p> |
#someID { ... } |
<p id="someID">...</p><p id="someID" class="someClass">...</p><p id="someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass">...</p>
|
<p id="someID" class="someClass"> ;...</p>🎜<p id="someID" class="someOtherClass">...</p> 🎜< p id="someID" class="someClass someOtherClass">...</p>🎜🎜🎜🎜矛盾するルールのどちらを優先するかを決定するには具体性が不十分な場合。このとき、後から現れる優先度が高くなるという順序ルールが適用されます。
上記のルールでは不十分な場合は、システム全体のルールをカバーする特別なルールを宣言できます。ステートメントの最後に を追加することもできます。 important、p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range<code>！important,比如p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; }（除非特殊情况，否则不推荐使用这种方法）。
对任何属性，如果希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。例如假设有一个article元素，其中包括几个段落。article元素设置了一个边框，通常边框不会被继承，因此p { border: inherit; }这条规则可以让这些段落获得相同的边框样式。
1. 很多CSS属性的值是长度。有的长度是相对于其他值的。一个em的长度大约与对应元素的字号相等。例如对元素设置<a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em就代表将元素的左边距设为元素字号的两倍。当em用于设置元素的font-size属性本身时，它的值继承自对应元素的父元素的字号。em的这种相对性对如今的网站建设工作来说是至关重要的，尤其是对那些需要适应不同屏幕尺寸的网站来说（这种做法被称为响应式Web设计）。
2. 百分数的工作方式很像em，百分数通常是相对于父元素的。
只有极少数的CSS属性接受不带单位的数字，最常见的就是line-height、<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>和opacity，eg:line-height: 1.5;这个例子中的值将与字号相乘，的到行高。
有的CSS属性允许开发人员指定另一个文件（尤其是图像）的URL，background-image就是这样一个属性。在这种情况下，使用url（file.ext），其中file.ext是目标资源的路径和文件名。要注意，规范指出相对URL应该相对于样式表的位置而不是相对于HTML文档的位置，eg:background: url(bg-pattern.png) ! important } (このアプローチは特別な状況を除いて推奨されません)。
inherit 値を使用できます。たとえば、複数の段落を含む article 要素があるとします。 article 要素は境界線を設定しますが、通常、境界線は継承されないため、p { border:inherit; } ルールによりこれらの段落に同じ境界線スタイルを取得できます。 | 長さとパーセンテージ | |
|---|---|
| 単位なしの数値を受け入れる CSS プロパティはほんのわずかですが、最も一般的なものは | |
| URL | |
| はそのような属性です。この場合、URL (file | .ext) を使用します。file.ext はターゲット リソース パスです。そしてファイル名。仕様では、相対 URL は HTML ドキュメント 、例:background: url(bg-pattern.png)。注: CSS プロパティ内の URL を引用符で囲む必要はありません。 |
| CSSカラー | |
| 16の基本色のキーワード | |
| カラー | キーワード |
| aqua(アクア) | |
| black(ブラック) | |
| ブルー(青) | |
| フクシア(パープル) | |
| グレー(グレー) | |
| グリーン(緑) | |
| ライム(ライトグリーン) | |
| マルーン(ブラウン) | |
| ネイビー(ダークブルー) |
赤、緑、青の量を指定して独自の色を作成できます。これら 3 つの色の値を指定するには、0 から 255 までの数値を使用できます。 color: rgb(89, 0, 127); または color: rgb(35%, 0%, 50%); (89 は 255 の 35% であるため)。 color: rgb(89, 0, 127);或color: rgb(35%, 0%, 50%);，因为89是255的35%。
这是CSS定义颜色最常用的方式，eg:color: #59007F。若#FF3344则可缩写为#F34。
RGBA、HSLA和HSL。
CSS3引入了指定颜色的方式HSL和通过RGBA和HSLA设置alpha透明度的能力。
RGBA在在RGB的基础上加了一个alpha透明度（alpha transparency）的A。可以在RGB后加上0~1的小数来指定透明度。eg:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75)。
HSL和HSLA是CSS3中新增的。HSLA是除了RGBA以外为颜色指定透明度的另一种方式。用HSLA指定透明度的方法与RGBA是一致的，eg:color: hsla(282,100%,25%,0.75)。
HSL代表色相（hue）、饱和度（saturation）和亮度（lightness），其色相的取值范围为0~360，饱和度和亮度的取值均为百分数，范围为0~100%。0和360在顶部汇合即0和360代表同一种颜色：红色，eg:color: hsl(282,100%,25%)
これは、CSS で色を定義する最も一般的な方法です (例: color: #59007F)。 #FF3344 の場合は、#F34 に短縮できます。 |
|
|---|---|
| RGBA、HSLA、HSL。 | CSS3 では、HSL を介して色を指定する方法と、RGBA および HSLA を介してアルファ透明度を設定する機能が導入されました。 | RGBA は、RGB をベースにアルファ透明度 (アルファ透明度) A を追加します。透明度はRGBの後ろに0～1の小数点を付加することで指定できます。例:
| HSL を考えて、0 から 360 までの色相を選択し、彩度を 100% に、明るさを 50% に設定すると、この色の最も純粋な形が得られます。彩度を下げると、色が灰色に変わります。明るさを増やすと色は色を維持した色に変わり、明るさを下げると色は黒色に変わります。 | たとえば、以下のより重要な色のいくつか: |
| color | hsl data |
| red | |
| yellow | |
| 緑 |
hsl(180,100%,50%);
以上がCSS スタイルシート、継承、カスケード、プロパティ値を分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
