ホームページ > ウェブフロントエンド > CSSチュートリアル > css2 の隠れた高度なプロパティの使用法の概要

css2 の隠れた高度なプロパティの使用法の概要

伊谢尔伦
リリース: 2017-07-19 10:57:17
オリジナル
1572 人が閲覧しました

カウンターインクリメント

順序付きリストや、記事のすべてのタイトルに自動的に番号が付けられたらいいのにと思ったことはありませんか?残念ながら、CSS3 プロパティはまだサポートされていません。しかし、CSS 2.1 では、カウンターインクリメントが解決策を提供します。これは、数年前から存在し、IE8 でサポートされていることを意味します。

:before 疑似要素と content 属性を使用すると、カウンターインクリメントによりすべての HTML タグに自動番号を追加できます。ネストされたエンコーディングもサポートされます。

タイトルをコード化するには、まず電卓をリセットします:

   body {counter-reset: thecounter}
ログイン後にコピー

次のスタイルでは、各

タイトルに「セクション」という接頭辞が付き、その後の番号が自動的に 1 ずつ増加します(これがデフォルトです)省略可能)、thecounter は計算機の名前です:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}
ログイン後にコピー

ネストされたエンコードされたリストの場合、ネストされていないため、カウンターをリセットし、

    の自動エンコードをオフにします:

    ol {
    counter-reset: section;
    list-style-type: none;
    }
    ログイン後にコピー

    次に、各

  1. は自動番号付けに設定され、区切り文字はドット (.) とそれに続くスペースです。

    li:before {
    counter-increment: section;
    content: counters(section,".")"";
    }
    ログイン後にコピー

    HTML コード:

    <ol>
    <li>item</li> <!-- 1 -->
    <li>item <!-- 2 -->
    <ol>
    <li>item</li> <!-- 1.1 -->
    <li>item</li> <!-- 1.2 -->
    </ol>
    </li>
    <li>item</li> <!-- 3 -->
    <ol>
    ログイン後にコピー

    ブラウザーのサポート: CSS 2.1、最新のブラウザー、IE。 7+.

    引用

    CMS が引用記号を正しく変換する方法を知らないために行き詰まっていませんか?したがって、quotes 属性の使用を開始します。このようにして、任意のシンボルをカスタマイズできます。 :before および :after 疑似要素を使用して、任意の要素に引用符を指定できます。残念ながら、Webkit ブラウザはこの属性をサポートしていません。テスト後、Chrome 11 はこの属性をサポートし始めました (以前のバージョンではテストされていませんでした)。

    最初の 2 つの記号は、第 1 レベルの引用コンテンツの引用を決定し、最後の 2 つは第 2 レベルの引用に使用され、以下同様です:

    q {
    quotes: &#39;«&#39; &#39;»&#39; "‹" "›";
    }
    ログイン後にコピー

    次の 2 行は、選択された内容の引用を指定するために使用されます。要素:

    q:before {content: open-quote}
    q:after {content: close-quote}
    ログイン後にコピー

    このようにすると、

    これはとても良いの引用です。

    紫色に見えます:
    «これ»

    ブラウザのサポート: CSS 2.1、WebKit、IE 7、IE6 を除くすべての最新ブラウザ。しかし、クロムはそれをサポートしています。 。 。

    質問: シンボルを直接追加するには、CSS ドキュメントを UTF-8 に設定する必要がありますか?これは非常に複雑な質問です。残念ながら、明確な答えは出せません。私の経験では、特定の文字セットを設定する必要はありませんが、utf-8 文字セットでは間違った文字 (「»」など) が表示されるため、間違っている可能性があります。代わりに、iso-8859-1 文字セットを使用すると、すべてが正常になります。

    W3C はこれを次のように説明しています: 「前の例で 'quotes' で定義された引用符はコンピューターのキーボード上に都合よく配置されているため、高品質の文字には別の 10646 文字セットが必要です

    聞いたことがあるかもしれません。」しかし覚えていませんでした。生きている CSS3 プロパティ

    最後に向けて、border-radius や box-shadow ほど普及しておらず、広く必要とされていないいくつかの CSS3 プロパティをもう一度見てみましょう。

    テキスト オーバーフロー

    おそらく、この問題がよく発生します。コンテナーが内部のテキストに対して小さすぎるため、テキスト オーバーフローを避けるために、JavaScript を使用して文字列を切り詰め、「...」記号を追加する必要があります。

    忘れてください! CSS3 と text-overflow: ellipsis を使用すると、テキストがコンテナの幅より長い場合、テキストを強制的に「...」で終わらせることができます。唯一の要件は、overflow:hidden を設定することです。残念ながら、Firefox はこの属性をサポートしていませんが、最近のバージョンではサポートされるようです。

    div {
    width: 100px;
    text-overflow: ellipsis;
    }
    ログイン後にコピー

    ブラウザのサポート: CSS 3、Firefox を除くすべてのブラウザの最新バージョン、IE は IE6 からサポートし、Firefox も 6.0 までサポートを提供すると言われています - 私はそう願っています。

    ワードラップ

    テキストが狭いコンテナ内にある場合、テキストの一部が長すぎて正しく折り返せない可能性があります。たとえば、リンクはしばしば問題を引き起こします。 overflow: hidden でオーバーフロー テキストを非表示にしたくない場合は、word-wrap を Break-word に設定すると、コンテナの幅制限に達したときに文字列を折り返すことができます。

    div {
    width: 50px;
    word-wrap: break-word;
    }
    ログイン後にコピー

    ブラウザのサポート: CSS 3、すべての最新ブラウザ。

    サイズ変更

    Firefox または Chrome を使用している場合は、デフォルトでテキスト ボックスの右下隅にサイズを変更できる小さなハンドルがあることに気づいたはずです。この標準の動作は、CSS3 プロパティのsize: Both によって実装されます。

    しかし、それはテキストエリアに限定されません。すべての HTML 要素に使用できます。水平値と垂直値は、調整が水平か垂直かを制御します。

    注意: display:block 要素については、overflow:visible が設定されている場合、resize 属性は無効になります (これについての元の説明は不明です - Shenfei による)。

    ブラウザのサポート: CSS3、Opera と IE を除くその他の最新ブラウザ。

    背景添付

    当你为一个设置了overflow:auto的元素指定背景图片的时候,当内容太多而出现滚动条后,拖动滚动条就会发现背景图片的位置是固定的,而不是随着滚动条移动。如果你想要背景图片随着内容而滚动,可以设置background-attachment:local。

    浏览器支持: CSS 3,除了Firefox以外的所有现代浏览器,Firefox是支持background-attachment属性的,只是不支持local值.

    text-rendering

    随着越来越多的网站开始用@font-face来渲染文字,易读性开始被关注了。小号字体上,文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节,你可以利用text-rendering来启用kerning 和 ligatures。

    Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性,而后者,你需要将其设置为optimizeLegibility。

    浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

    transform: rotateX/transform: rotateY

    如果你已经开始使用CSS3,那么你可能会比较熟悉transform: rotate(),这个在z轴上旋转元素的属性。

    但是你是否也知道,它也可以更深入的旋转的(比如,围绕x轴和y轴)? 这些变形结合-webkit-backface-visibility: hidden会更合适。

    示例

    如果你鼠标经过这个元素,它将会旋转180°,倒转过来:

    div:hover {
    transform: rotateY(180deg);
    }
    ログイン後にコピー

    小技巧:如果只是映射一个元素,你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

    浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

    以上がcss2 の隠れた高度なプロパティの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート