ホームページ > 記事 > ウェブフロントエンド > すべての開発者が知っておくべき 7 つの CSS ハック
すべての開発者が知っておくべき 7 つの CSS ハック
- WBOY転載
- 2023-08-29 14:53:02606ブラウズ
CSS は Cascading Style Sheets の略です。視覚的に魅力的なウェブサイトを作成するために使用されます。これを使用すると、効果的な Web ページを作成するプロセスが容易になります。
Web サイトのデザインは非常に重要です。ユーザーのインタラクションを容易にすることで、Web サイトの美しさと全体的な品質が向上します。 CSS を使用せずに Web サイトを作成することもできますが、退屈で魅力のない Web サイトをユーザーは操作したくないため、スタイル設定が必要です。この記事では、すべての開発者が Web デザインの途中で必ず必要になる 7 つの CSS ハックについて説明します。
CSS を使用してレスポンシブ画像を作成する
レスポンシブ画像として知られるさまざまな技術を使用すると、デバイスの解像度、方向、画面サイズ、ネットワーク接続、またはページ レイアウトに応じて正しい画像を読み込むことができます。ページ レイアウトに合わせて画像をブラウザーで引き伸ばしたり、画像のダウンロードに時間がかかりすぎたり、ネットワーク トラフィックを過剰に使用したりしないでください。これにより、画像が迅速に読み込まれ、人間の目には鮮明になるため、ユーザー エクスペリエンスが向上します。レスポンシブ画像を作成するには、常に次の構文 -
を記述します。 リーリー高解像度の写真を作成する最も簡単なテクニックは、幅と高さの値を実際のサイズの半分に設定することです。
要素のコンテンツを中央に配置します
要素のコンテンツを中央揃えにしたい場合、複数の方法があります。最も単純なものを以下に挙げます。
位置属性
CSS 位置プロパティを使用して、次の構文を使用してコンテンツを中央に配置します:
リーリー ＃＃＃例＃＃＃ リーリー タグを使用する
中央に配置するコンテンツは
タグ内に記述します。コンテンツ全体が中央揃えになります。
中央揃えにしたいコンテンツにテキストのみが含まれている場合は、textalign 属性を使用するだけで済みます。
リーリーユニバーサルセレクターを使用する
CSS アスタリスク (*) セレクターは、CSS ユニバーサル セレクターとも呼ばれ、Web ページ全体のすべての要素または要素の一部を一度に選択または一致させるために使用されます。選択すると、CSS カスタム プロパティを使用して、それに応じてスタイルを設定できます。これは、 、
、、
CSS スタイルをオーバーライドする
通常、CSS クラスを使用して CSS スタイルをオーバーライドします。ただし、特定のスタイルを要素に適用する必要があることを指定する場合は、
!重要
を使用します。
＃＃＃文法＃＃＃ リーリー ＃＃＃例＃＃＃ リーリースクロール動作 優れた効率的なユーザー エクスペリエンスは、Web デザインにおいて最も重要な要素です。 Web サイトがユーザーフレンドリーでなければ、Web サイトを作成する意味がありません。スムーズなユーザー エクスペリエンスを確保するには、Web サイトにスムーズなスクロール効果を追加する必要があります。
scroll-behaviour
プロパティを使用すると、開発者はスクロール中のページの動作を指定できます。
リーリーメディアクエリを追加してレイアウトをレスポンシブにします
メディア タイプがドキュメントを表示するデバイスのタイプと一致する場合、そのメディア タイプのメディア クエリを使用してコンテンツにスタイルが適用されます。
リーリーWeb サイトをさまざまなデバイスで表示する必要がある場合は、ビューポート ユニットを使用するのが最善です。これにより、ビューポートに応じてコンテンツのサイズが自動的に変更されます。
vw– ビューポートの幅-
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 サイトの他の関連記事を参照してください。