CSS3 シリーズ 2 (メディア サポート、テキストとフォント関連のスタイル、ボックス関連のスタイル)_html/css_WEB-ITnose

CSS3メディアサポート

css3では、コンテンツを変更せずにさまざまなデバイスに正確に適応するスタイルでページレイアウトを選択でき、それによりユーザーエクスペリエンスが向上します

ページ上でメタタグを使用できます ウィンドウ幅を指定しますこのページを処理するときにブラウザが使用するピクセル数の指定方法は次のとおりです

<meta name="viewport" content="width=600px" />

CSS は、画面、テレビ、印刷、音声、ハンドヘルドなどのメディアを設定することで、このスタイルが適用されるデバイスを決定できます。 、すべてなど。

<style media="all"><link media="print" href="xxx.css">

CSS3 は、高さ、幅、アスペクト比、解像度、デバイス サイズなど、より多くの視覚的属性に基づいて設定できます。

<style media="screen and (min-width:600px) and (max-width:900px)">

具体的には Media Queries の使い方は以下の通りです。

Media Queries で指定できる値とその値が表すデバイスタイプは以下の通りです:

In Media Theクエリでの特定のデバイス特性の説明は次のとおりです。

and キーワードを使用して、特定のデバイス タイプの特定の特性の値が特定の条件を満たす場合に使用されるスタイルを指定します

Use multiple items ステートメント異なるデバイスタイプやデバイス特性に同じスタイルを適用するには

式に not キーワードまたは唯一のキーワードを追加できます。 not キーワードは、次の式に対して反転演算を実行することを意味します

の機能。唯一のキーワードは、メディア クエリをサポートしていないがメディア タイプ デバイスを読み取ることができるブラウザで式のスタイルを非表示にすることです

テキストに影を追加します

テキストを自動的に折り返すようにします

西側向け テキスト向け, ブラウザは単語の途中で突然改行するのではなく、自動的に半角スペースやハイフンで行を折り返します。中国語のテキストに句読点が含まれている場合、ブラウザがテキスト行の先頭に句読点を配置することは常に不可能です。

自動行折り返しの処理方法はcss3のword-break属性で決めることができます

長い単語やURLアドレスを自動的に折り返してみましょう

        div {            word-wrap:break-word;        }

サーバーサイドフォントを使用します

webfontsは非常に初期に開発された CSS テクノロジにより、フォント ファイルをダウンロードすることでページで特定のフォントをレンダリングできるようになります。

@font-face 属性を使用してクライアント上でローカルフォントを表示する場合は、フォントファイルパスの URL 属性値を local() の形式の属性値に変更し、使用するフォントを記述する必要がありますlocal

の後の括弧内

format属性値でフォントファイルの形式を宣言します(TrueTypeファイル形式を使用する場合はformat属性値をtruetypeに、OpenType形式を使用する場合はformat属性値をopentypeに設定します。 TrueType 形式のファイル拡張子は ttf、OpenType 形式のファイル拡張子は otf です。IE でサーバーサイド フォントを使用する場合、ファイル拡張子は eot のみ使用できます。

@font-face 属性で指定できる属性値は以下の通りです:

ここでは実際に font-size-adjust 属性の使い方について話します。 , 使用方法は非常に簡単ですが、各フォントに付属するアスペクト値（プロポーション値）を使用する必要があります

『HTML5とHTML5の権威ガイド』で紹介されているブラウザのアスペクト値の計算方法を引用CSS3"

CSS3 ボックス関連のスタイル

1. width 属性と height 属性はブロック タイプでのみ使用できます。要素では、インライン タイプの要素には機能しません。

2. デフォルトでは、テーブルelement 属性はブロック型なので、他のテキストと同一行に置くことはできません。ただし、table 要素を inline-table 型に変更すると、テーブルと他のテキストを同一行に置くことができます

3.要素をランインまたはコンパクトタイプに指定する場合、要素の後にブロックタイプ要素がある場合、ランインタイプ要素はブロックタイプ要素の内側に含まれます。コンパクトタイプ要素はブロックタイプの左側に配置されます。要素

4. CSS3 のすべてのテーブル関連要素とその型は次のとおりです

さまざまなボックスタイプのさまざまなブラウザのサポート

省略記号を表示する部分を超えます

        div {            white-space:nowrap;/*使得盒右端的内容不能换行显示，这样一来盒中的内容就在水平方向上溢出了*/            overflow:hidden;/*超出div元素部分的文字将会被隐藏起来*/            text-overflow:ellipsis;/*在div元素的末尾出现一个省略号*/        }

ボックス関連の属性 box-shadow、box-sizing

box-shadow の使い方は text-shadow と全く同じです。

box-sizing: width 属性と height 属性でそれぞれ指定された幅と高さの値に、要素内のパディング領域と境界線の幅と高さを含めるかどうかを指定できます

box-sizing 属性を使用する目的は、要素の合計幅を制御することです。この属性が使用されない場合、デフォルトでは content-box 属性値がスタイルで使用されます。これはコンテンツの幅を指定するだけです。要素の合計幅を指定しない場合があります。border-box 属性値を使用すると、ページのレイアウトがより便利になります

Title

Paragraph

CSS3 のその他の重要な詳細

1) アルファ チャネルとカラー値の設定の不透明度の間に大きな違いはないと思われるかもしれませんが、実際には、背景色とテキストの両方にアルファ チャネルを使用する必要があります。不透明度を使用した効果を実現するために同時に色を追加します

2) カラー値が透明として指定されている場合、背景、テキスト、または境界線の色は完全に透明に設定されます。これは、アルファ チャネルを使用するのと同じです。値は 0 (CSS3 では、すべての属性で色の値を指定できます。透明な値を指定します)

3) CSS2 では、outline 属性が要素の周囲に輪郭を描くために使用されることは誰もが知っています。具体的な使用方法は次のとおりです。以下の通りです

デフォルトでは、境界線のある要素の場合、輪郭線を境界線の周囲に近づけて輪郭線を描画するために、輪郭線を数ピクセル外側にずらしたい場合は、新しい輪郭オフセットを使用します。 CSS3 の属性はこの効果を持ち、ピクセル単位の整数値を指定するだけで十分です。正の整数として指定すると、負の整数として指定すると外側にオフセットされます。内側にオフセットされます

4) CSS3 のサイズ変更開発により、ユーザーは要素のサイズを変更できます (主にオーバーフロー属性を使用してコンテナ要素で使用されます)

指定できる値。

5) css3では初期属性値を使用して要素のスタイル指定を解除することができますが、場合によっては初期属性値を使用した後の表示結果が表示されない場合があります。要素は要素のスタイル設定を直接削除した後の結果と等価ではありません（初期属性値のスタイル設定を追加した後、要素のフォントサイズやフォントの太さは設定されているデフォルト値を使用するため）ブラウザが要素に追加するスタイルに関係なく、CSS のフォント サイズとフォントの太さの属性）