すべての開発者が知っておくべき 7 つの CSS ハック-CSSチュートリアル-php.cn

すべての開発者が知っておくべき 7 つの CSS ハック

WBOY

リリース： 2023-08-29 14:53:02

転載

653 人が閲覧しました

每个开发者都应该知道的 7 个 CSS Hack

CSS は Cascading Style Sheets の略です。視覚的に魅力的なウェブサイトを作成するために使用されます。これを使用すると、効果的な Web ページを作成するプロセスが容易になります。

Web サイトのデザインは非常に重要です。ユーザーのインタラクションを容易にすることで、Web サイトの美しさと全体的な品質が向上します。 CSS を使用せずに Web サイトを作成することもできますが、退屈で魅力のない Web サイトをユーザーは操作したくないため、スタイル設定が必要です。この記事では、すべての開発者が Web デザインの途中で必ず必要になる 7 つの CSS ハックについて説明します。

CSS を使用してレスポンシブ画像を作成する

レスポンシブ画像として知られるさまざまな技術を使用すると、デバイスの解像度、方向、画面サイズ、ネットワーク接続、またはページレイアウトに応じて正しい画像を読み込むことができます。ページレイアウトに合わせて画像をブラウザーで引き伸ばしたり、画像のダウンロードに時間がかかりすぎたり、ネットワークトラフィックを過剰に使用したりしないでください。これにより、画像が迅速に読み込まれ、人間の目には鮮明になるため、ユーザーエクスペリエンスが向上します。レスポンシブ画像を作成するには、常に次の構文 -

を記述します。リーリー

高解像度の写真を作成する最も簡単なテクニックは、幅と高さの値を実際のサイズの半分に設定することです。

要素のコンテンツを中央に配置します

要素のコンテンツを中央揃えにしたい場合、複数の方法があります。最も単純なものを以下に挙げます。

位置属性

CSS 位置プロパティを使用して、次の構文を使用してコンテンツを中央に配置します:

リーリー＃＃＃例＃＃＃リーリー

タグを使用する

中央に配置するコンテンツは

タグ内に記述します。コンテンツ全体が中央揃えになります。

text-align 属性を使用する

中央揃えにしたいコンテンツにテキストのみが含まれている場合は、textalign 属性を使用するだけで済みます。

リーリー

ユニバーサルセレクターを使用する

CSS アスタリスク (*) セレクターは、CSS ユニバーサルセレクターとも呼ばれ、Web ページ全体のすべての要素または要素の一部を一度に選択または一致させるために使用されます。選択すると、CSS カスタムプロパティを使用して、それに応じてスタイルを設定できます。これは、、

、

などのあらゆるタイプの HTML 要素に一致します。また、親要素の子要素を選択してスタイルを設定するために使用することもできます。

＃＃＃文法＃＃＃リーリー＃＃＃例＃＃＃リーリー

CSS スタイルをオーバーライドする

通常、CSS クラスを使用して CSS スタイルをオーバーライドします。ただし、特定のスタイルを要素に適用する必要があることを指定する場合は、

!重要

を使用します。

＃＃＃文法＃＃＃リーリー＃＃＃例＃＃＃リーリー

スクロール動作優れた効率的なユーザーエクスペリエンスは、Web デザインにおいて最も重要な要素です。 Web サイトがユーザーフレンドリーでなければ、Web サイトを作成する意味がありません。スムーズなユーザーエクスペリエンスを確保するには、Web サイトにスムーズなスクロール効果を追加する必要があります。

scroll-behaviour

プロパティを使用すると、開発者はスクロール中のページの動作を指定できます。

リーリー

メディアクエリを追加してレイアウトをレスポンシブにします

メディアタイプがドキュメントを表示するデバイスのタイプと一致する場合、そのメディアタイプのメディアクエリを使用してコンテンツにスタイルが適用されます。

リーリー

Web サイトをさまざまなデバイスで表示する必要がある場合は、ビューポートユニットを使用するのが最善です。これにより、ビューポートに応じてコンテンツのサイズが自動的に変更されます。

–

ビューポートの幅

vh ——ビューポートの高さ
v 分
–

最小ビューポート
v max–
最大ビューポート

CSS 弹性盒

一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。

display:flex帮助开发者让每一个组件都显得合适、可爱。它通过对齐元素的子元素将它们排列成行或列。

它将父元素中的子元素对齐到行或列中。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         background-color: #097969;
         align-items: center;
         justify-content: center;
         width: 60%;
      }
      .demo1, .demo2, .demo3, .demo4 {
         background-color: yellow;
         height : 50px;
         width: 90%;
         margin: 10px;
         padding: 12px;
         font-size: 17px;
         font-weight: bold;
         font-family: verdana;
         text-align: center;
         align-items: center;
         color: brown;
      }
      .demo1{
         order: 1;
      }
      .demo2{
         order: 4;
      }
      .demo3{
         order: 2;
      }
      .demo4{
         order: 3;
      }
   </style>
</head>
<body>
   <h1>Order of Flex Items</h1>
   <p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
   <div class="flex-container">
      <div class= "demo1" > This </div>
      <div class= "demo2"> example </div>
      <div class= "demo3"> is </div>
      <div class= "demo4"> an </div>
   </div>
</body>
</html>

ログイン後にコピー

以上がすべての開発者が知っておくべき 7 つの CSS ハックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。