CSS_html/css_WEB-ITnose のドキュメント構造を再確認します。-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose のドキュメント構造を再確認します。

WBOY

リリース： 2016-06-24 11:26:27

オリジナル

1083 人が閲覧しました

出典: 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 に設定されている場合、ブラウザはその要素を完全に無視し、その要素は表示されず、その位置も占めません。