ITを表現する

CSSは、今年10歳の存在を完了！ CSSを使用してパンを（またはしない）収入、しばらくの間、回避されている人、あなたは私たちがフォントの良い選択のために飢えてされたか知ってかもしれません。 さらにフォントの欠如とでているようなデザイナーはCSS禅の庭は彼らの設計にいくつかの正義を行うための追求にフォントを置き換えるためにCSSの背景画像を利用してきました。 我々はまた、Flash / JavaScriptの®ハック私たちの設計目標を達成しようとしています。 決してこれは我々が我々のWebデザインに希望のフォントを取得するために間違った方法ですが、間違いなく、それが最も望ましい方法ではありません。 長年にわたってWebデザイナーは、私のように、完全に彼らの設計のための10かそこらのフォントに頼ってきた。

Web標準とフォントフォーマットの最近の進展は、同じ古いデフォルトフォント以外の書体でHTMLテキストをレンダリングすることが可能になります。 "@ fontface" CSSのdeclerationにしています。

@ FontFaceは実際のフォントファイルにリンクし、Webから取得するためのソリューションをprovids。 @ FontFaceを使用して、設計者は背景画像としてテキストを凍結することなく、フォントを使用することができます。 以下に示すように、実装は、非常にまっすぐ進むですが、すべての良いものがそれにCONの部分を持っているとして、すべてのブラウザでは、単一の" フォントタイプ " をサポートしています。 あなたは、クロスブラウザのサポートを必要とすると、サイト内の@ FontFaceを使用することを計画している場合、あなたは同じの様々なフォントの種類のソースを提供する必要があります。

1. TrueTypeフォント -画面上の見栄えするように設計形式。 Windowsのブラウザ（クローム）には特にお勧めします。
2. OpenTypeフォント（CFF） -この形式は、印刷作業のために良いですし、常にWindows上で良く見えません。
3. EOT -あなたは、Internet Explorerをターゲットにしたい場合にこの形式を必要としています。 IEは他のフォーマットを使用することはありません。 彼らはどちらも圧縮しないでも、ドメイン制限されているので、私たちのEOTのは、 "ライト"とみなされます。
4. SVG -これはiPhoneを含むいくつかのブラウザでサポートされているXMLフォーマットです。
5. WOFF -これは、クロスブラウザは、Webのみのフォントの書式（フォントデータはZIP圧縮されます）軽量で、TrueTypeまたはPostScript（CFF）の概説のいずれかでコンパイルすることができます。 これは、現在のFirefox 3.6でサポートされています+。

@ FontFaceを使用して、

 の@ font-face {
フォントファミリー： 'CalligraphyFLFRegular';
 SRC：URL（ 'CalligraphyFLF.eot'）;
 SRC：ローカル（ 'CalligraphyFLF'）、ローカル（ 'CalligraphyFLF'）は、url（ 'CalligraphyFLF.woff'）フォーマット（ 'WOFF'）は、url（ 'CalligraphyFLF.ttf'）フォーマット（ 'TrueTypeフォント'）は、url（ 'CalligraphyFLF 。SVG＃CalligraphyFLF '）フォーマット（の' svg '）;
 }
の@ font-face {
  フォントファミリ： "あなたの書体";
   SRC：URL（ "フォント/ font_filename.eot"）;
   SRC：ローカル（ "代替名"）、ローカル（ "Alternatename"）、
     URL（ "フォント/ font_filename.woff"）フォーマット（ "WOFF"）、
     URL（ "フォント/ font_filename.otf"）フォーマット（ "OpenTypeフォント"）、
     URL（ "フォント/ font_filename.svg＃font_filename"）フォーマット（ "SVG"）;
   }
 H2 {フォントファミリー： "あなたの書体"、グルジア、セリフ;} 

あなたが選択したフォントの書体を含めるには、上記の例からわかるように、人は同じ書体のfonttypesのセットにリンクする必要があります。 したがって、人々は、 "フォントキット"としてそれを参照してください。
明示的にエンドユーザーライセンス契約（EULA）の下でそれにCSSの@ font-faceプロパティでリンクできます。利用可能なフォントキットがあります。

便利なWebFontリソース：

• @ font-faceの埋め込 ​​みできるフォントでwikiページhttp://webfonts.info/wiki/index.php?title=Main_Page
  
