フロントエンド開発 CSS3 テクノロジーの経験共有

最近、私自身が今後レビューしやすいように、フロントエンドに関する知識をまとめ、皆さんにも寄り道をしないようにと共有しました。この記事は主に CSS3 に関する知識をまとめたものです。必要な方は参考にしていただければ幸いです。

1. フォントの設定 (すべてのブラウザと互換性があります)

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

手順:

name: フォント名

URL: 絶対アドレスまたは相対アドレスを使用して OpenType フォントを指定します。

sルール: スタイルシート定義

HTML 文書に埋め込まれるフォントを設定します。

@font-face { フォントファミリー: 太字; ソース: URL(http://www.example.com/font.eot); ##2. div[class^="test"]

div 内の class 属性値が「test」で始まるすべての div 要素の背景色を設定します:

div[class^="test"]
{
background:#ffff00;
}

3. [class*="abc"]

class の値には「abc」の要素が含まれます。

div[class*="abc"]

は div

4 の class=abc を持つスタイルのみを表します。最後の p タグ

p:last-child{ background:#ff0000;}

## の背景スタイルを指定します。 #5. 表示 デバイス解像度が最小 768、最大 979 の場合、abc (CSS3) が表示されます。

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9 は

<style>
@media screen and (min-width: 1201px) {
.y-row {
width: 1200px;
border:1px solid #333; height:300px;
min-width: 1200px; } }
@media screen and (max-width: 1200px) {
.y-row {
width: 900px;
border:1px solid #333; height:300px;
min-width: 900px; } }
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

6、div > をサポートします。スパン (IE6 ではサポートされていません)

div >span{font 12px}div タグ内の子スパン スタイルはフォント 12px で、div 内の孫スパンはフォント 12px です。機能せず、優先度は

7 です。フォント シャドウ

.blue {background:#01dbff; 2px 2px 2px #09a5ef; ##影のフォントの左の距離、下の距離、影の距離、範囲の影の色フォントの背景のフォントの影

8、ボックスの影

-moz-border-半径:0px 5px 5px 0px; -webkit-ボーダー半径:0px 5px 5px 0px; -moz-box-shadow:0px 1px #fff inset; 0px 1px #fff inset; box-shadow: 0px 0px 1px #fff inset;

-moz は Firefox ブラウザのプライベート プロパティを表します-ms は IE ブラウザのプライベート プロパティを表します

-webkit は chrome と safari のプライベート プロパティを表します

-o は Opera Apple ブラウザを表します

Settings

border-radius:0px 5px 5px 0px を意味します。境界線の右上隅と右下隅は 5px

box-shadow:0px 0px 1px #fff inset; 境界線の間隔が左に 0、上に 0、影の範囲が 1 ピクセルであることを意味します。

インセットがある場合はボックスの内側の影を意味します。インセットがない場合はボックスの外側の影を意味します。

注: box-shadow:0px 0px 1px #fff

最初の値が 0 の場合、左右の境界影が 1px の範囲内にあることを意味します。

最初の値は正の整数で、左境界影を意味します。

最初の値は右の境界線の影を表す負の整数です。

同様に

#2 番目の値は 0 で、上下の境界線の影を表します。

2 つの正の値整数は、上の境界線からの 1 ピクセルの影の距離を表します。

最初の値は負の整数で、下端の境界線の丸みの設定を表します。

#9, :first-letter

p:first-letter{font-size:20px}

は、p タグの最初の単語のサイズが20px

10. div:first-line { color:red;font-size:16px; }

は、DIV のテキストの最初の行が赤色であることを意味します。フォントは 16px

11、p a:first-child { color: green }

は p ボックス内の最初のハイパーリンクを表し、フォントの色は緑色です

12, p :before { content: "I am here" }

は、p タグ オブジェクトの前にコンテンツを追加することを表します: "I am here"

13. table:after { content : END OF TABLE }

# は、テーブル オブジェクトの後にコンテンツ「END OF TABLE」を表示することを意味します。 #14. シングルコロンとダブルコロン

疑似要素はダブルコロンと疑似要素名で構成されます。二重コロンは、疑似クラスと疑似要素を区別するために現在の仕様で導入されました。ただし、疑似クラスは既存のスタイルと互換性があり、ブラウザは :first-line、:first-letter、:before、:after などの古い疑似クラスを同時にサポートする必要があります。

これで、タイトルの質問に完全に答えることができます。:before など、CSS2 より前に存在した疑似要素については、単一コロンと二重コロン::before は同じ効果があります。

したがって、Web サイトが Webkit、Firefox、Opera およびその他のブラウザーと互換性があることだけが必要な場合、IE ブラウザーと互換性がある必要がある場合は、疑似要素にダブル コロンの記述方法を使用することをお勧めします。 CSS2 のシングルコロン記述方法を使用する方が安全です。

15. .uploader input[type=file]{}

は、クラスがアップローダーであり、ボックスの入力ラベル属性が type=file に設定されていることを意味します。 .

以上がフロントエンド開発 CSS3 テクノロジーの経験共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。