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

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

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

border-radius

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

CSS

1 2 3

.box { border-radius: 4px }

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

CSS

1 2 3

.box { 境界線の半径: 4px 6px 6px 4px ; }

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

CSS

1

2 3

.box {

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

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

CSS

1

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

outline-offset

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

CSS

1 2 3 4 5 6 7

input { : なし; } input:focus { アウトライン : なし; }

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

1

2

3

input {

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

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

CSS

1

2

3

.col-8 {

}

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

CSS

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

1 2 3 4 5 6 7

.? { color: ホットピンク } .★ { 色: 黄色 }

CSS

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

< div class ="? ★">

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

CSS

1 背景: ライトピンク }

2

3

4

5

6

7

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 {

2 3 4 5 6 7

content: "??"; } hr:after { content: " これは }

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

CSS

1

表示: ブロック

属性では大文字と小文字が区別されます HTML を記述する場合、次のようなコードがあります:

XHTML

1

2

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

XHTML

1 2 3 4 5 6 7

div [class="box"] { color: blue } input [type="email" ] { 境界線: 1 ピクセルの赤の実線; }

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

XHTML

1 2 3 4 5 6 7

div [class="BOX"] { color: ブルー; input [type="EMAIL"] { ボーダー: 単色 1px 赤 } これが大文字になると、最初の class="BOX" は に影響しませんが、2 番目の type="EMAIL" は依然として通常の変更 .したがって、属性セレクターを使用するときは、大文字と小文字の区別に注意してください。 現時点では、これらの CSS ブラック テクノロジを思い出す必要があると感じているので、いくつか追加することができます。 Happy Hacking プログラマーの給料は高いと言われますが、残業の辛さを理解している人はほとんどいません。時間で計算すると給料が少ないから、残業することになるのではないかと毎回思っていませんか。給料上げろ、給料上げろ、給料上げろ、なんでだ、と心の中で叫びたい。 ?残業禁止だから無理だ！ ！ ！ あなたの仕事モデルを覆したいですか？残業時間を減らしたいですか？私たちに参加して、プログラマーの自由モデルを一緒に探求しましょう! 知識とスキルの共有を目的としたプログラマー向けのネイティブAPPと、報酬の形でのオンラインインタラクティブプラットフォーム。 当社には20人近くのトップ技術チームと、優れた製品チームと運用チームがいます。チームリーダーは全員、業界で 10 年以上の経験を持っています。 現在オリジナル参加ヒーローを募集しています、あなたも私たちと一緒にプログラマーの働き方を変え、プログラマーの世界を変えていきましょう！豪華な報酬も用意されます。私たちの最初の参加者として、あなたは私たちと一緒にこのプログラマーの成果物を体験することになります。あなたは専門的な提案をすることができ、私たちはそれを謙虚に採用します。誰もがヒーローになり、あなたも私たちが必要とするヒーローになるでしょう！同時に、このヒーロー募集のやり取りに友達を招待することもできます。 あなたの時間をあまり無駄にはしません。あなたの専門的な意見が必要です。1 か月のうち 1 時間を割いていただければ、将来的には毎日 2 時間を節約できます。すべては私たちのためです。 来る？まだ来ませんか？ コネクタパスワード: 1955246408 (QQ)