logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

CSSテキストプロパティ

05/12/2019, by Ivan

HTMLの存在期間中、多くのタグが考案されてきましたが、現在CSSが広く普及しているため、一部は放棄する必要があります。そのようなタグの中に<font>、<b>、<i>、<center>があります。後で、他の「禁止」タグを検討します。また、これらのプロパティは、HTMLページのコードの不要なコードを回避し、cssファイルに移動するのに役立ちます。

前のレッスンではcssプロパティを追加する方法と色を選択する方法を検討しました。このレッスンでは、htmlを学習するときに遭遇した可能性のある多くのプロパティを検討します。以前はタグを通じてそれらを追加したかもしれませんが、今ではcssを通じてそれらを実行しており、それはより正しいです。

では、このレッスンの最初のプロパティはbackground-colorです。

Background-color

 このプロパティは、ブロックの背景を設定するだけでなく、通常のテキストやリンクにも使用できます。例えば、このように:

span{
  background-color: yellow;
}

またはリンク:

a{
  background-color: blue;
}

Background color

色のプロパティと同様に、色プロパティでも色を数字で指定できます。例えば#ff0000(赤)。

Font-style

おそらく<b>または<strong>タグ(太字)、<i>(斜体)、font(「悪い」タグ、テキストで何でもします)が既に出会っています。多くのこれらおよび他のタグを使用しないため、cssプロパティfont-styleが発明されました。このプロパティの一般的な値の中で、以下を区別することができます:

p{
  font-style: italic; /* 斜体 */
}

このようにして、<i>タグをfont-styleプロパティにitalic値で置き換えます。

font-style

Font-weight

廃止されたタグの中には、テキストを太くする<b>があります。現在、font-weightプロパティを使用するだけで十分です:

body{
  font-weight: normal; /* 標準フォント */
}
 
p{
 font-weight: 400; /* 標準フォント */
}
 
span{
  font-weight: 700; /* 太いフォント */
}
 
a{
  font-weight: bold; /* 太いフォント */
}

font-weightプロパティについて、次の値が可能です400またはnormal - これは標準フォントおよび700またはbold太いフォント。

CSS font-weight

Text-align

text-alignプロパティは<center>タグとHTML align属性の後継です。text-alignを次のように使用できます:

body{
  text-align: left; /* 左端に */
}
 
p{
  text-align: center; /* 幅で */
}
 
span{
  text-align: right; /* 右端に */
}
 
div{
  text-align: center; /* 中央に */
}

誰もがすぐにこのプロパティが何をするかを理解しました。答えは下の画像にあります:

CSS text-align

Text-decoration

また、<strike>(取り消し線)、<u>(下線)の代わりに、cssのtext-decorationプロパティを使用できます:

.underline{
  text-decoration: underline; /* 下線 */
}
 
.line-through{
  text-decoration: line-through; /* 取り消し線 */
}

CSS text-decoration

Text-transform

別の時々必要なCSSプロパティtext-transform。すべての大文字またはその逆すべて小文字でテキストを書くことができます。

CSS text-transform

すべてのcssプロパティを一度に暗記しようとしないでください。必要なプロパティに時々戻る場合は、時間がたつにつれて最も重要で繰り返されたものすべてを覚えますが、残りのプロパティはいつでも必要に応じて見つけることができます。