ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ
1. 角を丸くする

今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 を使用して多様な Web アプリケーションを開発しています。 HTML5 の利点の 1 つは、以前は画像で実装する必要があった要素をコードで実装できるようになったことです。 「border-radius」はこの機能を実現するための重要な属性であり、HTML 要素の丸い角を直接定義するために使用でき、すべての最新のブラウザでサポートされています。

CSSコード

コードをコピー
コードは次のとおりです。

border-radius: 10px; /* CSS3 プロパティ */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux ブラウザ */

IE ブラウザの CSS3 プロパティのサポートを完全に理解するには、この記事をお読みください。

2. 影の効果

影の効果は、CSS3 の box-shadow プロパティを通じて簡単に実現できます。すべての主要ブラウザはこのプロパティをサポートしており、Safari はプレフィックス付きの -webkit-box-shadow プロパティをサポートしています。

CSSコード

コードをコピー
コードは次のとおりです。

#私のDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
ボックスシャドウ: 20px 10px 7px #ccc;
}

次のように、JavaScript を使用して影の効果を実現することもできます。

CSSコード

コードをコピー
コードは次のとおりです。

object.style.boxShadow=”20px 10px 7px #ccc”

3. @media属性

Media 属性は、異なる画面で同じスタイルシートのスタイルを設定するために使用されます。このスタイルが適用されるメディアは、属性値で指定できます。

CSSコード

コードをコピー
コードは次のとおりです。

@media スクリーンと (最大幅: 480px) {
/* 幅 480px の画面での Web ページの表示スタイル */
}

開発者は、@media 印刷属性を使用して印刷プレビュー スタイルを指定することもできます。

CSSコード

コードをコピー
コードは次のとおりです。

@メディアプリント
{
p.content { 色: #ccc }
}

4. グラデーション塗りつぶし

CSS3 の Gradient プロパティは、開発者にもう一つの素晴らしい体験を提供します。グラデーションはまだすべてのブラウザでサポートされているわけではないため、レイアウトを設定するためにグラデーションに完全に依存することはできません。

CSSコード

コードをコピー
コードは次のとおりです。

背景: -webkit-gradient(linear, 左上, 左下, from(darkGray), to(#7A7A7A));

5. 背景サイズ

背景サイズは CSS3 で最も重要なプロパティの 1 つであり、多くのブラウザーでサポートされています。背景サイズ プロパティは、背景画像のサイズを設定するために使用されます。以前は、背景画像のサイズはスタイルで調整できませんでした。現在は、背景サイズ プロパティを使用して、たった 1 行のコードでユーザーが望む背景画像効果を実現できます。

CSSコード

コードをコピー
コードは次のとおりです。

分割
{背景:url(bg.jpg);
背景サイズ:800px 600px;
背景繰り返し:繰り返しなし;
}

6 @フォント フェイス

CSS3 の @font-face 属性により、フォント ファイルの参照が大幅に改善されました。この属性は主に、カスタム Web フォントを Web ページに埋め込むために使用されます。以前は、フォントのライセンスの問題により、デザイナーは特定のフォントしか使用できませんでした。まず、フォントの名前をカスタマイズします。

CSSコード

コードをコピー
コードは次のとおりです。

@フォントフェイス
{
フォントファミリ: mySmashingFont;
ソース: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */
}

これで、mySmashingFont フォント ファミリーをどこでも使用できるようになります。

CSSコード

コードをコピー
コードは次のとおりです。

分割
{
フォントファミリ:mySmashingFont;
}

7. clearfix属性

デザイナーが、Overflow: hidden ではフローティングを適切に処理できないと判断した場合、clearfix はフローティングを処理するためのより優れたソリューションを提供します。

CSSコード

コードをコピー
コードは次のとおりです。

.clearfix {
表示: インラインブロック;
}

CSSコード

コードをコピー
コードは次のとおりです。

.clearfix:後{
コンテンツ: "。";
表示: ブロック;
クリア: 両方;
可視性: 非表示;
行の高さ: 0;
高さ: 0;
}

8. マージン: 0 自動

Margin: 0 auto プロパティは基本的な CSS プロパティです。 CSS 構文ではブロック要素を中央に配置するステートメントは定義されていませんが、デザイナーは自動マージン オプションを使用してこの機能を実現できます。このプロパティは、必要に応じて要素を中央に配置するために使用できます。ただし、これはデザイナーが div の幅を設定した場合にのみ可能であることに注意してください。

CSSコード

コードをコピー
コードは次のとおりです。

.myDiv {
マージン: 0 自動;
幅:600ピクセル;
}

9. オーバーフロー: 非表示

オーバーフロー: オーバーフロー機能を非表示にするだけでなく、Hidden CSS プロパティにはフロートをクリアする機能もあります。

CSSコード

コードをコピー
コードは次のとおりです。

分割
{
オーバーフロー:非表示;
}

<<:  CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

>>:  React イベントバインディングの詳細

推薦する

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...

MySQLが数十億のトラフィックをサポートする方法

目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...

MySQLデータ遅延ジャンプの問題の解決策

今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

シェルスクリプトはNginxのaccess.logのPVを定期的にカウントし、APIに送信してデータベースに保存します。

1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する

債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...

CentOS に Nginx をインストールする方法

公式ドキュメント: https://nginx.org/en/linux_packages.html...

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...