いくつかの CSS ブラックテクノロジー_html/css_WEB-ITnose-htmlチュートリアル-php.cn

いくつかの CSS ブラックテクノロジー_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:59

オリジナル

1156 人が閲覧しました

出典: JellyBool (@JellyBool) Bole Toutiao の元の記事を共有することを歓迎します

いくつかの理由により、昨日はブログを書きませんでした。毎日 1 つの投稿を投稿することを約束しました。昨日の投稿にアップしました。そうなると私はクリックベイトになります。ここでのブラックテクノロジは、実際にはあまり知られていないものの、特定の問題を解決するのに非常に役立つ CSS のいくつかのプロパティです。

border-radius

多くの開発者は、おそらくこの border-radius を正しく理解していません。基本的に多くの人が次のように使用しているからです:

CSS

.box {

border-radius: 4px

}

少し高級なものは次のとおりです:

CSS

.box {

境界線の半径: 4px 6px 6px 4px ;

}

しかし、究極のブラックテクノロジーは次のように使用されます。

CSS

2 3

.box {

border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px

}

;

はい、8 つの値を割り当てることができます、いいえ見た？心配しないでください。具体的な説明は次のとおりです:

CSS

スラッシュの衝撃前横方向を表し、後ろのスラッシュは縦方向を表します。

outline-offset

多くの開発者は CSS を記述するときに次のステートメントに精通していると思います:

CSS

input {

: なし;

}

input:focus {

アウトライン : なし;

}

入力ボックスからデフォルトの青い線枠を削除する方法です。実際、ここでもう 1 つ言及しておきたいのは、CSS にはアウトラインオフセットプロパティがあり、次のようにデフォルトのワイヤーフレームの距離を設定できることです。 CSS

input {

アウトラインオフset: 4px ; このサイズを調整します属性値輪郭の距離変化がわかります。

}	クラス宣言次のクラス宣言は誰もがよく知っているかもしれません:

CSS

.col-8 {

}

もちろん何もありませんが、次のように書いたらどうでしょうか:

CSS

そうですね、次のように使用できます:

.? {

color: ホットピンク }

.★ {

色: 黄色

}

CSS

1 Unicode であれば、次のようにクラスを宣言できます。

< div class ="? ★">

複数の連続する要素を選択します

CSS

1 背景: ライトピンク }

ol li:nth-child(n+7):nth-child(-n+14) {

/**またはサファリウェイ **/

ol li:nth-child(-n+14):nth-child(n+7) {

背景: ライトピンク

}

上記の書き方で実際に選択できるのは、ol以下の7番目から14番目のli要素です。

単一タグを設定する疑似クラス

HTML には、
、

などの一般的な単一タグがいくつかあります。詳細については、こちらをご覧ください:

http://www.w3.org/TR/html5/syntax.html#void-elements

次の例は、

を変更するものです。

CSS

1 hr:before {

content: "??";

}

hr:after {

content: " これは

}

はい、重要なのは、:before および :after 疑似クラスを使用することです。ちなみに、これら 2 つの疑似クラスを実際に使用してとを変更できますが、前提として、これら 2 つの表示属性を次のように設定します。

CSS

表示: ブロック

属性では大文字と小文字が区別されます

HTML を記述する場合、次のようなコードがあります:

XHTML

次に、CSS の変更に属性セレクターを使用します:

XHTML

div [class="box"] {

color: blue

}

input [type="email" ] {

境界線: 1 ピクセルの赤の実線;

}

このような発言は間違いなく効果的です。ただし、このように宣言すると、結果は次のようになります:

XHTML

div [class="BOX"] {

color: ブルー;

input [type="EMAIL"] {

ボーダー: 単色 1px 赤

}

これが大文字になると、最初の class="BOX" は

に影響しませんが、2 番目の type="EMAIL" は依然として通常の変更 .したがって、属性セレクターを使用するときは、大文字と小文字の区別に注意してください。

現時点では、これらの CSS ブラックテクノロジを思い出す必要があると感じているので、いくつか追加することができます。

Happy Hacking

プログラマーの給料は高いと言われますが、残業の辛さを理解している人はほとんどいません。時間で計算すると給料が少ないから、残業することになるのではないかと毎回思っていませんか。給料上げろ、給料上げろ、給料上げろ、なんでだ、と心の中で叫びたい。 ?残業禁止だから無理だ！！！

あなたの仕事モデルを覆したいですか？残業時間を減らしたいですか？私たちに参加して、プログラマーの自由モデルを一緒に探求しましょう!

知識とスキルの共有を目的としたプログラマー向けのネイティブAPPと、報酬の形でのオンラインインタラクティブプラットフォーム。

当社には20人近くのトップ技術チームと、優れた製品チームと運用チームがいます。チームリーダーは全員、業界で 10 年以上の経験を持っています。

現在オリジナル参加ヒーローを募集しています、あなたも私たちと一緒にプログラマーの働き方を変え、プログラマーの世界を変えていきましょう！豪華な報酬も用意されます。私たちの最初の参加者として、あなたは私たちと一緒にこのプログラマーの成果物を体験することになります。あなたは専門的な提案をすることができ、私たちはそれを謙虚に採用します。誰もがヒーローになり、あなたも私たちが必要とするヒーローになるでしょう！同時に、このヒーロー募集のやり取りに友達を招待することもできます。

あなたの時間をあまり無駄にはしません。あなたの専門的な意見が必要です。1 か月のうち 1 時間を割いていただければ、将来的には毎日 2 時間を節約できます。すべては私たちのためです。

来る？まだ来ませんか？

コネクタパスワード: 1955246408 (QQ)