最近、私自身が今後レビューしやすいように、フロントエンドに関する知識をまとめ、皆さんにも寄り道をしないようにと共有しました。この記事は主に 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"]
4 の class=abc を持つスタイルのみを表します。最後の p タグ
p:last-child{ background:#ff0000;}
@media (min-width: 768px) and (max-width: 979px) { .abc{} }
ie6-ie9 は div >span{font 12px}div タグ内の子スパン スタイルはフォント 12px で、div 内の孫スパンはフォント 12px です。機能せず、優先度は .blue {background:#01dbff; 2px 2px 2px #09a5ef; ##影のフォントの左の距離、下の距離、影の距離、範囲の影の色フォントの背景のフォントの影 -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 ピクセルの影の距離を表します。 最初の値は負の整数で、下端の境界線の丸みの設定を表します。 p:first-letter{font-size:20px} は、p タグの最初の単語のサイズが20px は、DIV のテキストの最初の行が赤色であることを意味します。フォントは 16px は p ボックス内の最初のハイパーリンクを表し、フォントの色は緑色です は、p タグ オブジェクトの前にコンテンツを追加することを表します: "I am here" # は、テーブル オブジェクトの後にコンテンツ「END OF TABLE」を表示することを意味します。 #14. シングルコロンとダブルコロン したがって、Web サイトが Webkit、Firefox、Opera およびその他のブラウザーと互換性があることだけが必要な場合、IE ブラウザーと互換性がある必要がある場合は、疑似要素にダブル コロンの記述方法を使用することをお勧めします。 CSS2 のシングルコロン記述方法を使用する方が安全です。 15. .uploader input[type=file]{} は、クラスがアップローダーであり、ボックスの入力ラベル属性が type=file に設定されていることを意味します。 . 以上がフロントエンド開発 CSS3 テクノロジーの経験共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<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]-->