【フロントエンド】-014-ページ作成-CSS-テキストスタイル

フォントスタイル

フォントサイズ:font-size: 2em

フォント型番:font-famliy: [ | ] #

フォント太さ:font-weight: normal | bold | 100 | 200 | 300 | ……900

傾斜:font-style: normal | italic | oblique

italic:フォント自体の斜体フォント;

oblique:強制傾斜文字;

行高さ:line-height: normal | | |

normal:ブラウザによって決定され、通常は1.1~1.2

である.

line-heightが数値で、サブエレメントが継承されると、改行の高さはサブエレメントのサイズ*line-heightになります.

は、line-heightを表す他の方法で、子要素の行の高さは親要素が計算した固定行の高さであり、変更されません.

コンビネーションパッケージ(共通値)font: style | weight | size/line-height | familyIf these conditions are not met, the property is invalid and is entirely ignored.

では、font-style、font-weight、line-heightがオプションであり、font-size、font-familyが必須です.

例えば:font: 30px/2em "Consolas", monospaceはフォントサイズ30 pxを設定、行の高さ2はフォントサイズで、優先フォントは「Consolas」代替monospace

である.

フォントカラー:color: #ff00ff|color:rgba(0, 0, 0, 0~1)

配置

text-align: left | right | center | justify

vertical-align [src] : baseline | sub | super | top | text-top | middle | bottom | text-bottom | |

inline-level and table-cell elements. It also applies to::first-letter and::first-line . Percentages refer to the line-height of the element itself

text-indent [src] : |

Applies block containers Percentages refer to the width of the containing block
ここでtext-indentを負の極大値に設定すると、中の文字が容器から飛び出し、文字を隠す役割を果たします.
フォーマット処理

テキストの改行やスペースを保持するかどうかなどのフォーマットを設定し、white-space: normal | nowrap | pre | pre-wrap | pre-line

.

normal:改行とスペースを結合し、自動改行をサポートします.

nowrap:改行とスペースをマージし、自動改行はサポートされません.

pre:元のテキストスタイルは完全に保持されますが、自動改行はサポートされていません.

pre-wrap:元のテキストスタイルを完全に保持し、自動改行をサポートします.

pre-line:原文の改行のみを保持し、スペースが結合し、自動改行

をサポートする

は、テキストの自動改行をサポートするためにページに設定され、word-wrap: normal | break-word

.

normal、自動改行はサポートされていません.

break-word:自動改行

をサポート

英語で改行自動分割単語をサポートするように設定し、word-break: normal | keep-all | break-all

keep-all≒normal:単語の分割がサポートされていないことを示す.

break-all:任意の2つのアルファベット分割をサポートすることを示す

テキスト修飾

テキストのシャドウ効果を設定する:text-shadow: none | [ {2,3} && ? ]#

none:シャドウ効果がないことを示します.

text-shadow: 10px 20px 30px #ff00ffは、テキストがx軸に10 pxずれることを示し、y軸に20 pxずれることを示し、30 pxはシャドウのぼかし半径を示し、最後はシャドウの色であり、3番目の数値(30 px)と色は書かなくてもよい(デフォルトの文字色を用いる)

である.

テキストに下線の上線と貫通線を設定するスタイル:text-decoration: none | [ underline || overline || line-through ]

その他の設定

長すぎるテキストのサムネイル表示「...」を設定効果

text-overflow: clip | ellipsis、clipがデフォルト値、ellipsis設定遮断

overflow: hidden;、オーバーフロー時に

をカット

white-space: nowrap;、強制的に改行しない

マウスのポインタスタイルを設定する:cursor: [, ]* [auto | default | none | help | pointer | zoom-in | zoom-out | move]

は強制的に継承され、あるサブ要素は親要素の属性値として設定することができ、color: inherit