• レイLarabie 。 彼はウェブ上で使用するために自由に利用できる興味深いTrueTypeフォントの数百を行った有名なフォントデザイナーです。 彼のフォントは、優雅な装飾、遊び心があります。
• ディーターSteffmannは別の偉大なフォントデザイナーです。 彼は、あまりにも、使用する人のための多くの美しいフォントが利用可能になりました。
• フォントショップは ：ウェブの使用のために特別に設計されたフォントを提供しています。 最も成功したFontFontの家族の30以上は現在のWeb FontFontsとしてご利用いただけます。 FontShopはまた、詳細なWebFontのユーザーガイドがありますhttp://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdfを
  
• フォントリスは ：フォントリスはの@ font-face CSSの埋め込 ​​みで使用するために提供しているすべてのフォントを紹介しています。 フォントリスは、型の印象的な量を提供する1つを選択するのは簡単それは死んだになり、手近に "キット"を提供 - お好みの書体、いくつかの形式で、デモのHTML＆CSSに同梱非常に現在の@ font-face構文を使用します。 。 彼らはまた、方法を提供独自の@ font-faceキットを作るの 。 使用する書体（お使いのコンピュータに付属しているものが必ずしも良いものではありません）適切にライセンスされている場合は、ジェネレータは、EOT、SVGを生成し、ちょっと！ WOFFファイル。

別のクイックちぇ。 ここでCSSの電源を使用してシンプルで素敵な何かがある...しかし、始まることは困難concieve（それはきっと私ではありませんでした）であった。 ドロップシャドウを追加すると、PhotoshopのANF花火などのような編集ツールをいくつかの画像を使用して、私たちの多くのためにケーキのピースはあるかもしれ
私はCSSを使ってドロップシャドウを選んだ理由は、通常、アプリケーションのページデザイン/ HTMLを作成するときに、要件が反復しておく、ということです。 私は何を意味することは、多くのイメージを持つ既存のWebサイトでは、のfreindsリストまたはイメージギャラリーの表示であるような、それはそのために、再処理に既に影を追加または削除するには、アンロードされた画像の全体の負荷が困難になり、ある問題。
これらの余分部門または追加するには、HTMLテキストの作成中に少し前進思考を行っているそうだとすれば、通常状況では、XSL、PHPでこれらのアイコン/サムネイルを生成ループロジックを持っているということです。 JAVAやその他のプログラミング/スクリプト言語は、いつでも追加することができますし、ちょうどショーやこれまでの要件を変更するクライアントごとに、CSSのdisplayプロパティを使用して、これらの影を隠すことの問題です...私は前方に考え、この種を行ってやりなさいこの前に...しかし、ahevは今始まった！

以下の例では、元のイメージは影は無料ですし、必要に応じてdropshadowsが適用されます！ また、私についての私の以前のツタンカーメンのトリックを（Well!これらは、おそらくチュートリアルの最短様々ですので、それが唯一のそれらの"ツタンカーメン"の呼び出しに正当化される）を使用して、少し余分を行っているCSSのClipプロパティを使用して見せびらかすためだけに

オリジナル画像

CSSのドロップシャドウの結果

デモ表示 | ダウンロード、ソースファイルを

なぜ私はこれを理解したいか？ ヒュム...！！

CSSの作家のほとんどは、そのCSSのClipプロパティは、おそらくほとんどの未使用のCSSプロパティの一つです同意するだろう。 それはあまりにも私にとっては本当だったので、私は変更を開始するまでは、それを無視するのが最も幸せだったMooToolsのTWOノブ（ピン）Sliderコンポーネントを（範囲インジケータ付き） 。

スライダの範囲を示すために切り取られbackgroudのイメージ（可変幅の分割に対して）を使用して、Sliderコンポーネントを変更するコンポーネントのいずれかのユーザーから良い提案がありました。 したがって、私の楽しみを入力する時間はなく、CSSのClipプロパティの非チャーター（私のためにofcourseの）水が来ました。

よく！ それはどのように困難になることができますか？ あまりすべてで... YESとNO。 CSSのClipプロパティを使用する構文はかなり直立であるが、意味は/ usuageビットcroockedです。 私のようなメモリでは、毎回私は、スライダのスクリプトの手直しに座っている...私は自分自身に私のスクリプトで作成したロジックを思い出させるために、このClipプロパティの使用方法に戻ってtokeepを参照している.... それゆえ！ それは未来（とも思われる人々の利益のためにCSSのクリッププロパティでboggled）覚えておくべき希望をもって、ペンをダウンすると考え

CSSのクリップは何をしますか？

