HTML スタイルシート-htmlチュートリアル-php.cn

HTML スタイルシート

王林

リリース： 2024-09-04 16:16:28

オリジナル

1266 人が閲覧しました

次の記事では、HTML スタイルシートの概要を説明します。 HTML カスケードスタイルシートは、指定されたすべてのスタイルを使用して HTML をレンダリングする方法をブラウザーに指示するルールとプロパティを備えたシートです。 CSS は、Web ページのスタイルを設定する方法です。 CSS には、背景、色、フォント、間隔、境界線などのすべてのプロパティがあり、ページ上のすべての要素に対して定義できます。

HTML スタイルシートは、ヘッダー、フッター、その他の要素をページ上のどこに配置するかなど、ページのレイアウトを設定するためにも使用されます。 CSS は常に HTML とともに扱われます。スタイルのないページは非常に淡く、見出しなどのハイライトもなく、ページ全体で同じフォントサイズなので、ユーザーの見た目はまったく良くありません。

HTML スタイルシートの使用方法

以前は、スタイル、スクリプト、HTML のすべてが同じページに記述されていました。そのため、ページが非常に長くなり、読んだり編集したりすることが非常に困難になりました。その後、HTML、スタイル、JavaScript を分離する方法が登場しました。

Web ページに HTML スタイルシートを含める方法

スタイルを含める方法は 3 つあります:

1.インラインスタイリング

これは、スタイルと呼ばれる属性内で HTML 自体内のすべての要素のスタイルを記述する方法です。

このスタイルの方法は、HTML が乱雑に見えるため、まったくお勧めできません。また、「一度書いたら、さまざまな場所で使用する」というアプローチに従うことができません。

例:

コード:

<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>

ログイン後にコピー

2.内部スタイリング

これは、style タグにスタイルを含めて、HTML 上の Web ページ内に配置することです。このスタイル設定方法は、一度に複数の要素に使用する必要がある場合に備えて、共通のスタイルをまとめてグループ化できるため、インラインスタイル設定よりも優れています。

開発段階で HTML ファイルを編集する方が簡単で、毎回対応する CSS ファイルを開いて編集する必要がありません。

例:

コード:

<html>
<head>
<style>
container-block{
font-size: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=”container-block”>Hello World!</div>
</body>

ログイン後にコピー

3.外部スタイリング

これは、Web ページのスタイルを設定する最も一般的で最良の方法です。これは内部スタイルと似ていますが、異なる点は、スタイルが拡張子 .css を持つ別のファイルに記述され、そのスタイルへの参照が Web ページの head タグに配置されることです。

Web ページ上の CSS ファイルをリンクするための構文は次のとおりです。

構文:

<link rel="stylesheet" type="text/css" href="theme.css">

ログイン後にコピー

スタイルは、HTML の body タグ (つまり、実際のコンテンツ) の上にある head タグに含める必要があります。

インライン、内部、外部スタイルの優先順位は何ですか?

インラインスタイルは内部スタイルよりも優先され、最後に外部スタイルが優先されます。

インライン>内部>外部

CSS 使用時のベストプラクティス:

CSS は 1 つだけではなく、複数のファイルに分割できます。
分割された CSS ファイルは、リンクタグを使用して head タグに 1 つずつ含めることができます。
または、1 つの CSS ファイルに複数のインポートステートメントを含めて、残りの CSS ファイルをインポートすることもできます。これにより CSS が論理的に分離されますが、最終的には分離されます。すべてのスタイルは同じファイルからレンダリングされます。

使用法: @import ‘./process.css’;

スタイルは、HTML タグ自体、クラス名、ID、任意の属性名などのセレクターを使用して、Web ページ要素に対して定義できます。
次のような疑似セレクターがいくつか利用可能です。
- 前
- 後
- n番目の子供
- 第一子
- 最後の子
- ホバー
- 訪問しました

これらは基本的に選択された要素の状態であり、実際には正確な要素ではありません。

複数の CSS ファイルがページに含まれている場合、最後の CSS ファイルが最も優先され、同じセレクターを持つ以前のファイルの既存のスタイルが上書きされます。
スタイルシートは、ページの読み込み中にスタイルが適用されるように、HTML 自体の前に使用する必要があります。最後に含めると、HTML が最初に読み込まれ、その後ゆっくりとスタイルが適用されるため、ユーザーに非常に悪いエクスペリエンスを与えます。

HTML カスケードスタイルシートのさまざまな機能

さまざまな機能については以下で説明します:

CSS はアニメーションを提供します: 以前は、JavaScript はアニメーションにのみ使用されていました。しかし、最新の CSS、つまり CSS3 では、プロパティ自体を使用してアニメーションを提供します。
ベンダープレフィックス: ブラウザーが新機能の標準バージョン/プロパティ名をリリースする前に、ブラウザーは実験として一定期間、ベンダープレフィックスを提供します。開発者はブラウザが標準バージョンをリリースするまで待つ必要がありますが、それまでの間、ベンダープレフィックスを使用して実験的な機能を使用できます。
CSS 変換: トランジションは、指定された期間内にプロパティのある値から別の値に徐々に移行するために使用されます。

例:

Code:

-webkit-transition: width 2s, height 4s;

CSS Transforms: Transforms in CSS allow you to translate, rotate, scale and skew elements.

Media Queries

Mobile, Desktops, iPads behave differently; however, we cannot style the pages in the same way. Previous web standards have been designed in such a way that we had different CSS for every type of device.

With the progress of web standards and the way the web is built, browsers are developed to have a single CSS that can be used for any type of device. To change the styles for devices based on width and height, media queries are used with which we can specify the min or max-width of the device and write styles within it.

Example:

Code:

@media screen and (max-width: 767px){
container{
width: 60%;
padding: 20px;
}
}

ログイン後にコピー

Styles are definitely a boon for the web. And as web development has increased exponentially in recent times, CSS3 has definitely gained a lot of demand to make the pages extremely interactive and intuitive.

以上がHTML スタイルシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。