6.フロントエンドエントリのCSSフォントとテキスト

CSSフォントとテキストスタイル
テキスト:色、フォントサイズ、フォント、太字など。
テキスト:行の高さ、配置、テキスト装飾など。

テキストスタイル属性:
font-family
font-size

font-weight
font-style

在html4.0之前,可以用font,但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
	h1{
     
     font-family:"宋体""Times New Roman";}
</style>

の代わりに、フォントタグのCSSスタイルを使用します

ここに写真の説明を挿入
フォントサイズ

ここに写真の説明を挿入
相対単位:
pxピクセル      モニターの解像度の影響を受ける
に/%      emと%は、親要素の設定サイズです
絶対サイズ。ブラウザの解像度や親要素のサイズによって変更することはできません。

colorは、要素
color | RGB | #ffffff
color:red;
color:rgb(33,43,34);番号0〜255のパーセンテージが0%-100%
color:#fff;#beginning、6桁:0のテキストの色を定義します。 〜fは大文字と小文字を区別せずに3桁に省略できます

Font-
weight:
normal | bold | bolder | lighter | 100〜900
実際、太字と太字は基本的に同じ効果、100〜600は同じ、700-900も同じです。
デフォルトは通常で、400に相当し、700は太字に相当します。

斜体
フォントスタイルの
通常のイタリック斜体

font-variant fontdeformation
要素テキストを小文字の大文字に設定しますnormal | small-caps

text-alignが使用されますブロック要素
設定して水平方向の配置要素内のテキストのを
属性値:
左、右、中央には、正当化

画像を中央揃えたい場合は、divoutsideなどのブロックレベルの要素をネストする必要があります

異なるブラウザの下で中央に表示したい場合で、divの下のpタグのテキストが中央に配置されている場合は、

<style>
	.first{
     
     text-align:center;}
	.first p{
     
     width:50%;margin:0 auto;}
</style>
<div class="first">
	<p> fsadfasdfasdfsa</p>
</div>

vertical-alignプロパティ インライン要素にのみ有効
要素のコンテンツは、垂直方向に
ベースライン、サブ、スーパー、トップ、テキスト-トップ、ミドル、ボトム、テキスト-ボトム、長さ、垂直方向に適用された単一行の垂直方向の中央正の負の区別の割合が提供されます行の高さと高さは大きなテキストです-align:center;複数行のテキストは垂直方向の中央に配置されます:
ここに写真の説明を挿入





インライン要素をブロックレベルの要素に配置することはできません
display:tableを親要素に追加し、
center要素に追加します:
vertical-align:middle;
display:table-cell;

line-height属性は要素内のテキスト行の高さと
さを設定するために使用されます行の高さがフォントサイズ20pxより16px小さい場合、パーセンテージ
はオーバーラップします。
行の高さの単位としてemを使用することをお勧めします
emと%フォントサイズと重ならないようにする

text-index:2em;トップグリッド

行の高さがフォントサイズと同じ、または1emまたは100%に設定されている場合、行間の距離は小さくなり、ブラウザにはデフォルトの行の高さがあり、Chromeは16pxの
行の高さを継承できます

継承は計算値であり、emまたは%値を直接継承するのではなく、フォントサイズ>行の高さの場合に重複する可能性があります

テキストスタイル属性:
word-spacingは、要素内の単語間の間隔を設定ます標準としてスペースを使用する
letter-spacing要素内の文字間の間隔を設定ます。
値は正または負に設定でき、単位はem、%、pxなどになり
ます。text-transform要素内のテキストの大文字と小文字を設定します:大文字、大文字、小文字、なし

text-decoration要素内のテキストの装飾を設定します。
下線、上線、ラインスルー、点滅、
点滅なし互換性の問題があります
継承できません

応用

<style>
	p{
     
     background-color:#ececec;height:150px;text-align:center;line-height:150px;}
	.one{
     
     font-size:80px;color:#c9394a;font-weight:bold;}
	.two{
     
     font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
	.three{
     
     font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>

総括する:


マニュアルとインターネットの助けを借りて、全体から部分までのウェブページの作成

スタタ式
font- familyfont
-size
color
font-weight
font-style
text-align
line-height
vertical-align
word-spacing
letter-spacing
text-transform
text-decoration

次へ:
CSSの背景とリスト
ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/qq_44682019/article/details/108856061