《Head First HTML&CSS》笔记_html/css_WEB-ITnose

void 要素は、HTML ページ内の開始タグと終了タグの間にコンテンツが存在しない要素を指します。

同じ Web サイト上のページにリンクするには相対リンクを使用し、他の Web サイト上のページにリンクするには URL を使用する必要があります。

ブラウザは、コンピュータ上のローカル ファイルを読み取るときにファイル プロトコルを使用します。ファイル URL の後にスラッシュが 3 つあります。

通常、デフォルトの送信ポートは 80 です。

a 要素には、リンク情報を提供するために使用される title 属性があります。

a 要素は、ページ内の特定のポイントに直接アクセスするための id 属性を運ぶことができます。相対リンクであっても URL であっても、ページ上の特定のターゲットにリンクするには、リンクの最後に # を追加し、その後にターゲット識別子を追加するだけです。

任意の要素に title 属性と id 属性を追加できます。

id は文字 (A~Z または a~z) で始まり、その後に任意の文字、数字、ダッシュ、アンダースコア、コロン、またはピリオドが続く必要があります。 新しいウィンドウでページを開くには、開きたいウィンドウの名前をブラウザに伝える必要があります。どの特定のウィンドウを使用するかをブラウザーに指示しない場合、ブラウザーは同じウィンドウでページを開きます。 a 要素に target 属性を追加して、ブラウザに別のウィンドウを使用するように指示できます。 「_blank」をターゲットとして使用すると、ブラウザは常に新しいウィンドウを開いてページを表示します。 「coffee」などの別の名前を指定すると、同じターゲット名「coffee」を持つすべてのリンクが同じウィンドウで開きます。 (テスト後、Chrome は正常に動作し、IE11 が別のウィンドウで開きます。)

一般的な URL は、プロトコル、Web サイト名、リソースの絶対アドレスで構成されます。 (たとえば、ドメイン名はglorywu.com、Webサイト名はwww.glorywu.com、またはcode.glorywu.comやwade.glorywu.comなどになります。)

最もよく使用される3つの画像Web 上の形式: JPEG、PNG、GIF。

写真や複雑な画像には JPEG を使用してください。 JPEG には 1,600 万色が含まれており、非可逆形式であり、一部の情報が失われ、透明度やアニメーションはサポートされておらず、ファイル サイズが小さいです。

モノクロ画像、ロゴ、幾何学的形状は PNG または GIF と同じです

PNG: 何百万もの色が含まれ、ロスレス形式、情報の損失がなく、画像の下にあるものを表示できるように「透明」を設定できます。対応するJPEGの比率が大きいです。

GIF: 256 色が含まれており、可逆性があり、「透明」に設定できるのは 1 色のみです。ファイルは対応する PNG より大きく、アニメーションをサポートしています。

はインライン要素です。この要素は画像を指すだけであり、画像自体は HTML ページの一部ではありません。 HTML ページはプレーンテキストです。要素の alt 属性を使用すると、画像が表示できないときに代わりにテキストを表示できます。 (Chrome: 破損した画像と文字なし。IE: 画像と文字あり。Firefox: 画像と文字なし。) 画像のサイズは、幅と高さの属性で調整できます (幅は 800 ピクセル未満であることが望ましい)。ブラウザは、HTML ファイルをダウンロードしてページの表示を開始した後でのみ画像のダウンロードを開始します。また、ブラウザはページに合わせて画像を拡大縮小する前に完全な画像を取得する必要があるため、ソース ファイルのサイズを直接変更することをお勧めします。

アンチエイリアシングは、背景色に比べてエッジを柔らかくします。

すべての要素名を省略し、ドットだけを省略し、次にクラス名を省略した場合、このルールはこのクラスのすべてのメンバーに適用されます。

複数のクラスを要素に追加し、各クラス名を class 属性に入力し、各クラス名をスペースで区切ることができます。クラス名の順序は重要ではありません。

複数のセレクターが要素を選択する場合、1 つのルールが他のルールよりも具体的である場合に優先されます。それらが同様に具体的である場合、CSS ファイルにリストされている最後のルールが選択されます。

使用するフォントを制御するには font-family を使用し、フォント サイズを制御するには font-size を使用し、フォントの太さを制御するには font-weight を使用します。 、下線、取り消し線）。

各フォントファミリーには、共通の特性を持つフォントのグループが含まれています。サンセリフ、セリフ、等幅（固定幅）、筆記体（手書き）、ファンタジー（特定のスタイル）が含まれます。

複数のフォントを指定するには、font-family 属性を使用します。最初は優先フォント、次に優先フォントが利用できない場合に使用されるいくつかの候補フォント、そして最後に、リストで指定されている他のすべてのフォントと同じ場所に配置される汎用フォント ファミリ名 (通常はブラウザのデフォルト フォント) です。フォントファミリーの. Verdana フォントはほとんどの PC で使用でき、Geneva フォントはほとんどの Mac で使用でき、Arial は PC と Mac の両方で共通です。フォント名にスペースが含まれる場合は、フォント名を引用符で囲みます。

woff: Web オープン フォント形式。 Web フォントでは、Web オープン フォント形式が優先され、TrueType が候補として挙げられます。 TTF および WOFF フォント形式は、IE8 以前のバージョンでは使用できません。埋め込み OpenType は IE でのみサポートされます。

@font-face ルールは、src URL で指定されたフォント ファイルをロードするようにブラウザに指示します。ブラウザは、サポートするファイルが見つかるまで、各 src ファイルのロードを試みます。ロードされると、フォントには font-family プロパティで指定された名前が割り当てられます。

フォント サイズを調整するいくつかの方法

font-size: 14px; 古いバージョンの IE では、テキストのスケーリングがサポートされていません。

