CSSに関するフロントエンド text_html/css_WEB-ITnose

テキストは、Web ページ上のコンテンツの最も重要な形式であり、ブロックレベルの要素またはインライン要素に記述することができます。テキストは文字

で構成されます。通常、各文字には em ボックスがあり、このように font-size で設定されたサイズが各文字の em ボックスになります。

を形成するために連結されたものが、これらのテキストのコンテンツ領域です。行間がない場合、つまりline-heightが1の場合、上下の行の内容領域が密につながっています。このとき、font-sizeの大きさはベースライン間の距離になります

。 line-height を設定すると、line-height から font-size を引いた値が 2 つに分割され、コンテンツエリアの上端と下端に均等に配置され、インラインボックスが得られます。このとき、次の 2 つの特性があります。 1. line-height から font-size を引いた値が行間隔に等しい。 2. line-height の値はベースライン間の距離です。もちろん、この

は line-height が font-size よりも大きいことを前提としています。設定された line-height が font-size よりも小さい場合、負の行間隔が発生し、行間に重なりが生じ、重なりの高さは行間の絶対値になります。 。


テキスト関連のスタイルを設定します:
1.font-size フォント サイズを設定します 構文|

2.font-family フォントの種類を設定します 構文[]# 、とき複数のタイプを設定します。後者は前の代替案です。

3.font-weight フォントを太字に設定します。 構文 bulld|normal|100|200|...

4.font-style フォントを太字に設定します。 tilted 構文 Normal|italic

5.line-height 行の高さを設定する 構文 Normal|||
行の高さについて注意すべき点は、行の高さを継承するときにパーセンテージが設定されることです。これは数値の継承とは異なります。つまり、継承された行の高さは数値に基づいて計算されます。パーセンテージは継承後の計算値です。たとえば、親要素の line-height が 50%、font-size が 20px の場合、子要素は 50% ではなく 20*50&=10px を継承します。

フォント値の省略構文: [||]?[/?]、少なくともサイズとタイプが必要です


6.text-shadow テキストシャドウを設定します 構文 none|[{2,3}&&?] 最初の値は X 軸のオフセットを表し、2 番目の値は X 軸のオフセットを表しますは y 軸のオフセットで、3 番目のオプションの値

は影のぼかし半径

です。

7.text-decoration テキストの下線を設定します。 構文 none|[underline||overline||line-through] は、下線と上線を意味します。ラインとチューブ

8.text-overflow テキスト オーバーフロー処理を設定します 構文 Clip|ellipsis 省略記号がオーバーフローを示す場合は、... 省略記号を追加します

ここで、text-overflow は通常単独で使用されず、必ず使用する必要があることに注意してください。 h2 {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} など、オーバーフローと空白を組み合わせて使用​​します

テキスト行のスタイルの設定について:

1.text-align Thisは水平方向の配置を設定します。はい、すべての行に設定します。このスタイルはブロック レベルの要素にのみ適用できます。構文 left|right|center|justify

2.vertical-align これは、インライン要素にのみ適用でき、継承することはできません。親要素。テキストの垂直位置。

構文baseline|sub|supper|top|...

3.text-indentは最初の行のインデントを設定し、ブロックレベルの要素にのみ適用できます。構文 | 負のインデントでは、テキストがオーバーフローするのではなく非表示になります。

4.white-space は、テキスト内の改行とスペースの処理を設定します。構文 nowrap|pre|pre-wrap|pre-line
nowrap は、改行とスペースを保持することを意味します。行の折り返し
pre-wrap はテキスト内の改行とスペースを保持することを意味しますが、
pre-line は改行のみを保持します