6.DIV+CSS組版スキル_html/css_WEB-ITnose

1.CSSボックス（CSSボックス） CSSにはbox属性はありません。 CSS ボックスは、コンテンツ、パディング、ボーダー、マージンの部分で構成されます。ボックスの内容はもちろん必須ですが、パディング、ボーダー、ボーダー

1.CSSボックス(CSSボックス)

CSSにはbox属性はありません。 CSS ボックスは、コンテンツ、パディング、ボーダー、マージンの部分で構成されます。ボックスの内容はもちろん必須ですが、パディング、ボーダー、ボーダーはすべてオプションです。 CSS ボックスを現実の箱と見なす場合、中身は箱の中の商品であり、詰め物は商品の損傷を避けるために追加された発泡体またはその他の耐震性のあるものです。境界線については、ボックスの配置を記述します。配置する場合、他のオブジェクトの近くに配置することはできませんが、隙間がなければなりません。もちろん、CSS のボックスはフラットです。

CSS border (border):

border には主に次のパラメータがあります: none: 境界線なし; 点線: 点線; double: 二重線の境界線。 ; グルーブ: 3D グルーブ; リッジ: ダイヤモンドボーダー; インセット: 3D 凸状エッジ。

境界線の値は 4 つになります。4 つのパラメーター値がすべて指定されている場合、4 つの境界線は右上、下、左の順序で適用されます。
1つだけ指定した場合は、4つのエッジすべてに使用されます。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3 つある場合、1 つ目は上、2 つ目は左右、3 つ目は下になります。
ボーダーとマージンは主に位置決めに使用され、上、下、左、右の 4 つの値で定義されます。

2. リンク (a) には、a:link、a:visited、a:hover、a:active の 4 つの属性があります。順序を逆にすることはできません。

CSS リンクには、a:link、a:visited、a:visited、 a:hover と a:active はそれぞれ、未訪問のリンク、訪問済みのリンク、マウスオーバー リンク、およびアクティブ化されたマウス リンク (マウスの左ボタンが押されたとき) に対応します。これらのスタイルの順序を逆にすることはできません。逆にすると、一部のスタイルが正しく表示されない可能性があります。各スタイルでフォントの属性、下線、背景などを変更できます。

3. WebページにCSSを追加する方法：内部スタイルシート、インラインスタイルシート（埋め込みスタイルシート）、外部スタイルシートの3種類に分かれる

大きく分けて内部スタイルシート、インラインスタイルシートの3種類(インライン スタイル シート、埋め込みスタイル シート)、外部スタイル シート。内部スタイル シートは主に で定義されます。外部スタイル シートを使用する場合、インライン スタイル シートはタグ内で直接定義でき、CSS ファイルと Web ページ ファイル (html) は分離されます。

4. テキストのフォント、色、サイズを設定する方法?? フォントを使用すると、フォント属性を一行で記述することができます (カラー属性は別途記述する必要があります)

フォントスタイルセットイタリック体 (font-style: italic など)

font-weight はテキストの太さを設定します (font-weight: 太字など)。

font-size はテキスト サイズを設定します (font-size: 12px など)。さまざまな単位表示の問題については CSS マニュアルを参照してください)
line-height の設定 行間隔 (line-height: 150% など)
color はテキストの色 (font-color ではありません) を設定します (color: red など)。 font-family などのフォント: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Nursing、sans-serif (これは一般的な書き方です)
上記はすべて 1 行で記述できます。フォント属性 (カラー属性は除く。これは別途記述する必要があります):
フォント: イタリック太字 12px/150% "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Diagnostic、サンセリフ;

5. 方法段落のレイアウトを制御するには、マージン、text-align を使用します

中国語の段落では、左右の

タグを使用します (インデントに相当)。段落の前後の任意のスペースにマージンを使用できます。例: p{

margin: 18px 6px 6px 18px; /*それぞれ、12 時から時計回りに上、右、下、左です*/

}

テキストの配置には text-align を使用します。 p{
text-align: center; /*center 配置*/
}
配置方法には、left、right、justify (両端揃え) があります
PS. マージンについて言えば、私は CSS を書くときにすべてのマージンを設定することに慣れています。タグ定義 margin: 0; デフォルトのマージン値によってページ レイアウトの問題が発生することがありますが、その理由がわかりません (ul/ol/p/dt/dd などのタグに特に注意してください)

6.縦書きテキスト? ?writing-mode を使用します


writing-mode 属性には lr-tb と tb-rl の 2 つの値があり、前者はデフォルトの left-right、top-bottom、後者は top-bottom、right です。 -左。
例:

p{

writing-mode: tb-rl;

}

方向写植と組み合わせることができます。

7. 箇条書きの問題 ?? リスト形式を使用してください

