基礎から熟練まで：CSS実践講座（2）

セブン。テキストのスタイルの制御

テキストのスタイルの制御には、テキストの大文字と小文字の変更の 2 つの部分が含まれます。

1.テキストケース

テキストケースを使用すると、Web デザイナーはテキストを入力するときにテキストの大文字と小文字を完全にする必要がなく、入力後に必要に応じて部分的なテキストの大文字と小文字を設定できます。

基本的な形式は次のとおりです:

text-transform: パラメータ

パラメータ値の範囲:

·uppercase: すべてのテキストが大文字で表示されます

· lowercase: すべてのテキストが小文字で表示されます

·capitalize:各単語の最初の文字は大文字で表示されます

・none: 親のテキスト変換パラメータを継承しません

注: 継承とは、独自の識別子を含むパラメータに対して HTML 識別子が継承されることを意味します。

2.テキストの変更

テキストの変更の主な目的は、ブラウザーがテキスト リンクを表示するときに下線を変更することです。

基本的な形式は以下の通りです:

text-decoration:パラメータ

パラメータ値の範囲:

・underline:文字に下線

・overline:文字に下線

・line-through:文字に下線

取り消し線

・blink: テキストを点滅させます

・none: 上記の効果を表示しません

8.テキストのスタイルを制御する

テキストを制御するスタイルには、単語の距離、文字の距離、テキストの行間隔、テキストの水平方向の配置、テキストの垂直方向の配置、テキストのインデントの 6 つの部分が含まれます。

1.単語間隔

単語間隔とは、漢字を除く英語の各単語間の距離を指します。

基本的な形式は次のとおりです:

word-spacing: 間隔距離

間隔距離の値: ポイント、em、ピクセル、in、cm、mm、pc、ex、normal など。

2.文字間隔

文字間隔とは、英語の文字間の距離を指し、機能、使用法、パラメータ設定は単語の間隔と非常に似ています。

基本的な形式は次のとおりです:

letter-spacing: 文字間隔

3.先頭の間隔

先頭の間隔は、上部ベースラインと下部ベースラインの間の垂直距離を指します。一般的に、英語の 5 行練習帳では、上から下に 3 番目の水平線が、コンピューターによってその行のベースラインと見なされます。

基本的な形式は以下の通りです:

line-height: 行間の距離

行間の距離の値:

・単位なしの数値: 1を基本とし、比例関係の100%に相当します

・付き長さの単位 数字: 特定の単位に従う

・比例関係

注: テキストのフォントが大きく、行間が比較的狭い場合、テキストの上下の行が重なる場合があります。

4．テキストの水平方向の配置

テキストの水平方向の配置は、テキストの水平方向の配置を制御できます。これには、テキスト コンテンツだけでなく、写真やビデオ素材の配置の設定も含まれます。

基本的な形式は次のとおりです:

text-align:パラメータ

パラメータの値:

・left:左揃え

・right:右揃え

・center:中央揃え

・justify:相対左揃えただし、text-alight はブロックレベルの属性であり、< p>、< blockquqte>、< h1>< でのみ使用できることに注意してください。 ; h6>。

5.テキストの垂直方向の配置

テキストの垂直方向の配置は、Web ページ上のテキストの垂直方向の配置ではなく、テキストの親の位置を基準にする必要があります。たとえば、表のセルにテキストのセクションがある場合、このテキストの垂直方向の中央揃えの設定はセルに対して測定されます。つまり、テキストはセルの中心ではなく、セルの中心に表示されます。 Web ページ全体。

基本的な形式は次のとおりです:

vertical-align:パラメータ

パラメータ値:

・top:上揃え

・bottom:下揃え

・text-top:相対テキストの上揃え

・text -bottom : テキストを基準に下揃え

・baseline: ベースライン揃え

・middle: 中央揃え

・sub: 下付き文字で表示

・super: 上付き文字で表示

6．テキストのインデント

