CSSエッセイ2_html/css_WEB-ITnose

人生は川のように、果てしなく流れます。

境界線について話しましょう

境界線は通常非常に細いため、見えないため、少しズームインする必要があります。見てください。エッセイ 1 で述べたことを復習しましょう

#dv {    width: 100px;    height: 100px;    border-top: 20px solid green;    border-right: 20px solid blue;    border-bottom: 20px solid orange;    border-left: 20px solid tan;}

div の幅と高さを設定し、次に 4 つの境界線を異なる色に設定し、境界線の幅を 10px に設定すると、効果は次のようになります。以下：

1458571840365.png-2.1kB

境界線と境界線の交点が対角線であることがはっきりとわかります。つまり、境界線は斜線ではありません。長方形。

もう 1 つ注意すべき点は、境界線の幅が div の幅を占有しないことです。div の幅が 100px で、境界線の幅が 2px の場合、div の幅の合計は、div の幅を占めません。 div の内部幅 + 2 行の境界線の幅、104 ピクセルです。私たちの考えを検証するために、PS を使用して長さを測定し、これが当てはまるかどうかを確認しました。

1458572432136.png-18.9kB

1458572377818.png-20.6kB

上の図に示すように、境界線の幅 div の幅を占めません。これは日常の練習で注意する必要があります。

補足の背景スタイル

エッセイ 1 で記録したスタイルに加えて、背景もさらに重要なスタイルがいくつかあります:

1. 背景画像の位置は固定されています。これはスクリーンショットを撮るのが簡単ではありません。

   background-attachment:fixed;

   この属性を設定してから、background-position をパーセンテージに設定すると、背景画像はブラウザを基準にして配置されます。その理由はわかりませんが、お願いします。アドバイスをください

2. 背景の合成スタイル、背景合成スタイルには次の値を入力できます

样式	说明
color red	颜色
url()	背景图片
x-repeat	背景图片平铺方式
position 20px 20px	背景图片位置

フォント スタイルの設定

基本的なフォント スタイル

フォント スタイルに関連する部分を見てみましょう。まず空の div を配置し、この div にテキストを書き込みます。

 <div id="box">        据法广新闻网16日报道，起初，比利时和法国警方只是在布鲁塞尔南区的福尔斯特（Forst）一栋房屋内检查证件，屋内人员在警方搜查时开了枪， 打伤3名警察。随后，比利时与法国警方联合与屋内人员展开枪战，枪战中1名警察受伤，1名嫌疑人被打死，但死者并非被通缉的巴黎恐袭主嫌犯。</div>

表示効果は次のとおりです。

1458622470299.png-8kB

より重要なフォント スタイルは次のとおりです: font-size (テキスト サイズの変更)、font-family (フォントの変更) ) と font-style (斜体などのフォント スタイルを変更する) と font-weight (フォントの太さ) を 18 ピクセルの Song 斜体のテキストを表示したい場合は、次のスタイルを div に追加する必要があります:

font-size:18px;font-family: "宋体";font-style:italic;

1458622841975.png- 14.4kB

テキストのインデント

中国語の習慣に従って、最初の段落の最初の行は 2 文字分インデントされます。 CSS の text-indent は、上記のフォントサイズが 18px なので、2 文字のインデントは text-indent:36px; になるはずですが、このとき問題があります。文字のサイズを変更するたびに、テキストのインデントのサイズも変更する必要があります。簡単な方法はありますか？答えは「はい」です。つまり、em ユニットを使用すれば、これを行うことができます。

text-indent:2em;

この場合、最初の行のインデントは常に 2 つのフォントが占めるピクセル サイズになります。

テキスト内のさまざまなスペース

まず、2 つの概念について明確にする必要があります。文字間隔、単語間隔とは何ですか? HTML と CSS は外国人によって発明されたものであるため、単語間隔は実際には文字間の間隔を指し、CSS では単語間隔で設定されます。単語間隔は単語間の間隔であり、CSS では文字間隔で表されます。では、中国語で何かが起こったらどうなるでしょうか？漢字間隔とは、2 つの漢字の間隔を指します。では、漢字間の単語をどのように分割するのでしょうか?英語が単語を区別する方法を考えてみましょう。漢字の間にスペースがある場合、単語の間隔は 2 つの漢字の単語間の距離です。実際に使ってみましょう。上記のスタイルで、引き続き次のスタイルを設定します。

letter-spacing: 25px;word-spacing: 20px;

上にテキストのインデントも設定します。効果を見てみましょう

1458707551438.png-6.5kB

上の図からわかるように、テキストは 2 つのフォント サイズでインデントされ、文字間の間隔は 20px ですが、単語の間隔は見られません。 "FRA" と "News" の間にスペースを入れて効果を確認してください

1458707682124.png-5.8kB

今回はまずここで終わります。 . 続きはまた今度時間があるときに書きますo(^▽^)o