CSS の基本を取り戻しますか? opensing_html/css_WEB-ITnose

Origin

私はソフトウェア業界に5年以上従事しており、いくつかのWebベースのプロジェクトに参加しているため、基本的にJavaScriptとHTMLに精通しています。最近はWebフロントにもっと注目しています。開発を終了しました。分析した結果、CSS が私の弱点であることがわかり、さらに強化することにしました。まずはこの本「The Definitive Guide to CSS」を読み始めてください。ここと今後の記事はこの本の学習に基づいています。

以下は第 1 章です:「CSS とドキュメント」学習ノート

置換された要素と置換されていない要素の概念的な区別

CSS は主に要素に対して機能しますが、すべての要素が同じ方法で作成されるわけではありません。たとえば、画像と段落は同じ種類の要素ではなく、span と div も同じではありません。一般に、要素には置換と非置換の 2 種類があります。

置換要素:

文書コンテンツ自体によってマークされていない要素のコンテンツを置換するために使用される部分を指します。たとえば、img 要素には特定のコンテンツはありません。その特定のコンテンツは、src 属性で指定された画像によって埋められます。別の例: 73a3ca28445b1c625f2086a50cb8c7df これはテキスト入力ボックスです。別の属性 (ボタン) を変更すると、ブラウザの表示が異なります。 HTML の (X)a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3、221f08282418e2996498697df914ce4e、273238ce9338fbb04bee6997e5552b95 はすべて置換要素であり、これらの要素には実際のコンテンツはありません。

非置換要素:

ほとんどの (X)HTML 要素は非置換要素であり、そのコンテンツはブラウザによって要素自体によって生成されたボックスに表示されます。たとえば、45a2772a6b6107b401db3c9b82c049c2cssbase54bdf357c58b8a65c66d7c19c8e4d114は置換不可能な要素です。

ブロック要素とインライン要素 ブロック要素:

ブロック要素は、デフォルトで (CSS 介入なし) 要素ボックスを生成し、その親要素のコンテンツ領域を埋め、その隣に他の要素を置くことはできません。より馴染みのあるものは p と div です。ブロック要素 div をボックスとして考えることができます。または、クリッピングを使った経験がある場合は、理解しやすいでしょう。まず、さまざまな新聞や雑誌から必要な記事を切り出します。カットされたコンテンツのそれぞれがブロックです。次に、レイアウトの意図に従って、これらのブロックを新しい白紙の紙に貼り付けました。これにより、独自の要約が作成されます。

インライン要素:

インライン要素は、テキスト行を中断することなく、テキスト行内に要素のボックスを作成します。最良の例は、XHTML の a 要素です。これらの要素は、それ自体の前後に「セパレータ」を生成しないため、表示を中断することなく別の要素のコンテンツ内に表示できます。

もちろん、実際の使用では、css 属性はその機能、つまり表示に使用されることがよくあります。この属性は使用するためのもので、後で学習します。

リンクについて

一般に、HTML ページが独立したファイルの CSS スタイルを参照したい場合は、次のようなリンク タグが使用されます:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all”>

使用中に注意すべき点がいくつかあります:

リンクは次のとおりです。 head 要素ではなく、head 要素に配置されます。その他の内部要素 (title など)。 CSS ファイルには、XHTML またはその他のマークアップ言語を含めることはできません。 外部参照される CSS ファイルには必ずしも拡張子を付ける必要はありませんが、古いバージョンのブラウザのサポートに基づいて、.css 末尾を指定することをお勧めします。

さらに、使用中に、リンクタグ属性: title (選択したスタイルシートで使用される) に遭遇することはほとんどありません。例:

<link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”default”><link rel=”stylesheet” type=”text/css” href=”sheet1.css” title=”big-text”>

多くのブラウザは、タイトルを追加することで、ユーザーがブラウザに基づいてスタイルを切り替えることができます。もちろん、IE はまだこの機能をサポートしていません。