クリップはCSS 2.1のビジュアルエフェクト·モジュールの一部です。 簡単に言えば、そのジョブは追加のファイル（作成しなくても、それ故に画像をクリッピングしてサムネイルを作成、クリッピングされているオブジェクトの上に表示されるウィンドウを配置することです私はすでに、Sliderコンポーネントの活用には、この機能を入れている ）

CSSのClipプロパティを使用して、四角形の図形を使用してクリッピングを作成することができます。 rectを使用して、多くの他のCSSプロパティ（マージン、パディングなどのように）、同様に必要とする4つの座標上、右、下、左（TRBL）。 あなたはこれらの4つの座標を（しばらくの間、トスに脳を送信）を使用して、クリップのクリッピング領域を計算する方法を詳しく見てみたときに、このプロパティのcroocked性質が反映されています。 今、あなたを混乱させるボトムは、トップから始まり、右は左から始まります。 。 あなたは私が言った？を参照してください。 .... したがって、このポスト...

この小さな混乱は簡単に以下のCSSクリップ/矩形プロパティのこの視覚的な説明と、消えることができます！！

CSSクリップの要件

我々が開始したタスクは、正方形を見た画像（また、広角画像）に次のサムネイル画像をクリップすることである

オリジナルThumbnal /イメージ	Sqaure Thumbmailのクリップの要件

CSSのクリップが見つかりました

デモ表示 | ダウンロード、ソースファイルを

我々はテーブルセル内の一部のコンテンツを合わせて、ページレイアウトを作成するために、CSSに対処しなければならなかった直前に子供の遊びだった。 単にケーキ、お好みのアライメントを持つようにテーブルの" 整列 "または"VALIGN"プロパティを設定！
CSSレイアウトでは、我々の要素に対して"のvertical-align"プロパティたけれども、それは" 整列 "または"VALIGN"プロパティのように単純ではないようです。 もっとspecifiicになる" のvertical-align"クロスブラウザのCSSの一部を書き込みしている場合は特に、あなたの問題のいずれかを解決するように思わなかった。

HTMLテーブルを使用せずに、オブジェクトを中心の問題は、画像またはコンテナ部門内のいくつかのテキストになり、おそらくいくつかの点ですべてのUI / CSSの開発者の悪夢であった。 この問題は、さらにオブジェクトを中央揃えする場合は、合わせてのお悩みは本質的に動的で外挿し、その高さが可変であるとき、すなわち（未知の高さ）。

我々が対処しなければならないブラウザの範囲にわたって動作します既知のまっすぐ解決策はありませんが、私が到着しようとしたことの解決策は私は（IE6、IE 7でそれをしようとしたこといくつかのブラウザで動作するように見えるん。 、FF）。

解決策：
Mozillaは、OperaやSafariなどのブラウザでは、奇妙な振る舞いプロパティは単に" テーブルセル "（表示：テーブルのセル）を含有する部門の" 表示 "プロパティを設定することによって、その感覚にさせることができる" のvertical-align" 。

問題は、まだ彼らはそれを無視して、まだそのまま" テーブルセル "プロパティと無知で何に理解していないようだ誰が、ブラウザのIEの家族と一緒に残ります。 物事が起こるようにするあなたのHTMLに簡単に、広告がさらにいくつかのDOM要素も、下記のソリューションを提供します。

CSSとHTMLは次のようになります。
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/>ビュー。<BR/>：3456 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを表示する | ダウンロードソースファイル （450回ダウンロード）

TOPは、CSSを合わせ
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

BOTTOMは、CSSを合わせ
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを見る | ここからダウンロード

私はこのアライメント問題に対する合理的な解決策を見つけることをしようとしていたので、年齢のように思える。 しかし、今、このソリューションで、私は少し平和に感じる。

そのいつか希望をもって

• CSSの垂直整列プロパティは、ブッシュの周りに多くを打つことなく、それは表のセルの内側にないように動作します
• 少なくとも、マージントップ：オートとマージン底：autoは、マージンと左マージン、右セットの自動への場合と同じ結果として得られます
• ブラウザ戦争はいつの日か以上になります。
• ALLのためだけのブラウザがあります。

ここで上記の溶液のCSSとHTMLをダウンロード （450回ダウンロード）..わかりやすさのために、CSSが最適化されていません

PS：ところで、それらは、私がクリックしたいくつかの写真のサムネイルは...

