css3 新しい属性 API_html/css_WEB-ITnose

以前に書きました: CSS5 標準はまだ完全に完成していないため、さまざまなコアを備えたブラウザは、属性を混同しないように独自の標準を持っています。各ブラウザはそれぞれの標準にプレフィックスを追加します。

-moz-主にFirefox用

-webikt-主にChrome、Google、Safari用

-o-主にOperaなどMac上のブラウザ用

以下は主にカラーから、みましょうCSS3 の新しい属性をテキスト、セレクターなどの観点からまとめます。

Color

css1 と css2 は次の 3 つの方法でのみ色を表現できます

色の名前

eg:color:red

HEXメソッド

で表されます（ポイントの値の範囲は0~255または0%~200%です）

css3では上記モードでは透明度を表現できず、以下の表現方法が追加されました

RGBAモード 構文: RGBA(R,G,B, A) R 赤 G 緑 B 青 A 透明

各点の値は RGB と同様です A の値は 0~1 の間です eg:rgba (255,0,0,0.5) は半透明の赤を意味します

HSL モード (カラー ホイール モード)

構文: HSL (H, S, L) H 色相 S 彩度 L 明るさ

H 値は 0 から 360 の間で、0 はまたは 360 は赤を表します 120 は緑を表します 240 は青を表します

S と L の値は両方とも 0% から 100% の間です

HSLA モード

各ポイントの構文と値は HSL モードと同じです。唯一の違いは、次の A が透明度を表すことです

eg:hsl(360,50 %,50%,0.5) red

次に、 color:transparent と filter filter:alpha(opacity=50) を使用できます。 css3 (フィルターなしは IE のみに限定されます)

テキスト

css1 と css2 でよく使用されるテキスト属性には

css3 でよく使用されるテキスト属性には次のものが含まれます

css3 のテキスト属性を導入しましょう

text-overflow 属性

機能: コンテンツがオーバーフローした場合のテキスト処理方法を設定します。

値:

clip: デフォルト値

オブジェクト内のテキストがはみ出した場合、省略記号(...)は表示されませんが、はみ出した部分が切り取られます。

ellipsis:

オブジェクト内のテキストがオーバーフローする場合に省略記号マーク (...) を表示します。

注: この属性は、over-flow:hidden 属性 (処理外) およびwhite-space:nowrap (改行を無効にする) と組み合わせて使用​​する必要があります。そうしないと、効果が表示されません

text-align 属性

機能: テキストの配置を設定します

値:

left: デフォルト値の内容は左揃えです。

center: コンテンツが中央に配置されます。

right: コンテンツが右揃えになります。

justify: コンテンツを両端に揃えます。このドキュメントの執筆時点では、Firefox のみが正しい効果を確認できます

開始: コンテンツは開始境界に揃えられます。 (CSS3)

End: コンテンツの配置終了境界。 (CSS3)

text-transform属性

機能: 大文字とその他のテキスト変換形式を設定します

値:

none: デフォルト値は変換なしです

capitalize: 各単語の最初の文字を大文字に変換します

大文字：大文字に変換します

小文字：小文字に変換します

全角：左右の文字を全角に設定します（CSS3）はサポートされていません

全角かな：すべてのかな文字を通常の文字に変換します仮名 (CSS3) はサポートされていません (例: トルコ語)。

text-decoration属性

機能: テキストの装飾線を設定します。

値:

[ text-decoration-color ]: サポートされていません

テキスト装飾の色を指定します。

[ text-decoration-line ]: 未サポート

文字飾り線の種類を指定します。 CSS1 の text-decoration 属性に相当します

[ text-decoration-style ]:

テキスト装飾のスタイルの指定はサポートされていません。

点滅: 指定したテキストの装飾が点滅します。 operaとfirefoxのみ

例: text-decoration: overline CSS1の例

text-decoration: #F00 double overline CSS3の例

text-decoration-line属性

機能: テキスト装飾線の位置を設定します。

Value:

none: デフォルト値

指定されたテキストには装飾がありません

underline:

指定されたテキストの装飾は下線です

overline:

指定されたテキストの装飾は上線です

line- through:

指定されたテキストの装飾はスルーラインです

text-decoration-color属性

機能: テキスト装飾線の色を設定します

値: 色を指定します。

text-decoration-style 属性

機能: テキスト装飾線のスタイルを設定します。

値:

solid: デフォルト値 実線

double: 二重線

dotted: 点線

dashed: 点線

wavy: 波線

text-shadow プロパティ

関数:テキストの影効果を設定します

値:

none: デフォルト値 影なし

最初の長さの値は、オブジェクトの影の水平オフセット値を設定するために使用されます。負の値も可能です

2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です

3 番目の長さの値が指定されている場合、オブジェクトのシャドウ ブラー値を設定するために使用されます。負の値は許可されません 0: ぼかしなし、10px: ぼかしレベル 10 ピクセル

オブジェクトの影の色を設定します。

text-fill-color 属性

機能: テキストの塗りつぶしの色、テキストの塗りつぶし部分の色を指定します

値: color

注: この属性を使用するには、ブラウザーにプレフィックス

text-ストロークが必要です。属性

機能: テキストの境界線の色、テキストのストローク部分の色を指定します

値:

[ text-blood-width ]:

オブジェクト内のテキストのストロークの太さを設定または取得します

[ text-ストローク-カラー]:

オブジェクト内のテキストのストロークの色を設定または取得します

注: この属性を使用するには、ブラウザにプレフィックスが必要です

text-ストローク-幅属性

機能: ストロークの幅を指定しますテキストのストローク部分、text-ストロークの派生属性

値: 長さ

注: この属性を使用するには、ブラウザーの接頭辞を使用する必要があります

text-blood-color 属性

機能: テキストのストローク部分の色を指定しますtext、text-ストローク 派生属性

値: カラー

注: この属性を使用するには、ブラウザーにプレフィックスが必要です

tab-size 属性

機能: ページ上に長さを表示するためのタブ インデント キーを設定します。

値: デフォルト値: 8 (長さまたは整数値)

説明: 整数値: z-index:1 1 は整数値であり、倍数と同様に単位は必要ありません。

Length: margin:10px ここで、10px は長さの値です。

注: この属性は、

 タグ内に表示される場合にのみ有効です (フォーマット済みの状態)。ブラウザが自動的に空白文字を無視するためです。 
 
 Opera と Firefox はブラウザーのプライベート プレフィックスを使用する必要があります。 
 
word-wrap 属性
 
機能: オーバーフローテキスト (特に英語のようなテキスト) を処理する方法。 
 
値: 
 
normal: デフォルト値 
 
 コンテンツが指定されたコンテナ境界をプッシュまたはオーバーフローすることを許可します。 
 
break-word: コンテンツは境界内で壊れます。 
 
 必要に応じて、単語内での改行は許可されます。 
セレクター
要素セレクター
 
関係セレクター
 
疑似クラスセレクター
 
属性セレクター
 
疑似オブジェクトセレクター
 
 css1とcss2
 
css1&css2要素セレクター
 
 css1&css2 リレーションシップセレクター
 
 
 
css1&css2 疑似クラスセレクター
 
 
css1&css2 属性セレクター
 
 
css1&css2 疑似オブジェクトセレクター
 
 
css3 リレーションシップセレクター
 
 
css3 疑似クラスセレクター
 
 
css3 属性セレクター
 
 
css3 疑似オブジェクトセレクター