『HTML 5とCSS 3基礎教程』読書ノート

作者:hwj 3747转载请注明

代替フォント

を指定

body {

font-family: Geneva, Tahoma, sans-serif;

}

最初のフォントスタックは、ブラウザにGenevaがない場合はTahomaを使用し、両方がない場合は標準のsans-serifを使用するように伝えます.

emの値

を設定
Emは、親要素のサイズに依存するメトリック単位です.
宣言

body{ font-size:100%; }

ほとんどのシステムでは、フォントサイズが16 pxとデフォルトで設定されています.この場合、1 em=16 px、つまりemの相対値を変更する必要があります.100%を変更するだけでいいです.

行高さ

を設定する.

.project p {

font-size: .9375em; /* 15px/16px */

line-height: 1.65; /* 15px*1.65 =24.75px */

}

.projectクラスp要素のフォントサイズは0.9375 em、すなわち15ピクセルです.行の高さは15ピクセルの1.65倍、つまり約24.75ピクセルになります.
行の高さを数値で設定すると(通常はそうします)、すべてのサブ要素がこの因子を継承します.したがって、親要素のフォントサイズが16ピクセル(またはemなどで表される等価サイズ)であり、行の高さが1.5である場合、その要素の行の高さは24(すなわち16)である×1.5)ピクセル.サブエレメントのフォントサイズが10ピクセルの場合、そのエレメントの行の高さは15(つまり10)です.×1.5)ピクセル.
パーセンテージまたはem値を使用すると、生成されたローの高さ(計算された値)のみが継承されます.したがって、親要素のフォントサイズが16ピクセル、行の高さが150%の場合、その要素の行の高さは24ピクセルです.すべてのサブエレメントは、フォントサイズにかかわらず、24ピクセルの行の高さを継承します.

すべてのフォントを同時に設定

.example-3 {

font: italic small-caps bold .875em/1.3 "Palatino Linotype", Palatino, serif;

}

文字型(斜体)、小型大文字、太さ、フォントサイズ/行高さ、フォントの順です.
fontにフォントサイズとフォントシリーズのプロパティが宣言されている限り、他のプロパティは任意に組み合わせることができます.最初の3つのプロパティの順序は重要ではありません.

アルファベットの大文字と小文字を設定

text-transformプロパティ
capitalizeを入力して、各単語の頭文字を大文字にします.
またはuppercaseを入力してすべてのアルファベットを大文字にします.
あるいはlowercaseを入力してすべてのアルファベットを小文字にします.
あるいはnoneを入力してテキストを本来のままにします(継承した値を取り消すことができます).

装飾テキスト

text-decorationプロパティ
アンダースコアを追加するにはunderlineを入力します.
またはoverlineを入力してスクライブを追加します.
またはline-throughを入力して削除線を追加します.

空白属性

を設定する.
デフォルトでは、HTMLドキュメントの複数のスペースとバックグラウンドが1つのスペースとして表示されるか、無視されます.
ブラウザにこれらの追加のスペースを表示させるには、white-spaceプロパティを使用します.
pre:ブラウザに原文のすべてのスペースとリターンを表示させます.
nowrap:すべてのスペースが行を切断しないことを確認します.つまり、テキストがすべて1行に表示されます.
normal:通常の方法でスペースを処理します.
応答型Webサイトの構築

メディアクエリ

の理解と実装

...

p {

color: green;

}

@media only screen and (min-width:480px) {

p {

color: red;

font-weight: bold;

}

}

width=device-width:視覚領域の幅はデバイス幅(iPhoneでは320画素)と同じ値に設定されます
画面幅が480 pxより大きい場合は赤色のレイアウト、小さい場合は緑色のレイアウトを使用することを示します.

要素のフィレット

を作成する

.all-corners {

-webkit-border-radius: 20px;

border-radius: 20px;

}

.one-corner {

-webkit-border-top-left-radius:75px;

border-top-left-radius: 75px;

}

.elliptical-corners {

-webkit-border-radius: 50px / 20px;

border-radius: 50px / 20px;

}

.circle {

-webkit-border-radius: 50%;

border-radius: 50%;

}

テキストにシャドウを追加

.blur-inversed {

color: white;

text-shadow: 2px 2px 10px #000;

}

x-offset(水平オフセット)、y-offset(垂直オフセット)、blur-radius(ブラー半径)、colorの値(最初の3つの値は長さ単位で、4つの値の間にカンマで区切らない)

他の要素にシャドウを追加

.shadow-offsets-0 {

-webkit-box-shadow: 0 0 9px 3px #999;

box-shadow: 0 0 9px 3px #999;

}

.inset-shadow {

-webkit-box-shadow: 2px 2px 10px #666 inset;

box-shadow: 2px 2px 10px #666

inset;

}

inset:内部シャドウ

アプリケーション多重バックグラウンド

.night-sky {

/*         */

background: navy url(ufo.png) no-repeat

center bottom;

background:

url(ufo.png) no-repeat 50% 102%,

url(stars.png) no-repeat 100% -150px,

url(stars.png) no-repeat 0 -150px,

url(sky.png) repeat-x 50% 100%;

...

}

グラデーションバックグラウンド

を使用

.vertical-down { /*    */

background: silver; /*    */

background: linear-gradient(silver, black);

}

.vertical-up {

background: silver;

background: linear-gradient(to top,silver, black);

}

.angle-120deg {

background: aqua;

background: linear-gradient(120deg,aqua, navy);

}

既定では、リニアランプは上から下にランプされているので、アトリビュート値にto bottomを指定する必要はありません.反対方向を使用する場合は、to topを使用します.2つ目の方法は、120 deg(120度)などのグラデーション角度の度数を指定することです.