CSS では、箇条書きには円盤 (黒丸)、四角形 (黒の四角形)、小文字 (アラビア数字) が含まれます。数字）、upper-roman（大文字のローマ数字）、 lower-alpha（小文字の英字）、upper-alpha（大文字の英字）、none（なし）。たとえば、次のようにリストの箇条書き (ul または ol) を正方形に設定します。
li{
list-style: square;
}
さらに、list-style には次のような値もあります。いくつかの小さな画像を箇条書きで表示します。リスト形式の直下に URL (「画像アドレス」) を書き込むだけです。項目リストの margin-left が 0 に設定されている場合、list-style-position:Outside (デフォルトは外側) の箇条書きは表示されないことに注意してください。残念ながら上記の箇条書きはサイズの設定ができないようで、点や四角は常に同じになってしまいます。また、縦方向の位置合わせは設定できません。

8. ドロップ キャップ ?? 使用: first-letter

疑似オブジェクト: first-letter を font-size と float と組み合わせると、ドロップ キャップ効果を作成できます。
例:
p:first-letter{
padding: 6px;
float: left;
}
9. text-indent

text-indent を使用します。コンテナ内の最初の行を特定の単位でインデントします。たとえば、中国語の段落には通常、各段落の前に 2 つの漢字があります。次のように書くことができます:

p{

text-indent: 2em; /*em は相対単位であり、2em は現在の単語のサイズの 2 倍です*/
}
font-size が 12px の場合、text-インデント: 2em インデント 24px。

10. 漢字のふりがな表記について ?? ルビタグとruby-align属性を使用します

例えば、rt style="font-size: 11px;">zhu yin< /rt> では、ruby-align を使用して位置合わせを設定できます。詳細については、CSS マニュアルの Ruby-align 項目を参照してください。

11. 固定幅の中国語文字の切り捨て?? text-overflow を使用します

バックグラウンド言語を使用して、データベース内のフィールドの内容を切り捨てます (たとえば、12 個の中国語文字を切り捨てます)。ただし、HTMLタグなどをフィルタリングする必要がある場合がありますが、CSSを使用して制御するとこの問題は発生しません。たとえば、次のスタイルをリストに適用します。

li{

overflow:hidden;
text-overflow:ellipsis;
}
ただし、複数のテキストではなく 1 行のテキストの切り詰めのみを処理できます。線。

12. 固定幅の漢字 (単語) 改行 ?? word-break を使用します

たとえば、固定幅のコンテナに多数の地名を表示したい場合は、次のようにします。地名が途中で区切られるのを避けるためです (つまり、1 つの単語が先頭にあり、もう 1 つの単語が次の行に分割されます)。その後、ワードブレークを使用できます。例:

南京 上海 上海 上海 上海 南京 上海 上海 南京 上海 上海 南京 上海上海南京 上海南京 上海南京 上海南京 上海南京 上海南京 上海南京 上海南京 上海

内部の空間は置き換えることができないことに注意してください (少なくともソフト空間が存在する必要があります)。

13. 背景属性を設定します?? (background) を使用します。

背景属性には、背景色を設定する background-image など、多くのサブ属性が含まれています。背景画像の繰り返し設定。background-repeat:no-repeatは繰り返しなし、background-repeat:repeat-xは水平方向のみの繰り返し、background-repeat:repeat-yは垂直方向のみの繰り返しを意味します。 -position は背景画像の表示位置を設定します。background-attachment は固定です。画像はどこかに表示されます。

上記の画像属性は、次のように一緒に記述することができます:background:url (絶対パスまたは相対パス);background-repeat: no-repeat;background-position: x y 座標またはパーセント; CSS の使用属性 個人的には、DIV+CSS は、Web ページを作成し、美しくするための重要な補助手段として、非常に優れており、便利であると考えています。テーブルフレームやテーブルの作成における多くの欠点やアートの欠点を補うことはできますが、それを独占的に使用するには時間と労力がかかりすぎるため、全国の中小規模のWebサイト所有者にはまったく適していません。 。個人的には、table+DIV+CSS を使用するのが最良の組み合わせであり、最も時間と労力を節約できる方法だと考えています。テーブルを使用して Web サイトを作成するだけの場合でも、それに CSS スタイルを追加すると、確かに非常に便利になります。ただし、ポータルやその他の大規模な Web サイトの場合は、CSS ファイルを変更するだけですべての修正が完了する DIV+CSS が絶対的な利点となります。 DIV+CSS は、ポータルサイトの服を変えるのと同じくらい簡単で、サイトの HTML ページ全体を変更する必要はなく、CSS を書き換えて、以前の CSS を上書きするだけです。新しい CSS を使用してリビジョンを実現します。