あなたの要件は、値の区切り文字列を格納したXMLのノードの値を、分割する場合は、個々の項目に、あなたは正しい場所に到達した...以下の例を見てください。 XMLとXSLを少し精通している場合...私はあなたがどんな説明が必要ないと思います。
それはあなたが後にあるものだ場合、後の部分文字列-：コール·テンプレートは、xsl：部分列の前に、XSLまた、この例では、XSLのようなXSL関数の使用が含まれています。

変換されるXML（food.xml）： -
タスクは、タグ "キーワード"には、カンマで区切られた文字列をトークン化することであると仮定

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL（food.xsl）： -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

結果の出力HTML： -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

言うまでもなく...ちょうどあなたの選択の区切り文字にパラメータ "delimitr"を変更

あなたが今まで（または1を作る）リスト項目（li）タグやCSSを使って垂直方向のメニューを行った場合は、発生する可能性がある、Internet Explorerでは、ブロックレベル要素を含むリストアイテムの間IE 6を挿入し、これらのギャップ、でこれはまだ別のバグマークアップ内のリスト項目の間に空白がある場合、すなわち。 ありがとう、でもおかげで、IEのバージョン7は、このバグから解放さそうです。
私、および多くのように、あなたはまだあまりにもIE6での作業、新しいレイアウトを取得する必要がありイライラし、開発者のこのバンドに属している場合、これは役立つかもしれません。 を見て...

サンプルマークアップ ：

<ul id="menu">
<li> <a href="#">トップページ</ a> </ LI>
<li> <a href="#">について</ a> </ LI>
<li> <a href="#">サービス</ a> </ LI>
<li> <a href="#">ポートフォリオ</ a>した</ li>
<li> <a href="#">に関するよくある質問</ a> </ LI>
<li> <a href="#">お問い合わせ</ a> </ LI>
</ UL>

あなたは、垂直メニューに上記のマークアップをtransfromするために、以下のような、いくつかのCSSを作成することができます....

サンプルCSS ...
＃メニュー{
マージン：0;パディング：0;背景：＃FF9900;
リストスタイルのタイプ：なし;幅：875;
}
＃メニューのLi {マージン：0;パディング：0;}
＃メニュー{表示：ブロック;
色：＃555555;
テキスト装飾：なし;
パディング：0 15px;
行の高さ：2.5;国境底：1px固体＃FFF;
}

あなたが表示されます。結果...

このバグの解決策...（太字のイタリック体でCSSを変更/追加されました）

＃メニュー{
マージン：0;パディング：0;背景：＃FF9900;リストスタイルのタイプ：なし;幅：875;
フロート：左; / *これはフロートのリスト項目が含まれています* /
}
＃メニューのLi {
マージン：0;パディング：0;
フロート：左; / *この修正* /
幅：100％; / IE6の*空白のバグ* /
}
＃メニュー{
表示：ブロック;色：＃555555;
テキスト装飾：なし;
パディング：0 15px;
行の高さ：2.5;国境底：1px固体＃FFF;
}

上記ソリューションの鞭は...（IE6のみに知られている理由で）動作するように見える代わりにこのメソッドをしようとした場合

ちょうどあなたのマークアップには、この追加IE6だけのスタイルを追加...

