ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose のドキュメント構造を再確認します。
CSS_html/css_WEB-ITnose のドキュメント構造を再確認します。
- WBOYオリジナル
- 2016-06-24 11:26:271102ブラウズ
出典: http://limits.cnblogs.com
基本的な HTML ページをいくつか見てみましょう
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>文档结构</title> 6 </head> 7 8 <body> 9 <h1>CSS规则</h1>10 <p>样式表由一些<strong>样式规则</strong>组成。</p>11 <ul>12 <li>选择器13 14 <ul>15 <li>类选择器</li>16 <li>ID选择器</li>17 <li><em>包含</em>选择器</li>18 </ul>19 <li>属性</li>20 <li>值</li>21 </li>22 </ul>23 </body>24 </html>
は次のように表示されます:
ドキュメントの構造は次のとおりです以下:
特徴:
異なるルールの重みを指定します。同じ要素に複数のルールを使用できる場合、重みの高いスタイルが優先されます。
h1 {color:red;}/*特殊性=1*/p em{color:blue;}/*特殊性=2*/.divclass{color:yellow;}/*特殊性=10*/p.note em.dark{color:gray;}/*特殊性=22*/#id{color:black;}/*特殊性=100*/
! important を使用して、次のような重要なルールを識別します。 p{color:red ! important;} で宣言されているため、この時点では color:red が最も重み付けされます。この方法は、訪問者のローカル スタイルの定義 (つまり、P タグ内の定義) の方が高くなるため、! important は注意して使用する必要があります。
要素の分類:
- ブロックレベルの要素 (display:block): 各ブロックレベルの要素は新しい行で始まり、後続のタイトル、段落、表、レイヤー、本文の要素も新しい行で始まる必要があります。など。これらはすべてブロックレベルの要素です。
- インライン要素 (display:inline): インライン要素は新しい行に表示する必要はなく、後続の要素は強制的に折り返されません。たとえば、a、em、などです。 spain などはすべてインライン要素です。インライン要素は他の要素の子要素にすることができます。デフォルトでは li 要素のみがこのタイプであり、この要素の式は次のようになります。リストと同じです。
- 非表示要素 (display:none) : 要素が display:none に設定されている場合、ブラウザはその要素を完全に無視し、その要素は表示されず、その位置も占めません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。