テキストのインデントを使用すると、デフォルト値よりも狭い領域にテキストを表示できます。主に、中国語スタイルの最初の行をインデントしたり、引用されたテキストやメモの大きな段落のインデント形式を作成したりするために使用されます。

基本的な形式は次のとおりです:

text-indent: インデント距離

インデント距離値:

・長さの単位を持つ数値

・比例関係

ただし、比例関係を使用すると、人によってはブラウザのデフォルトの比率は段落の幅に比例すると考える人もいるかもしれませんが、実際にはそうではありません。ブラウザ ウィンドウ全体がブラウザのデフォルトの参照になります。

さらに、text-indent はブロックレベルの属性であり、< p>、< blockquqte>、< h1>< h6> などの識別子でのみ使用できます。

9つ。色と背景のスタイルを制御します

色と背景を制御するスタイルには、色属性、背景色、背景画像、背景画像の繰り返し、背景画像の固定、背景の位置の 6 つの部分が含まれています。

1.カラー属性

の基本的な形式は以下の通りです:

color:パラメータ

Colorパラメータ値の範囲:

・RGB値で表現

・16進数(hex)のカラー値で表現

・英語表記デフォルトの色の名前表現

デフォルトの色の英語名を使用するのが最も便利であることは間違いありませんが、事前定義された色の種類が少なすぎるため、より多くの Web デザイナーが RGB 方式を使用することを好みます。 RGB 方式には多くの利点があり、デジタル形式で色を正確に表現できるだけでなく、多くの画像作成ソフトウェア (Photoshop など) で使用されるデフォルトの仕様でもあり、画像と Web ページをより適切に統合するための強固な基盤を築きます。 。

2.背景色

HTML でオブジェクトに背景色を追加する方法は 1 つだけです。それは、最初に表を作成し、その表に背景色を設定してから、オブジェクトをセルに入れることです。これは、多くのコードを必要とするだけでなく、テーブルのサイズと位置にも多少の手間がかかります。今では、CSS を使用して直接実行するのが簡単になり、オブジェクトの範囲は非常に広く、テキストの一部、または単なる単語や文字にすることができます。

基本的な形式は次のとおりです:

background-color: パラメータ

パラメータの値は color 属性と同じです。

3.背景画像

の基本形式は以下の通りです:

background-image: url(URL)

URLは背景画像の保存パスです。背景画像の保存パスを「none」にすると何も表示されません。

4.背景画像の繰り返し

背景画像の繰り返しは、背景画像をタイル状に配置するかどうかを制御します。つまり、背景の位置の制御と組み合わせて、背景画像を Web ページ上のどこかに個別に表示できます。

基本的な形式は以下の通りです:

background-repeat:パラメータ

パラメータ値の範囲:

・no-repeat:タイル状の背景画像を繰り返しません

・repeat-x:画像をタイル状に配置する水平方向

・repeat-y: 画像を垂直方向にのみタイル化します

背景画像の繰り返し属性を指定しない場合、ブラウザのデフォルトでは、背景画像が水平方向と垂直方向の両方にタイル化されます。

5.背景画像の固定

背景画像の固定は、Web ページのスクロールに合わせて背景画像もスクロールするかどうかを制御します。背景画像固定属性を設定しない場合、ブラウザのデフォルトの背景画像は Web ページのスクロールに合わせてスクロールします。派手すぎる背景画像がスクロール時に閲覧者の視力を損なうことを防ぐために、ブラウザ ウィンドウにバンドルする必要がある背景画像とテキスト コンテンツをバンドル解除できます。

基本的な形式は次のとおりです:

background-attachment: パラメータ

パラメータ値の範囲:

・fixed: Web ページがスクロールするとき、背景画像はブラウザウィンドウに対して固定されます

・scroll: Web ページがスクロールします背景画像がブラウザウィンドウに対して一緒にスクロールするとき

6.背景の配置

