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の背景とリスト