フォントと色のスタイルを追加する-CSS_html/css_WEB-ITnose

CSS を使用して、テキストのフォント、スタイル、色を制御します

1. 基本操作:

 1 body{ 2     font-family: Verdana, Geneva, Tahoma, sans-serif 3 } 4  5 body{ 6     font-size: 14px 7 } 8  9 body{10     color: silver11 }12 13 body{14     font-weight: bold15 }16 17 body{18     text-decoration: underline19 }

注:

font-family: ページで使用されるフォントをカスタマイズします

font-size : フォント サイズを制御します

color: テキストの色を設定します

font-weight: フォントの太さに影響します

text-decoration: テキストにスタイルを追加します

2. フォント ファミリー:

シリーズ分類:

サンセリフ

セリフ

等幅

筆記体

ファンタジー

セリフ: 文字の最後にある小さな装飾線です。

例:

sans -serif: セリフなし、読書に適しています

セリフ: セリフがあると、新聞でよく見られる伝統的な印象になります

等幅: フォントには固定幅の文字が含まれています。例: 「i」の横方向の幅は「m」と同じで、主にソフトウェアのコード例を示すために使用されます

ファンタジー: 特定のスタイルを含む装飾フォント:

概要機能:

セリフ フォントは、エレガントで伝統的に見えます。

サンセリフフォントは明確な外観と読みやすさを持っています

等幅はタイプライターのように見えます

筆記体やファンタジーフォントは人々に興味深く、構造化された印象を与えます

3 Cを使用してフォントファミリーを指定します。 SS :

ブラウザの舞台裏:

1 body{2     font-family: Verdana, Geneva, Tahoma, sans-serif3 }

注:

本文の候補フォントを 4 つ指定しました

参照 デバイスは左から右に移動して選択します

ブラウザは、ユーザーがカスタマイズしていない最初のフォントをチェックした場合、次に 2 番目のフォントをチェックします

、ユーザーが持っているフォントが見つかるまで

最初の 3 つの特定のフォントが見つからない場合、ブラウザはデフォルトのサンセリフフォントが使用されます

イラスト:

4. Wed フォントの使用

自分でデザインしたページクールなフォントがあります。

ユーザーの手に渡ってほしくないのですが、すべてがデフォルトになってしまいます。 。 。

つまり: @font-face ルールを使用する

使用手順:

フォントを見つけるには、自分で所有することも、ライセンスされたフォントを提供するフォント Web サイトを使用することもできます。

必要なフォント形式があることを確認してください。通常は、Web オープン フォント形式 (.woff) を使用することをお勧めします

1. フォント ファイルを Web 上に置くか、オンライン フォント サービスを使用してホストします。これらのファイルをあなたのために。ただし、どちらにしてもフォントファイルのURLが必要です
2. CSSに@font-face属性を追加します
3. CSSに@font-face属性を使用します
4. サンプルコード:

5.  1 @font-face{ 2     /*我们为我们的字体设立一个名字*/ 3     font-family: "JJStyle One"; 4     /*浏览器会加载src指定的字体文件，直到找到他能支持的一个文件*/ 5     src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") 6          ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf") 7 } 8  9 10 h1{11     /*使用我们指定的字体名*/12     font-family: "JJStyle One",sans-serif;13 }

注:

複数のフォントをカスタマイズできますが、サーバー上に対応するフォント ファイルがあることを確認する必要があり、一意の名前を持つ別の @font-face ルールを作成する必要があります。

5. フォント サイズを調整する

ほとんどのデフォルト フォントは美しくありません。

このため、デザイナーとして、

フォント サイズを指定する方法を知っておく必要があります。

フォントサイズを指定するいくつかの方法:

PX

%

em

1. キーワード
2. サンプルコード:

3.  1 body{ 2     /*字体的高度为14像素*/ 3     font-size: 14px 4 } 5  6 h1{ 7     /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/ 8     font-size:150% 9 }10 11 h2{12     /*相对于另一个字体1.2倍*/13     font-size: 1.2em;14 }15 16 h3{17     font-size: small18     /*关键字有：xx-small,x-small,small,medium,large,x-large,xx-large*/19 }

   指定字体大小的建议：

   1. 选择一个关键字（推荐samll或mediun），指定它为body规则的字体大小。相当于页面默认大小
   2. 使用em或百分数，相对于body字体大小指定其它元素的字体大小（使用em还是百分数由你决定，因为效果都一样）

    1 body{ 2     font-family: Verdana, Geneva, Tahoma, sans-serif; 3     /*字体的高度为14像素*/ 4     font-size: small 5 } 6  7 h1{ 8     font-family: sans-serif; 9     /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/10     font-size:150%11 }12 13 h2{14     /*相对于另一个字体1.2倍*/15     font-size: 1.2em;16 }

   示图：

        

    

    

    

   6.改变字体粗细：

    

4. font-weight：bold
5. font-weight：normal

 

7.为字体增加风格：

 

斜体：

1. not italic
2. italic（文本向右倾斜，另外衬线还有弯曲）

倾斜：

1. not oblique
2. oblique（普通文本向右倾斜）

注意：

6. 一般来说，不论你指定什么风格，结果都不确定，有时是斜体，有时是倾斜。
7. 所以，除非真的对你很重要，不然完全可以就用斜体，不用担心差别

 

8.颜色样式：

 

指定颜色的方法：

8. 颜色名
9. 按红绿蓝对百分比指定
10. 十六进制码

 

1.按名字指定

1 body{2     background-color: silver;<br />3 }

2.用红绿蓝值指定颜色

1 body{2     /*rgb：红绿蓝 颜色的缩写*/3     background-color: rgb(80%, 40%, 0%);4 }5 h1{6     background-color: rgb(204,102,0);7 }

3.用16进制码指定

1 h2{2     background-color: #cc66003 }

注释：

11. 十六进制码以#开头
12. 前两位数字表示红色的分量，中间两位是绿色，后面两位是蓝色

    

13. 上图代码的“CC”的分量的计算步骤与解释如下图

                       

文本装饰：

  

 1 em{ 2     /*使<em>元素有一个从文本中间穿过的横线*/ 3     text-decoration: line-through; 4 } 5  6  7 em{ 8     /*使<em>元素有一个上画线和下划线*/ 9     text-decoration: underline overline;10 }11 12 em{13     /*使<em>元素没有任何装饰*/14     text-decoration: none;15 }16 17 h1,h2{18     color: #cc6600;19     /*在下滑框上加一条细的虚线*/20     border-bottom:thin dotted #aabbcc;21 }

 

 

The end--