背景の配置は、Web ページに表示される背景画像の位置を制御するために使用されます。

基本的な形式は次のとおりです:

background-position: パラメータテーブル

パラメータ値の範囲:

・長さ単位の数値パラメータ

・top: 前景オブジェクトに対する上揃え

・bottom: 下揃え前景オブジェクトに対して相対的に

・left: 前景オブジェクトに対して左揃え

・right: 前景オブジェクトに対して右揃え

・center: 前景オブジェクトの中心に対して揃えます

・比率関係

パラメータの中心が別のパラメータの前で使用される場合、それは水平方向の中心化を意味し、別のパラメータの後に使用される場合は垂直方向の中心化を意味します。

10.リストのスタイルを制御します

リストは HTML の非常に便利な表示方法で、関連する並列コンテンツを縦に整然と配置して、Web ページをすっきりとプロフェッショナルに見せ、閲覧者に明確な印象を与えます。

スタイル シートは、リストにいくつかの機能を追加します。コントロール リストのスタイルには、リスト スタイル、グラフィック シンボル、リストの位置の 3 つの部分が含まれます。

1.リスト記号

リスト記号とは、各リスト項目の前に表示される記号を指します。

基本的な形式は以下の通りです。

list-style-type:パラメータ

パラメータ値の範囲:

・disc:circle

・circle:中空円

・square:正方形

・decimal:10進数

・ lower-roman: 小文字のローマ数字

・ upper-roman: 大文字のローマ数字

・ lower-alpha: 小文字のギリシャ文字

・upper-alpha: 大文字のギリシャ文字

・none: 符号なしの表示

パラメータディスクインはデフォルトのオプションです。

2.図記号

図記号は、元のリストの箇条書きを図に置き換えることができることを意味します。

基本的な形式は次のとおりです:

list-style-image: URL

URL は箇条書きを置換するために使用されるグラフィック ファイルのアドレスであり、相対アドレスまたは絶対アドレスを使用できます。

3.リストの位置

リストの位置は、リストが表示される場所を示します。

基本的な形式は以下の通りです。

list-style-position:パラメータ

パラメータ値の範囲:

・inside:BOXモデルの内側に表示

・outside:BOXモデルの外側に表示

新規に表示こちら コンセプト：BOXモデル。 BOXとは、スタイルルールが適用されるオブジェクトを格納するコンテナのことです。詳しくは後述します。

イレブン。ユーザーインターフェースのスタイルを制御する

Web ページでは、マウスは通常矢印の形をしており、リンクをポイントするときは手の形になり、Web ページのダウンロードを待っているときは砂時計の形になります...これは慣例のようです。この設計により、ブラウザの現在の状態や何ができるかを知ることができますが、私たちのニーズを完全に満たすことはできないようです。リンクを例に挙げると、ヘルプ ファイルを指すことも、1 ページ進むことも、1 ページ戻ることもできるため、同じ手の形をしたマウスだけでは問題を説明できません。幸いなことに、CSS には最大 13 個のマウスの形状が用意されており、そこから選択できます。

基本的な形式は次のとおりです:

カーソル: マウス形状パラメータ

CSSマウス形状パラメータテーブル:

CSSコード

マウス形状

style="cursor:hand"

手の形状

style="カーソル:十字線"

十字の形状

style="カーソル:テキスト"

文字の形状

style="カーソル:待機"

砂時計の形状

style="カーソル:移動"

十字の矢印の形状

style="カーソル:ヘルプ"

疑問符の形

style="cursor:e-resize"

右矢印の形

style="cursor:n-resize"

上矢印の形

style="カーソル:nw-resize"

左上の矢印の形

style="cursor:w-resize"

左の矢印の形

style="cursor:s-resize"

下矢印の形

style="cursor: se-resize"

右下の矢印の形

style="cursor:sw-resize"

左下の矢印の形

以上が「基礎から極めるCSS実践編(2)」の内容です。関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。