CSS スタイルシート、継承、カスケード、プロパティ値を分析します。-CSSチュートリアル-php.cn

この記事では、CSS スタイルシート、継承、カスケードおよびプロパティ値を分析します

スタイルシートを構築し、注釈を追加します

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>&copy; 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 属性。これらの属性は要素だけでなく、その下のブランチ要素にも影響します。

プログラム 1rrreee

rrreee プログラム 2 は、プログラム 1 の HTML のスタイルを設定するスタイルシートです。 , 設定時に継承した特性が反映されます。プログラム 2 には、body、p、および p 要素のスタイルルールのみがあり、h1 にはスタイルルールがないことがわかります。 code> 、<code>em および small 要素のルール。その後、ページが表示されると、継承特性が h1、em、および small 要素に反映されます。 2. 以下の CSS プロパティが継承され、体系的にここにリストされます: color、Except 要素方向フォントフォントファミリーフォントスタイルはイタリック体の設定に使用されます font-variant スモールキャップの設定に使用されます

プログラム 1 と同様に、すべてのコンテンツ要素は `body` 要素です子孫、ラップさらに、`p` 要素を持つすべてのコンテンツは `p` 要素でラップされます。これらは `p` の子孫です (また、`p` と `body` の子孫でもあります)。	プログラム 2
	text
property name	property function
	color

方向
フォント	フォントファミリー
フォントサイズ	フォントサイズ


font-weight	太字の設定に使用されます
letter-spacing	文字間隔
line-height	line-height
text-align	は配置を設定するために使用されます
text-indent	は最初の行のインデントを設定するために使用されます
text-transform	は大文字と小文字を変更するために使用されます
visibility	visibility

white-space

はスペースの処理方法を指定するために使用されます

言葉-間隔文字間隔


リスト
属性名属性関数
リスト形式	リスト形式
リスト-style -image	は、リストのカスタマイズされたマークアップを作成するために使用されます

🎜list-style-position🎜🎜🎜は、リストのマークアップの位置を決定するために使用されます🎜🎜🎜🎜🎜list-style-type🎜 🎜🎜はリストタグの設定に使用されます🎜🎜🎜🎜

Table

border-spacingキャプションサイドは、テーブルタイトルの位置を設定するために使用されます。 -cells

属性名	属性関数
border-collapse	表内の隣接するセルの境界線が結合されます。シングルボーダー
は、テーブルの境界間のギャップサイズを指定するために使用されます
を使用表内の空セルを表示するかどうかの設定
ページ設定(印刷物用)

プロパティ名

プロパティの効果

orphans要素の設定に使用されますが内部で発生するときにページの下部に保持する必要がある最小行数page-break-insideがページング方法を設定するために使用されます要素内widowsは、要素内でページングが発生するタイミングを設定するために使用されますページ分割時にページの先頭に保持する必要がある最小行数

ページネーション


その他

属性名

属性関数

cursorマウスポインタquotes引用符のスタイルを指定するために使用されますあなたが書いたスタイルがブラウザのデフォルトのスタイルと衝突する場合、あなたが書いたスタイルが優先されます。これに基づいて、CSS はカスケードの原則を使用して特異性、順序、重要性を考慮し、競合するルールのうちどのルールを有効にするかを決定します。



カスケード: ルールが適用されるとき衝突

Specificity

特異性ルールは、セレクターがどの程度具体的であるかを指定します。セレクターが具体的であればあるほど、ルールは強力になります。競合が発生すると、より具体的なルールが最初に適用されます。

いくつかのセレクターをリストします: (特異性の低いものから高いものへと並べられています)

selector

対応する HTML

p { ... }<p&gt ;....some<a href="http://www.php.cn/wiki/164.html" target="_blank">クラス</a> { ... }... #someID { ... }...


`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>`

🎜... 🎜...🎜🎜🎜🎜

Order

矛盾するルールのどちらを優先するかを決定するには具体性が不十分な場合。このとき、後から現れる優先度が高くなるという順序ルールが適用されます。

重要性

上記のルールでは不十分な場合は、システム全体のルールをカバーする特別なルールを宣言できます。ステートメントの最後に を追加することもできます。 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

对任何属性，如果希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用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;这个例子中的值将与字号相乘，的到行高。

