バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 2: CSS_html/css_WEB-ITnose の 5 つのソース

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

HTML 要素にスタイルを設定しない場合、ブラウザに表示される内容 (例: a4b561c25d9afb9ac8dc4d70affff419 要素は太字で表示され、e388a4556c0f65e1904146cc1a846bee 要素は縦棒で表示されます) margin 要素と 4a249f0d628e2318394fd9b75b4636b1 要素のフォント サイズは e388a4556c0f65e1904146cc1a846bee 要素のフォント サイズの 2 倍になっています。これはなぜですか?

ブラウザにはデフォルトのスタイルが付属しているため、html要素にスタイルが設定されていない場合、ブラウザはデフォルトのスタイルに従って表示します。ただし、ブラウザのデフォルト スタイルは最下位レベルです。スタイルが別の場所に設定されると、ブラウザのデフォルト スタイルは上書きされます。

ブラウザごとにデフォルトのスタイルが異なる場合があることに注意してください。たとえば、CSS を記述するときは、最初に * {margin:0; padding:0;} を設定します。これはなぜでしょうか。ブラウザの互換性の問題が原因です。単純に、すべて 0 に設定すると、すべてのブラウザが統一されます。

以下に、デフォルト スタイルのコードを掲載します。

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/

li { display: list-item }/*默认以列表显示*/

head { display: none }/*默认不显示*/

table { display: table }/*默认为表格显示*/

tr { display: table-row }/*默认为表格行显示*/

thead { display: table-header-group }/*默认为表格头部分组显示*/

tbody { display: table-row-group }/*默认为表格行分组显示*/

tfoot { display: table-footer-group }/*默认为表格底部分组显示*/

col { display: table-column }/*默认为表格列显示*/

colgroup { display: table-column-group }/*默认为表格列分组显示*/

td, th { display: table-cell; }/*默认为单元格显示*/

caption { display: table-caption }/*默认为表格标题显示*/

th { font-weight: bolder; text-align: center }/*默认为表格标题显示，呈现加粗居中状态*/

caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/

body { margin: 8px; line-height: 1.12 }

h1 { font-size: 2em; margin: .67em 0 }

h2 { font-size: 1.5em; margin: .75em 0 }

ええ、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE、RREE

h3 { font-size: 1.17em; margin: .83em 0 }

h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }

h5 { font-size: .83em; margin: 1.5em 0 }

h6 { font-size: .75em; margin: 1.67em 0 }

h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }

blockquote { margin-left: 40px; margin-right: 40px }

i, cite, em,var, address { font-style: italic }

pre, tt, code, kbd, samp { font-family: monospace }

pre { white-space: pre }

button, textarea, input, object, select { display:inline-block; }

big { font-size: 1.17em }

small, sub, sup { font-size: .83em }

sub { vertical-align: sub }/*定义sub元素默认为下标显示*/

sup { vertical-align: super }/*定义sub元素默认为上标显示*/

table { border-spacing: 2px; }

thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/

td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/

s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/

hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/

ol, ul, dir, menu, dd { margin-left: 40px }

ol { list-style-type: decimal }

(1)、表示: ブロック

ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }

なぜデフォルトで p、h1、ul、div がここで定義するブロック表示です。では、div は本質的にブロックであると言うのはやめてください?? この文は、次のように置き換えるべきです。ブラウザのデフォルトのスタイルでは、div はブロックであると規定されています。ブロック要素であるかインライン要素であるかは、ブラウザのカーネルではなく、デフォルトのスタイルによって決まります。

ブロックに設定されていない要素は、デフォルトでインライン要素になります。

(2)、display: list-item

u, ins { text-decoration: underline }

display を使用する場合、一般的に使用される値は通常: inline/block/inline-block であり、list-item は使用されません。では、ここでの list-item は具体的に何をするのでしょうか?自分で試してみるのもいいかもしれません:

margin-left を追加すると、ul-li の効果が現れるのがわかりましたか?

では、なぜ ul-li はデフォルトでそのように表示されるのでしょうか? ??List-item が「犯人」です。

(3), dipplay:table

br:before { content: "A" }/*定义换行元素的伪对象内容样式*/

例をあげてください:

上の図では、最初の div はデフォルトでブロックになっており、その幅はページ全体を占めています。 2 番目の div には display:table が設定されており、その幅はコンテンツによって異なります。これが「カプセル化」です。

(4)、display: table-cell

:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/

例:

初めて HTML を学んだとき、複数列のレイアウトに div + css を使用する方法がわからなかったのを覚えています。複数列レイアウトに使用されるテーブル。これで、table-cell を使用して table のような複数列のレイアウトを作成できるようになり、その効果は table の場合とまったく同じになります。

(5)、display:inline-block

center { text-align: center }

親コンテナを中心に配置でき、高さ、幅、マージンを設定でき、table や div のように直線を占有しない...? ?これは inline-block です。 (詳細については、このスタイル要素の設定のパフォーマンスを参照してください。)

1. インライン スタイル

ea2b56d2df471085b3c7c1f619380241 で記述されたスタイル コード。

2. 内部スタイル

c9ccee2e6ea535a969eb3f532ad9fe89 で記述されたスタイル コード。

3. 参照スタイル

2cdf5bf648cf2f33323966d7f58a7f3f参照される CSS ファイル。

4. ブラウザのユーザー定義スタイル

一部のニュース Web サイトでは、フォント サイズを設定できるショートカット メニューがよく見られます。たとえば、以下の図は捜狐ニュースの設定を示しています。

これらは視覚障害のある人向けです。私も視覚障害を持っていますが、近視メガネを通して解決しています。

実はブラウザにもそのような設定があり、例えばChromeブラウザではフォントサイズやフォントを設定することができます。

ユーザーがここでフォントとフォント サイズを設定すると、ブラウザのデフォルト スタイルがオーバーライドされます。

この記事は「CSS についてどれだけ知っていますか」からの抜粋です