font-size: 150%; フォント サイズのパーセントを指定する場合、親要素のフォント サイズを基準とします。

font-size: 1.2em; 上記と同じ。

font-size: small; フォント サイズを xx-small、x-small、small.medium、large、x-large、または xx-large として指定できます。この変換では、これらのキーワードがピクセル値に変換されます。ブラウザで定義されているデフォルト値を使用して行われます。これらのキーワードのうち、各キーワードの対応するサイズは前のキーワードよりも約 20% 大きくなり、小さいものは通常 12 ピクセルとして定義されます。

推奨文字サイズ指定方法

キーワードを選択（小または中推奨）し、本文ルールの文字サイズとして指定します。これは、ページのデフォルトのフォント サイズと同等です。
* em またはパーセントを使用して、本文のフォント サイズに対する他の要素のフォント サイズを指定します。

ほとんどの場合、ブラウザ本体のデフォルトのフォント サイズは 16 ピクセルです。そして、h1 は本文のフォント サイズの 200%、h2 は 150%、h3 は 120%、h4 は 100%、h5 は 90%、h6 は 60% です。一般に、デフォルトの h4 フォント サイズは本文のフォント サイズと同じです。

フォントの太さを変更する font-weight:bold; 要素がデフォルトで太字に設定されている場合、または親要素から太字を継承している場合は、font-weight:normal; によって太字スタイルを削除できます。

斜体と斜体テキスト

斜体フォントスタイルを設定: italic; ただし、すべてのフォントが斜体スタイルをサポートしているわけではありません。

斜テキストも斜ですが、特別に設計された一連の斜フォントを使用する代わりに、ブラウザは通常のテキストを斜にします。 font-style: oblique;

色を指定するには 16 進コードを使用します。# で始まり、次に赤、緑、青のコンポーネントをそれぞれ 2 桁で表して指定します。コンポーネントの各グループの 2 桁が同じ場合、たとえば、#ccbb00 を #cb0 に、#11eeaa を #1ea に短縮できます。

取り消し線のテキスト装飾を追加します: ラインスルー; 下線; 上線;

色の 16 進コードのすべての桁が同じ場合 (#111111、#777777 など)、これらの色は濃い色から灰色になります。グレーからライトグレー。

行の高さを line-height: 16em に設定します。つまり、行の高さはフォント サイズの 1.6 倍です。

CSS の観点から見ると、各要素はボックスです。各ボックスは、コンテンツ領域と、オプションのパディング、境界線、およびマージンで構成されます。パディングとマージンは透明で色がなく、独自の装飾もありません。枠線にはさまざまな幅、色、スタイルがあります。パディングはコンテンツの周囲に余分なスペースを追加し、マージンは要素間にスペースを与えます。要素の背景色はパディングの下まで広がりますが、外側のマージンを超えることはありません。

CSS を使用すると、background-image 属性を使用して任意の要素に背景画像を追加できます。背景画像: url (引用符なしの画像パス); デフォルトでは、背景画像が繰り返されます (並べて表示されます)。これは、background-repeat: no-repeat: で解決できます。 repeat-x イメージは水平方向にのみ繰り返し、repeat-y イメージは垂直方向にのみ繰り返します。inherit は親要素の設定に従って処理されます。さらに、ブラウザーはデフォルトで要素の左上隅に背景画像を配置します。背景位置プロパティは、画像の位置を設定します。この位置は、ピクセル単位、パーセント値、または上、左、右、下、中央などのキーワードを使用して指定できます。

パディング、マージン、さらには境界線についても、CSS は各方向のプロパティを提供します。左側にパディングを追加するには、padding-left 属性を使用します。まず周囲のパディング (padding) を均一に設定し、次に左側に padding-left 属性を指定します。これにより、以前に設定された左側のパディングが上書きされます。

利用可能な境界線スタイル (境界線スタイル) は、実線 (実線)、二重 (二重線)、溝 (溝線)、アウトセット (外側の凸)、点線 (破線)、破線 (破線) の 8 つです。 )、インセット、リッジ。

キーワードまたはピクセルを使用して境界線の幅 (border-width) を指定できます。キーワードには、細、中、太が含まれます。

ボーダーの特定の側の border-top-color、border-right-style、border-bottom-width を指定します

ボーダーの丸い角を指定します border-radius: 15px; 特定の角の border-top-left を指定します-radius: 15px; em を使用して半径サイズを指定することもできます。

複数の要素で特定のスタイルを使用する場合は、クラスを使用します。ただし、スタイルを設定する必要がある要素が 1 つだけの場合、またはページに要素が 1 つだけある場合は、id を使用する必要があります。 ID で要素を選択するには、ID の前に # 文字を使用します。

クラス名は文字で始める必要があり、ID 名は数字または文字で始めることができます。クラス名と ID 名の両方に文字、数字、_ 文字を含めることができますが、スペースは含めることはできません。

複数のスタイルシートを使用する場合、後のスタイルシートは前のスタイルシートのスタイルを上書きします。

メディア属性を link 要素に追加して、さまざまな閲覧デバイスに指定されたスタイル シートを提供できます。 media=”screen and (max-device-width: 480px)” media=”print” また、min-device-width と Orientation [表示方向、横長 (ランドスケープ) またはポートレート (縦長)] を使用することもできます。クエリ。

@media ルールを使用して、CSS にメディア クエリを直接追加することもできます。 CSS では、すべてのメディア タイプに共通のルールを最後に配置して、ルールを繰り返す必要がなくなります。

IE8 以前のバージョンはメディア クエリをサポートしていません。

max-device-width および min-device-width メディア プロパティは、デバイスの実際の画面に大きく依存します。ブラウザのサイズをより重視する場合は、max-width プロパティと min-width プロパティを使用できます。 。