URL

有的CSS属性允许开发人员指定另一个文件（尤其是图像）的URL，background-image就是这样一个属性。在这种情况下，使用url（file.ext），其中file.ext是目标资源的路径和文件名。要注意，规范指出相对URL应该相对于样式表的位置而不是相对于HTML文档的位置，eg:background: url(bg-pattern.png) ! important } (このアプローチは特別な状況を除いて推奨されません)。

属性の値

inherit

任意の属性について、属性の値が親によって設定された値と同じであることを明示的に示したい場合対応する要素の `inherit` 値を使用できます。たとえば、複数の段落を含む `article` 要素があるとします。 `article` 要素は境界線を設定しますが、通常、境界線は継承されないため、`p { border:inherit; }` ルールによりこれらの段落に同じ境界線スタイルを取得できます。

長さとパーセンテージ1 多くの CSS プロパティの値は長さです。一部の長さは他の値と相対的です。 em の長さは、対応する要素のフォントサイズとほぼ同じです。たとえば、要素に <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em を設定すると、要素の左側は次のようになります。間隔は要素のフォントサイズの 2 倍に設定されます。 em を使用して要素自体の font-size プロパティを設定する場合、その値は、対応する要素の親要素のフォントサイズから継承されます。この em の相対性は、今日の Web サイト構築の取り組み、特にさまざまな画面サイズに適応する必要がある Web サイトの構築 (このアプローチはレスポンシブ Web デザインと呼ばれます) にとって非常に重要です。 2. パーセンテージは em と同様に機能し、パーセンテージは通常、親要素を基準とします。純粋な数値単位なしの数値を受け入れる CSS プロパティはほんのわずかですが、最も一般的なものは line-height、<a href="http:%20/%20/www.php.cn/wiki/903.html" target="_blank">z-index</a><td> と <code>opacity、例:line-height: 1.5; code>この例の値は、行の高さまでフォントサイズで乗算されます。 開発者が別のファイル (特に画像) の URL を指定できる CSS プロパティがあります。background-image.ext) を使用します。file.ext はターゲットリソースパスです。そしてファイル名。仕様では、相対 URL は HTML ドキュメント #00FFFF #000000#0000FF#FF00FF#8080 80# 008000#00FF00#800000#000




	URL
はそのような属性です。この場合、URL (file	、例:`background: url(bg-pattern.png)`。注: CSS プロパティ内の URL を引用符で囲む必要はありません。
	CSSカラー
16の基本色のキーワード
カラー	キーワード
	aqua(アクア)
	black(ブラック)
	ブルー(青)
	フクシア(パープル)
	グレー(グレー)
	グリーン(緑)
	ライム(ライトグリーン)
	マルーン(ブラウン)
	ネイビー(ダークブルー)

🎜🎜オリーブ(オリーブ)🎜 🎜 #808000🎜🎜🎜🎜パープル(紫)🎜🎜#8000080🎜🎜🎜🎜レッド(赤)🎜🎜#FF0000🎜🎜🎜🎜シルバー(銀)🎜🎜#C0C0C0🎜 🎜🎜ティール（ダークブルー）🎜🎜# 008080🎜🎜🎜🎜白（白）🎜🎜#FFFFFF🎜🎜🎜🎜黄（黄）🎜🎜#FFFF00🎜🎜🎜🎜

RGB

赤、緑、青の量を指定して独自の色を作成できます。これら 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。

これは、CSS で色を定義する最も一般的な方法です (例: `color: #59007F`)。 `#FF3344` の場合は、`#F34` に短縮できます。
	CSS3 では、HSL を介して色を指定する方法と、RGBA および HSLA を介してアルファ透明度を設定する機能が導入されました。
HSL を考えて、0 から 360 までの色相を選択し、彩度を 100% に、明るさを 50% に設定すると、この色の最も純粋な形が得られます。彩度を下げると、色が灰色に変わります。明るさを増やすと色は色を維持した色に変わり、明るさを下げると色は黒色に変わります。	たとえば、以下のより重要な色のいくつか:

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS スタイルシート、継承、カスケード、プロパティ値を分析します。

この記事では、CSS スタイルシート、継承、カスケードおよびプロパティ値を分析します

スタイルシートを構築し、注釈を追加します

理解继承