CSS基礎知識メモ(3)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS基礎知識メモ(3)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:32:58

オリジナル

1200 人が閲覧しました

継承

継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。たとえば、次のコード: 特定の色が p タグに適用される場合、この色の設定は p タグだけでなく、p タグ内のすべてのサブ要素テキストにも適用されます。ここで、サブ要素はスパンです。鬼ごっこ。

CSS には、次のような継承できないスタイルがいくつかあります。

border:1px solid red;

ログイン後にコピー

個別性

同じタグで異なる CSS スタイルが設定され、ブラウザはタグの重みに基づいてどの CSS スタイルを使用するかを決定します。

ラベルの重みは 1、クラスセレクターの重みは 10、ID セレクターの重みは最大 100 です。

相続にも価値があり最低です。

p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/

ログイン後にコピー

Cascading

意味: HTML ファイル内の同じ要素に対して複数の CSS スタイルが存在する可能性があり、同じ重みを持つスタイルが存在する場合、それらの CSS スタイルの順序に基づいて処理が決定されます。最後のスタイルが適用されます。

スタイルの優先順位: インラインスタイルシート (タグ内) > 埋め込みスタイルシート (現在のファイル内) > 外部スタイルシート (外部ファイル内)。

重要性

特殊な場合、特定のスタイルを最高の重みに昇格させるには、次のコードを使用して解決する必要があります:

p{color:red!important;}

ログイン後にコピー

! important はセミコロンの前に記述する必要があります

スタイルの優先順位:

ブラウザのデフォルトスタイル

テキストレイアウト - フォント、フォントサイズ、色

ユニバーサルフォント: Microsoft Yahei

body{font-family:"Microsoft Yahei";} /*兼容性更好*/body{font-family:"微软雅黑";}

ログイン後にコピー

フォントサイズと色:

body{font-size:12px;color:#666}

ログイン後にコピー

テキストレイアウト - 太字、斜体、下線

粗体：span{font-weight:bold;}斜体：a{font-style:italic;}下划线：span{text-decoration:underline;}text-decoration指的是：文本的装饰，属性值有none默认不显示下划线.none： 指定文字无装饰underline： 指定文字的装饰是下划线overline： 指定文字的装饰是上划线line-through： 指定文字的装饰是贯穿线blink： 指定文字的装饰是闪烁。

ログイン後にコピー

テキストレイアウト - 取り消し線、インデント、行間隔 (行の高さ)

删除线：.oldPrice{text-decoration:line-through;}为文字加删除线缩进：p{text-indent:2em;} 2em的意思就是文字的2倍大小。行间距：p{line-height:1.5em;} 设置段落行间距1.5倍

ログイン後にコピー

段落レイアウト - 中国語のテキスト間隔、文字間隔、配置

漢字、文字間隔:

p{letter-spacing:50px;}（中文字和字母间距）p{word-spacing:50px;}（字母和字母间距）对齐：p{text-align:center;} 居中p{text-align:left;} 居左p{text-align:right;} 居右

ログイン後にコピー