<！ - [LT IE 7の場合>
<style type="text/css">
＃メニューのLi 1 {表示：インラインブロック;}
＃メニューのLi 1 {表示：ブロック;}
</ STYLE>
<[endifの] - >

XML / XSLがdomianで変換した場合、我々は（再利用可能ななされる）ライブラリ項目を使用する動的なコードのピースはしたい時があります。 私が意味するものは、おそらくこの例のシナリオをより明確にすることができます。

あなたのウェブサイト（および、XML、XSL transfroms ofcourseのを使用）を作成しており、ページのほとんどはコメントモジュールを持っているでしょう想像してみてください。 よく！ あなたはすべてのページテンプレート（私が言うが、メンテナンスや手直し悪夢作る持っていけない）、または、より良いにこのコードをコピーしたり貼り付けか、あなたがあなたのページにそれを望むどこまででプルアップすることがINCLUDEファイルを作成します（ S）...
では、どのようにXSL INCLUDEファイルを作成し、別のXSLファイルの内部に含まれていますか ？ ここでどのようには...

物事を明確にするため...ここにあなたが作成したファイルの簡単なリストは...ここで、我々は、食品と呼ばれる親ページに果物や野菜についての情報を含むでしょう。

1。 food.xml - 変換が適用される上のXMLデータファイル
2。 food.xsl - 私たちのfood.xmlを変えていく主なXSLファイル、
3。 inc_fruits.xsl - XSLは、果物のデータをレンダリングするファイルを含む
4。 inc_vegtables.xsl - XSLはv​​etetablesデータをレンダリングするファイルを含める

私は非常に説明していると思ういけない、上記の要素のコードは、自明だろう...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ BODY>
</ HTML>
オプション</ xsl：テンプレート>
オプション</ xsl：スタイルシート>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

（250ダウンロード）ここで、上記のすべてのファイルをダウンロード

IE 6を掲示、MSIEは、他のほとんどの標準的なブラウザに標準的な少数のより多くのCSSプロパティを追加することによって、私達のUI開発者に親切にされています。 "最小の高さ" 1つのそのような有用プロパティです。 ない長いったらしい説明を必要としない非常にまっすぐ進むプロパティです。 コンテンツその家は、それが保持できるよりも少ないと重要なのは（プレーンバニラ"高さ"プロパティとは異なります）のスケールを占めているか、CSSの言葉で、それは同じように動作したときに分割の最小の高さが設定されている場合、それは常に、そのセットの高さを保持その"高さ" "auto"に設定されている部門...

また、IE6で動作しなければならない、まだコードのCSSに必要とされるいくつかの私たちの貧しい人々 、開発者は、 " 最小の高さ "の非可用性は、いつかショーストッパーを証明することができました... Donotの絶望を。

幸いなことに、我々は外の利点に使用して、私たちの目標を達成するために介して我々の方法をハックしたいIEの十分な癖を持っている...つまり、IE6でその分の高さかのように事業部部門を作る

解決策1：ハック[アンダースコアを使用して...続きを読むを ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML： -
<div class="box1">Some dynamic content with variable height ...</div>

---

解決策2：CSSの属性セレクタハックを使用して

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML： -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


CSSの属性セレクタハックは、ブラウザが以前股関節IE6はatributeセレクタを無視して事実を利用しています。 クラス= "みえ"の別のコンテナ部門の要件に注意してください。 ただ、この部門のクラス属性の臨場感は、Opera、MozillaとMSIE7の自動およびそれ以降に戻って高さを上書きします。 atributeセレクタをサポートしていないIE6は、それを無視します。

IE6のmin-heightのハックのデモを見る

XMLとXSLを使用する場合は、属性とXSLでXMLノードの値で遊んでする必要がある場合、あなたは、時間に出くわすかもしれません。 彼らはこのことについて長いったらしい情報を持つサイトの負荷ですが、私が見つけたどれも簡単かつ正確ませんでした...これは、XML / XSLチュートリアルではありませんが、私の試みは、チートリストのいくつかの並べ替えをまとめるために...

私たちが仕事するサンプルXMLは次のようになります。...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

したがって、XSLを使用して、私たちの上記のXMLを変換を開始できます

例1：選択した属性に値を表示する

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTMLの出力結果は次のようになります

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

例2：ループして、すべてのXML属性名とその値を表示する

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTMLの出力結果は次のようになります


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


このスペースを見て、私は新しい知見でこれを更新しておこう...

CSSのリセットは/さまざまなブラウザ間で一貫性を作成し、特定のベースラインに要素のスタイルの数を設定するCSSです。

我々は、すべてのクロスブラウザのCSSのを書いている悪夢をしてきた。 だから我々はCSSを書き始めるときに、これは、任意のクロスブラウザの矛盾を削除/リセットして最初にそれをリセットする方法です。 CSSをリセットし、あなたはあなたにあなたの構築を開始するために、クリーンなベースを与えて、使ってCSSを開始することをCSSの簡単な数行があります。

私が通常使用する傾向があることをCSSのリセットは、次のようになります。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

オール、UL {
リストスタイル：なし;
}

H1、H2、H3、H4、H5、H6 {
フォントサイズ：100％;
フォント重量：ノーマル;
}

ブラウザのフォントサイズをリセット
また、次の行でブラウザのフォントサイズに適用されているリセットに注意してください。...

html {font-size: 76%;}

CSSをリセットするブラウザのフォントサイズを10ピクセルに上、これは相対的なフォントサイズ（prespective WAI準拠のすべての重要である）で動作することが可能になります
例については、以下の定義では、スパン内のフォントサイズは​​10ピクセルとparagarphに14ピクセルに設定されていることに設定されています...

span {font-size: 1em;}
p {font-size: 1.4em;}